Skip to content

Instantly share code, notes, and snippets.

@TonyGravagno
Created October 16, 2023 23:05
Show Gist options
  • Save TonyGravagno/06f03622af89abcb7069a96ab2c93920 to your computer and use it in GitHub Desktop.
Save TonyGravagno/06f03622af89abcb7069a96ab2c93920 to your computer and use it in GitHub Desktop.
Workaround for Gutenberg Issue 39423
<?php
/**
* Plugin Name: Workaround for Gutenberg Issue #39423
* Description: Override core until header block colors are fixed. <a href="https://github.com/WordPress/gutenberg/issues/39423">https://github.com/WordPress/gutenberg/issues/39423</a>
* Author: Tony Gravagno (<a href="https://profiles.wordpress.org/starbuck/">wordpress.org @starbuck</a>)
* License: MIT
*/
/**
* The problem : Headers over a cover block (and perhaps elsewhere) are not styled.
* Cause: wp-includes/blocks/heading.php is not adding class 'has-text-color'
* This workaround cancels the default action from heading.php, and replaces
* it with the exact same functionality, but adding class 'has-text-color' to
* _all_ header tags.
* That causes this CSS to not activate in the page:
* .wp-block-cover h1:not(.has-text-color) ... h2, h3... { color:inherit; }
* So headers DO have that class, they do NOT inherit the color from the container,
* and they are rendered with the color assigned to them in the theme or style variation.
* To ensure headings have the right color, set colors for the default Heading block,
* and all H1-6 tags as well, so that an explicit color will be used. Otherwise
* the color that will be used is (at this time) undefined.
*
* To use:
* 1) Create folder wp-content/mu-plugins. Set owner/group, and 755 perms.
* 2) Save this file into that folder as workaround_39423.php. Set owner/group, and 664 perms.
*
* You should now see this in your Must-Use Plugins list.
* Just refresh your pages and you should see the correctly styled colors on headings.
*
* Notes:
* - Unfortunately a 'doing_it_wrong_trigger_error' is generated when this is used and
* WP_DEBUG is active. For this specific issue, a filter here returns false.
* - A local_log function is included here if you want to see when the events trigger.
*/
// Basic security, prevents file from being loaded directly.
defined('ABSPATH') or die('Cheatin&#8217; uh?');
/**
*
* @param array $attributes Attributes of the block being rendered.
* @param string $content Content of the block being rendered.
*
* @return string The content of the block being rendered.
*/
function block_core_heading_render_39423($attributes, $content)
{
local_log('Processing header block');
if (!$content) {
local_log('Returning, no content');
return $content;
}
$p = new WP_HTML_Tag_Processor($content);
local_log('Processing headers');
$header_tags = array('H1', 'H2', 'H3', 'H4', 'H5', 'H6');
while ($p->next_tag()) {
if (in_array($p->get_tag(), $header_tags, true)) {
$p->add_class('wp-block-heading');
$p->add_class('has-text-color'); // This is the only override line
break;
}
}
local_log('Returning');
return $p->get_updated_html();
}
/**
* Registers the `core/heading` block on server.
*/
function register_block_core_heading_39423()
{
local_log('Registering block type');
register_block_type_from_metadata(
WPINC . '/blocks/heading',
array(
'render_callback' => 'block_core_heading_render_39423',
)
);
}
add_action('init', function () {
local_log('init action');
remove_action('init', 'register_block_core_heading');
add_action('init', 'register_block_core_heading_39423');
add_filter('doing_it_wrong_trigger_error', function ($value, $function_name, $message, $version) {
if ('WP_Block_Type_Registry::register' === $function_name)
if ('Block type "core/heading" is already registered.' === $message) {
local_log('Expected error for core/heading');
return false;
}
},10,4);
}, 1);
/**
* Temporary Logging
*/
function local_log($message) {
if(!false) return; // toggle true/False to enable/disable
$log_path = WP_CONTENT_DIR . DIRECTORY_SEPARATOR . 'uploads' . DIRECTORY_SEPARATOR . 'local.log';
file_put_contents(
$log_path,
$message . PHP_EOL,
FILE_APPEND
);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment