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 all 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
24 changes: 15 additions & 9 deletions lib/block-supports/duotone.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -459,17 +459,23 @@ 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',
function () use ( $filter_svg ) {
'wp_footer',
function () use ( $filter_svg, $selector ) {
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 with a WebKit hack which solves the issue.
global $is_safari;
if ( $is_safari ) {
printf(
// Simply accessing el.offsetHeight flushes layout and style
// changes in WebKit without having to wait for setTimeout.
'<script>( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();</script>',
wp_json_encode( $selector )
);
}
}
);

Expand Down