Changeset 57491 for trunk/src/wp-includes/block-supports/dimensions.php

Timestamp:

01/31/2024 02:52:25 AM (12 months ago)

Author:

isabel_brison

Message:

Editor: introduce dimensions.aspectRatio block support.

Adds front end rendering logic for the dimensions.aspectRatio block support as well as the required logic in WP_Theme_JSON and the style engine.

Props andrewserong.
Fixes #60365.

File:

• trunk/src/wp-includes/block-supports/dimensions.php (modified) (1 diff)

trunk/src/wp-includes/block-supports/dimensions.php

@@ -84 +84 @@
 }
 
+/**
+ * Renders server-side dimensions styles to the block wrapper.
+ * This block support uses the `render_block` hook to ensure that
+ * it is also applied to non-server-rendered blocks.
+ *
+ * @since 6.5.0
+ * @access private
+ *
+ * @param  string $block_content Rendered block content.
+ * @param  array  $block         Block object.
+ * @return string                Filtered block content.
+ */
+function wp_render_dimensions_support( $block_content, $block ) {
+    $block_type               = WP_Block_Type_Registry::get_instance()->get_registered( $block['blockName'] );
+    $block_attributes         = ( isset( $block['attrs'] ) && is_array( $block['attrs'] ) ) ? $block['attrs'] : array();
+    $has_aspect_ratio_support = block_has_support( $block_type, array( 'dimensions', 'aspectRatio' ), false );
+
+    if (
+        ! $has_aspect_ratio_support ||
+        wp_should_skip_block_supports_serialization( $block_type, 'dimensions', 'aspectRatio' )
+    ) {
+        return $block_content;
+    }
+
+    $dimensions_block_styles                = array();
+    $dimensions_block_styles['aspectRatio'] = $block_attributes['style']['dimensions']['aspectRatio'] ?? null;
+
+    // To ensure the aspect ratio does not get overridden by `minHeight` unset any existing rule.
+    if (
+        isset( $dimensions_block_styles['aspectRatio'] )
+    ) {
+        $dimensions_block_styles['minHeight'] = 'unset';
+    } elseif (
+        isset( $block_attributes['style']['dimensions']['minHeight'] ) ||
+        isset( $block_attributes['minHeight'] )
+    ) {
+        $dimensions_block_styles['aspectRatio'] = 'unset';
+    }
+
+    $styles = wp_style_engine_get_styles( array( 'dimensions' => $dimensions_block_styles ) );
+
+    if ( ! empty( $styles['css'] ) ) {
+        // Inject dimensions styles to the first element, presuming it's the wrapper, if it exists.
+        $tags = new WP_HTML_Tag_Processor( $block_content );
+
+        if ( $tags->next_tag() ) {
+            $existing_style = $tags->get_attribute( 'style' );
+            $updated_style  = '';
+
+            if ( ! empty( $existing_style ) ) {
+                $updated_style = $existing_style;
+                if ( ! str_ends_with( $existing_style, ';' ) ) {
+                    $updated_style .= ';';
+                }
+            }
+
+            $updated_style .= $styles['css'];
+            $tags->set_attribute( 'style', $updated_style );
+
+            if ( ! empty( $styles['classnames'] ) ) {
+                foreach ( explode( ' ', $styles['classnames'] ) as $class_name ) {
+                    if (
+                        str_contains( $class_name, 'aspect-ratio' ) &&
+                        ! isset( $block_attributes['style']['dimensions']['aspectRatio'] )
+                    ) {
+                        continue;
+                    }
+                    $tags->add_class( $class_name );
+                }
+            }
+        }
+
+        return $tags->get_updated_html();
+    }
+
+    return $block_content;
+}
+
+add_filter( 'render_block', 'wp_render_dimensions_support', 10, 2 );
+
 // Register the block support.
 WP_Block_Supports::get_instance()->register(