Consolidate Safari Rerenders into one script

lib/class-wp-duotone-gutenberg.php

@@ -187,23 +187,45 @@ private static function get_css_custom_property_declaration( $filter_data ) {
 	 * 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.
 	 *
-	 * @param string $selector The selector to apply the hack for.
+	 * @param string $selectors The CSS selectors to apply the hack for.
 	 */
-	private static function safari_rerender_hack( $selector ) {
+	private static function safari_rerender_hack( $selectors ) {
 		/*
-		* Simply accessing el.offsetHeight flushes layout and style
+		* Accessing el.offsetHeight flushes layout and style
 		* changes in WebKit without having to wait for setTimeout.
 		*/
-		printf(
-			'<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 )
+		$script_tag = sprintf(
+			'<script>
+				(
+					function() {
+						%s.forEach( selector => {
+							document.querySelectorAll( selector ).forEach( function( el ) {
+								if( ! el ) {
+									return;
+								}
+								var display = el.style.display;
+								el.style.display = "none";
+								el.offsetHeight;
+								el.style.display = display;
+							} );
+						} );
+					}
+				)();
+			</script>',
+			wp_json_encode( $selectors )
 		);
+
+		// Strip whitespace.
+		echo preg_replace( '/\s+/', '', $script_tag );
 	}
 
 	/**
 	 * Outputs all necessary SVG for duotone filters, CSS for classic themes, and safari rerendering hack
 	 */
 	public static function output_footer_assets() {
+
+		$selectors = array();
+
 		foreach ( self::$output as $filter_data ) {
 
 			// SVG will be output on the page later.
@@ -216,10 +238,12 @@ public static function output_footer_assets() {
 				wp_add_inline_style( 'core-block-supports', 'body{' . self::get_css_custom_property_declaration( $filter_data ) . '}' );
 			}
 
-			global $is_safari;
-			if ( $is_safari ) {
-				self::safari_rerender_hack( $filter_data['selector'] );
-			}
+			$selectors[] = $filter_data['selector'];
+		}
+
+		global $is_safari;
+		if ( $is_safari && ! empty( $selectors ) ) {
+			self::safari_rerender_hack( $selectors );
 		}
 	}