Gutenberg Plugin: Add hook to allow writing-mode as a safe CSS prop…

…erty (WordPress#54581)
bph · Sep 19, 2023 · 2cfe1ba · 2cfe1ba
1 parent b743f39
commit 2cfe1ba
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 6 deletions.
diff --git a/lib/compat/wordpress-6.4/kses.php b/lib/compat/wordpress-6.4/kses.php
@@ -0,0 +1,18 @@
+<?php
+/**
+ * Temporary compatibility shims for block APIs present in Gutenberg.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * Update allowed inline style attributes list.
+ *
+ * @param string[] $attrs Array of allowed CSS attributes.
+ * @return string[] CSS attributes.
+ */
+function gutenberg_safe_style_attrs_6_4( $attrs ) {
+	$attrs[] = 'writing-mode';
+	return $attrs;
+}
+add_filter( 'safe_style_css', 'gutenberg_safe_style_attrs_6_4' );
diff --git a/lib/load.php b/lib/load.php
@@ -97,6 +97,7 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/compat/wordpress-6.4/block-hooks.php';
 require __DIR__ . '/compat/wordpress-6.4/block-patterns.php';
 require __DIR__ . '/compat/wordpress-6.4/script-loader.php';
+require __DIR__ . '/compat/wordpress-6.4/kses.php';
 
 // Experimental features.
 require __DIR__ . '/experimental/block-editor-settings-mobile.php';

diff --git a/packages/block-library/src/post-navigation-link/index.php b/packages/block-library/src/post-navigation-link/index.php
@@ -28,14 +28,9 @@ function render_block_core_post_navigation_link( $attributes, $content ) {
 	if ( isset( $attributes['textAlign'] ) ) {
 		$classes .= " has-text-align-{$attributes['textAlign']}";
 	}
-	$styles = '';
-	if ( isset( $attributes['style']['typography']['writingMode'] ) ) {
-		$styles = "writing-mode: {$attributes['style']['typography']['writingMode']};";
-	}
 	$wrapper_attributes = get_block_wrapper_attributes(
 		array(
 			'class' => $classes,
-			'style' => $styles,
 		)
 	);
 	// Set default values.

diff --git a/phpunit/style-engine/style-engine-test.php b/phpunit/style-engine/style-engine-test.php
@@ -192,11 +192,12 @@ public function data_wp_style_engine_get_styles() {
 						'textDecoration' => 'underline',
 						'textTransform'  => 'uppercase',
 						'letterSpacing'  => '2',
+						'writingMode'    => 'vertical-rl',
 					),
 				),
 				'options'         => null,
 				'expected_output' => array(
-					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;column-count:2;text-decoration:underline;text-transform:uppercase;letter-spacing:2;',
+					'css'          => 'font-size:clamp(2em, 2vw, 4em);font-family:Roboto,Oxygen-Sans,Ubuntu,sans-serif;font-style:italic;font-weight:800;line-height:1.3;column-count:2;text-decoration:underline;text-transform:uppercase;letter-spacing:2;writing-mode:vertical-rl;',
 					'declarations' => array(
 						'font-size'       => 'clamp(2em, 2vw, 4em)',
 						'font-family'     => 'Roboto,Oxygen-Sans,Ubuntu,sans-serif',
@@ -207,6 +208,7 @@ public function data_wp_style_engine_get_styles() {
 						'text-decoration' => 'underline',
 						'text-transform'  => 'uppercase',
 						'letter-spacing'  => '2',
+						'writing-mode'    => 'vertical-rl',
 					),
 				),
 			),