Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix duotone render in non-fse themes #37954

Merged
merged 6 commits into from
Jan 17, 2022
Merged

Fix duotone render in non-fse themes #37954

Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
60726a6
Fix duotone render in non-fse themes
Jan 13, 2022
0034435
Try repainting duotone blocks in safari
Jan 14, 2022
a8f4c92
Move safari workaround out of svg rendering
Jan 14, 2022
9f5ad94
Remove admin_footer hook
Jan 14, 2022
211c193
Use the offsetHeight hack
Jan 14, 2022
6da32b1
Move safari script after svg
Jan 17, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 18 additions & 8 deletions lib/block-supports/duotone.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,20 +459,30 @@ function gutenberg_render_duotone_support( $block_content, $block ) {
wp_add_inline_style( $filter_id, $filter_style );
wp_enqueue_style( $filter_id );

// Render any custom filter the user may have added.
add_action(
// There are a couple of known rendering quirks in Safari.
// 1. Filters won't render at all when the SVG is in the head of
// the document.
// 2. Filters display incorrectly when the SVG is defined after
// where the filter is used in the document, so the footer does
// not work.
'wp_body_open',
is_admin() ? 'admin_footer' : 'wp_footer',
ajlende marked this conversation as resolved.
Show resolved Hide resolved
function () use ( $filter_svg ) {
echo $filter_svg;
ajlende marked this conversation as resolved.
Show resolved Hide resolved
}
);

// Safari renders elements incorrectly on first paint when the SVG
// filter comes after the content that it is filtering, so we force
// a repaint by resetting the display style which solves the issue.
global $is_safari;
if ( $is_safari ) {
wp_register_script( $filter_id, false, array(), null, true );
wp_enqueue_script( $filter_id );
wp_add_inline_script(
$filter_id,
sprintf(
'( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; setTimeout( function() { el.style.display = display; } ); } )();',
ajlende marked this conversation as resolved.
Show resolved Hide resolved
wp_json_encode( $selector )
),
'after'
);
}

// Like the layout hook, this assumes the hook only applies to blocks with a single wrapper.
return preg_replace(
'/' . preg_quote( 'class="', '/' ) . '/',
Expand Down