From 60726a6acc37304c7f43c46c342dc4d38ea0aa01 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 13 Jan 2022 11:24:59 -0600 Subject: [PATCH 1/6] Fix duotone render in non-fse themes --- lib/block-supports/duotone.php | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index cf21402ce919f9..b7db89d1ce7fb9 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -467,7 +467,10 @@ function gutenberg_render_duotone_support( $block_content, $block ) { // 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', + // Additionally, some non-fse themes call the render_block filter + // after the wp_body_open hook, so instead we use the wp_footer hook + // in that case even though it won't render 100% correctly in Safari. + did_action( 'wp_body_open' ) === 0 ? 'wp_body_open' : 'wp_footer', function () use ( $filter_svg ) { echo $filter_svg; } From 00344359dbe46a92670b2bd4d73d7a4e385b0388 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 13 Jan 2022 18:40:56 -0600 Subject: [PATCH 2/6] Try repainting duotone blocks in safari --- lib/block-supports/duotone.php | 31 +++++++++++++++++++------------ 1 file changed, 19 insertions(+), 12 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index b7db89d1ce7fb9..3c7660498352df 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -459,20 +459,27 @@ 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. - // Additionally, some non-fse themes call the render_block filter - // after the wp_body_open hook, so instead we use the wp_footer hook - // in that case even though it won't render 100% correctly in Safari. - did_action( 'wp_body_open' ) === 0 ? 'wp_body_open' : 'wp_footer', - function () use ( $filter_svg ) { + is_admin() ? 'admin_footer' : 'wp_footer', + function () use ( $filter_svg, $filter_id, $selector ) { echo $filter_svg; + + // 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; } ); } )();', + wp_json_encode( $selector ) + ), + 'after' + ); + } } ); From a8f4c92a82fd62eef58afb8dc9a7b3b7d0d3ffef Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Thu, 13 Jan 2022 19:40:09 -0600 Subject: [PATCH 3/6] Move safari workaround out of svg rendering --- lib/block-supports/duotone.php | 36 +++++++++++++++++----------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 3c7660498352df..0cb1a9c4f8b37e 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -461,28 +461,28 @@ function gutenberg_render_duotone_support( $block_content, $block ) { add_action( is_admin() ? 'admin_footer' : 'wp_footer', - function () use ( $filter_svg, $filter_id, $selector ) { + function () use ( $filter_svg ) { echo $filter_svg; - - // 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; } ); } )();', - wp_json_encode( $selector ) - ), - 'after' - ); - } } ); + // 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; } ); } )();', + 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="', '/' ) . '/', From 9f5ad94c68c8345a94319589f3f681055f4ab91d Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Fri, 14 Jan 2022 11:30:14 -0600 Subject: [PATCH 4/6] Remove admin_footer hook --- lib/block-supports/duotone.php | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 0cb1a9c4f8b37e..694217e07ea169 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -460,7 +460,7 @@ function gutenberg_render_duotone_support( $block_content, $block ) { wp_enqueue_style( $filter_id ); add_action( - is_admin() ? 'admin_footer' : 'wp_footer', + 'wp_footer', function () use ( $filter_svg ) { echo $filter_svg; } From 211c193b4fb7b7cb7c84805aa0fdb78ad4c2a1fc Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Fri, 14 Jan 2022 15:05:29 -0600 Subject: [PATCH 5/6] Use the offsetHeight hack --- lib/block-supports/duotone.php | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 694217e07ea169..34622a20bb3dd1 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -468,7 +468,7 @@ function () use ( $filter_svg ) { // 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. + // a repaint with a WebKit hack which solves the issue. global $is_safari; if ( $is_safari ) { wp_register_script( $filter_id, false, array(), null, true ); @@ -476,7 +476,9 @@ function () use ( $filter_svg ) { 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; } ); } )();', + // Simply accessing el.offsetHeight flushes layout and style + // changes in WebKit without having to wait for setTimeout. + '( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();', wp_json_encode( $selector ) ), 'after' From 6da32b1508b49b83a66e96b459ee4561b6a37278 Mon Sep 17 00:00:00 2001 From: Alex Lende Date: Sun, 16 Jan 2022 20:49:20 -0600 Subject: [PATCH 6/6] Move safari script after svg --- lib/block-supports/duotone.php | 34 ++++++++++++++-------------------- 1 file changed, 14 insertions(+), 20 deletions(-) diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php index 34622a20bb3dd1..e5373e65600868 100644 --- a/lib/block-supports/duotone.php +++ b/lib/block-supports/duotone.php @@ -461,30 +461,24 @@ function gutenberg_render_duotone_support( $block_content, $block ) { add_action( 'wp_footer', - function () use ( $filter_svg ) { + function () use ( $filter_svg, $selector ) { echo $filter_svg; + + // 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. + '', + wp_json_encode( $selector ) + ); + } } ); - // 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 ) { - wp_register_script( $filter_id, false, array(), null, true ); - wp_enqueue_script( $filter_id ); - wp_add_inline_script( - $filter_id, - sprintf( - // Simply accessing el.offsetHeight flushes layout and style - // changes in WebKit without having to wait for setTimeout. - '( function() { var el = document.querySelector( %s ); var display = el.style.display; el.style.display = "none"; el.offsetHeight; el.style.display = display; } )();', - 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="', '/' ) . '/',