Add filter for duotone to account for gutenberg_restore_image_outer_c…

…ontainer in classic themes (WordPress#59764) Co-authored-by: ajlende <[email protected]> Co-authored-by: scruffian <[email protected]> Co-authored-by: bph <[email protected]> Co-authored-by: ndiego <[email protected]> Co-authored-by: annezazu <[email protected]> Co-authored-by: sabernhardt <[email protected]> * Add filter for duotone to account for gutenberg_restore_image_outer_container in classic themes. Fixes WordPress#54121 * Try making things a bit more efficient * Fix phpcs * Fix phpcs * Reuse if class_exists block * Fix phpcs
carstingaxion · Mar 27, 2024 · 81f7add · 81f7add
1 parent 8a39659
commit 81f7add
Show file tree

Hide file tree

Showing 2 changed files with 41 additions and 0 deletions.
diff --git a/lib/block-supports/duotone.php b/lib/block-supports/duotone.php
@@ -28,8 +28,10 @@
 }
 if ( class_exists( 'WP_Duotone' ) ) {
 	remove_filter( 'render_block', array( 'WP_Duotone', 'render_duotone_support' ) );
+	remove_filter( 'render_block_core/image', array( 'WP_Duotone', 'restore_image_outer_container' ) );
 }
 add_filter( 'render_block', array( 'WP_Duotone_Gutenberg', 'render_duotone_support' ), 10, 2 );
+add_filter( 'render_block_core/image', array( 'WP_Duotone_Gutenberg', 'restore_image_outer_container' ), 10, 1 );
 
 // Enqueue styles.
 // Block styles (core-block-supports-inline-css) before the style engine (gutenberg_enqueue_stored_styles).

diff --git a/lib/class-wp-duotone-gutenberg.php b/lib/class-wp-duotone-gutenberg.php
@@ -896,6 +896,45 @@ public static function render_duotone_support( $block_content, $block ) {
 		return $tags->get_updated_html();
 	}
 
+	/**
+	 * Fixes the issue with our generated class name not being added to the block's outer container
+	 * in classic themes due to gutenberg_restore_image_outer_container from layout block supports.
+	 *
+	 * @since 6.5.0
+	 *
+	 * @param  string $block_content Rendered block content.
+	 * @return string                Filtered block content.
+	 */
+	public static function restore_image_outer_container( $block_content ) {
+		if ( wp_theme_has_theme_json() ) {
+			return $block_content;
+		}
+
+		$tags          = new WP_HTML_Tag_Processor( $block_content );
+		$wrapper_query = array(
+			'tag_name'   => 'div',
+			'class_name' => 'wp-block-image',
+		);
+		if ( ! $tags->next_tag( $wrapper_query ) ) {
+			return $block_content;
+		}
+
+		$tags->set_bookmark( 'wrapper-div' );
+		$tags->next_tag();
+
+		$inner_classnames = explode( ' ', $tags->get_attribute( 'class' ) );
+		foreach ( $inner_classnames as $classname ) {
+			if ( 0 === strpos( $classname, 'wp-duotone' ) ) {
+				$tags->remove_class( $classname );
+				$tags->seek( 'wrapper-div' );
+				$tags->add_class( $classname );
+				break;
+			}
+		}
+
+		return $tags->get_updated_html();
+	}
+
 	/**
 	 * Appends the used block duotone filter declarations to the inline block supports CSS.
 	 *