Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property #54581

t-hamano · 2023-09-19T02:39:10Z

Fixes #54344
Alternative to #54345
For more information, see this comment

What?

This PR includes the following three:

Added safe_style_css filter to prevent wiriting-mode property from being removed by safecss_filter_attr() function
Remove explicit addition of writing-mode style in render callback function of the Post Navigation Link block which is no longer needed
Updated the Style Engine testing

Why?

For dynamic blocks, as with other block support styles, there is no need to explicitly pass the style, as it should be automatically output by the get_wrapper_attributes() function.

However, this property is not yet allowed in the core, so we need to allow it in the Gutenberg plugin first.

How?

writing-mode (text orientation) is supported in WordPress 6.3. Therefore, this hook originally needed to be added in the lib/compat/wordpress-6.3 directory. However, this property will only be allowed in core WordPress 6.4 and above, so I added the hook to the lib/compat/wordpress-6.4 directory.

Testing Instructions

To test this PR, enable Emptytheme and update theme.json as below:

{
	"$schema": "https://schemas.wp.org/trunk/theme.json",
	"version": 2,
	"settings": {
		"appearanceTools": true,
		"layout": {
			"contentSize": "840px",
			"wideSize": "1100px"
		},
		"typography": {
			"writingMode": true
		}
	}
}

Footnotes Block

Add some footnotes to the paragraph block.
In the Typography panel of the Footnotes block, change orientation to "vertical".
In the front end, the block should be displayed vertically.

Post Navigation Block

Create three posts.
Insert a Previous Post block and a Next Post block in the middle post.
In the Typography panel, change orientation to "vertical".
In the front end, the block should be displayed vertically.

…erty

github-actions · 2023-09-19T02:40:55Z

This pull request has changed or added PHP files. Please confirm whether these changes need to be synced to WordPress Core, and therefore featured in the next release of WordPress.

If so, it is recommended to create a new Trac ticket and submit a pull request to the WordPress Core Github repository soon after this pull request is merged.

If you're unsure, you can always ask for help in the #core-editor channel in WordPress Slack.

Thank you! ❤️

View changed files

❔ lib/compat/wordpress-6.4/kses.php
❔ lib/load.php
❔ phpunit/style-engine/style-engine-test.php

carolinan · 2023-09-19T03:54:07Z

As far as I know, it was never supported in 6.3. I don't know if this was a decision made or if the backport just did not get done.

carolinan · 2023-09-19T03:56:36Z

Another question is if we want to add support for text-orientation at the same time or if this needs to wait until later:
#52624

t-hamano · 2023-09-19T04:49:05Z

As far as I know, it was never supported in 6.3. I don't know if this was a decision made or if the backport just did not get done.

Sorry, this was my mistake. Indeed, writing mode seems to be supported starting with WordPress 6.4.

https://core.trac.wordpress.org/ticket/59306

Another question is if we want to add support for text-orientation at the same time or if this needs to wait until later:

Personally, I think it would be better to merge this PR first, which has fewer files to add/update. That way, #52624 would only need to update the safe_style_css hook and style engine test after rebasing with the latest trunk.

andrewserong · 2023-09-19T04:50:22Z

packages/block-library/src/post-navigation-link/index.php

-	$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,
 		)
 	);


Since this change will be bundled in with the packages update for core, would it be worth trying to land the change to core's safe_style_css list before attempting to land this Gutenberg PR?

I see, I think that's certainly true.

Would it be ideal to wait to merge this PR until a patch has been submitted to the core that adds writing-mode to the safe_style_css list and is committed in the core?

I don't think it necessarily needs to be committed to core before merging this PR, but I'd recommend opening a trac ticket and corresponding PR for wordpress-develop before merging if you have the time, that way the change will be ready to land in time.

andrewserong

This is working nicely for me, thanks for adding it in!

✅ Writing-mode now outputs correctly for the footnotes block on the site frontend
✅ With this change the writing mode still outputs correctly for the post navigation link block

Just left a comment about backporting to core. If this PR lands for 6.4, it'd be good to ensure the backport for core lands as well so that the adjustment to the post navigation link block doesn't cause any regressions.

LGTM! ✨

t-hamano · 2023-09-19T05:48:03Z

Added a ticket and a patch to the core: https://core.trac.wordpress.org/ticket/59387

Also added to the backport tracking issue #54177.

I think everything is ready now, so let's merge this PR 👍

t-hamano · 2023-09-19T05:51:39Z

@carolinan Could you rebase #52624 with the latest trunk and add text-orientation to the hook in lib/compat/wordpress-6.4/kses.php?

Original PR from Gutenberg repository: * [WordPress/gutenberg#54581 #54581 Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property] Reference: [https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode MDN Web Docs: writing-mode]. Follow-up to [56605]. Props wildworks, mukesh27, poena, andrewserong. Fixes #59387. git-svn-id: https://develop.svn.wordpress.org/trunk@56617 602fd350-edb4-49c9-b593-d223f7449a82

Original PR from Gutenberg repository: * [WordPress/gutenberg#54581 #54581 Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property] Reference: [https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode MDN Web Docs: writing-mode]. Follow-up to [56605]. Props wildworks, mukesh27, poena, andrewserong. Fixes #59387. Built from https://develop.svn.wordpress.org/trunk@56617 git-svn-id: http://core.svn.wordpress.org/trunk@56129 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Original PR from Gutenberg repository: * [WordPress/gutenberg#54581 #54581 Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property] Reference: [https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode MDN Web Docs: writing-mode]. Follow-up to [56605]. Props wildworks, mukesh27, poena, andrewserong. Fixes #59387. Built from https://develop.svn.wordpress.org/trunk@56617 git-svn-id: https://core.svn.wordpress.org/trunk@56129 1a063a9b-81f0-0310-95a4-ce76da25c4cd

Original PR from Gutenberg repository: * [WordPress/gutenberg#54581 #54581 Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property] Reference: [https://developer.mozilla.org/en-US/docs/Web/CSS/writing-mode MDN Web Docs: writing-mode]. Follow-up to [56605]. Props wildworks, mukesh27, poena, andrewserong. Fixes #59387. git-svn-id: https://develop.svn.wordpress.org/trunk@56617 602fd350-edb4-49c9-b593-d223f7449a82

carolinan · 2023-10-03T07:02:48Z

@carolinan Could you rebase #52624 with the latest trunk and add text-orientation to the hook in lib/compat/wordpress-6.4/kses.php?

Done

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

56fe1be

…erty

t-hamano added [Type] Bug An existing feature does not function as intended Gutenberg Plugin Issues or PRs related to Gutenberg Plugin management related efforts labels Sep 19, 2023

t-hamano requested review from ramonjd, carolinan and andrewserong September 19, 2023 03:01

t-hamano added the Needs PHP backport Needs PHP backport to Core label Sep 19, 2023

t-hamano marked this pull request as ready for review September 19, 2023 03:01

t-hamano requested review from spacedmonkey and ajitbohra as code owners September 19, 2023 03:01

t-hamano mentioned this pull request Sep 19, 2023

Footnotes: Fix writingMode (text orientation setting) on the front #54345

Closed

t-hamano self-assigned this Sep 19, 2023

andrewserong reviewed Sep 19, 2023

View reviewed changes

andrewserong approved these changes Sep 19, 2023

View reviewed changes

carolinan mentioned this pull request Sep 19, 2023

Add Typography text-orientation (Upright and mixed letters) #52624

Closed

t-hamano mentioned this pull request Sep 19, 2023

Plugin: Synchronize PHP changes for WordPress 6.4 release #54177

Closed

86 tasks

t-hamano merged commit 2cfe1ba into trunk Sep 19, 2023
59 checks passed

t-hamano deleted the fix/writing-mode-kses branch September 19, 2023 05:49

github-actions bot added this to the Gutenberg 16.7 milestone Sep 19, 2023

SiobhyB removed the Needs PHP backport Needs PHP backport to Core label Sep 25, 2023

andrewserong mentioned this pull request Oct 8, 2024

Fix writingMode support in dynamic blocks WordPress/wordpress-develop#7534

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property #54581

Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property #54581

t-hamano commented Sep 19, 2023 •

edited

Loading

github-actions bot commented Sep 19, 2023

carolinan commented Sep 19, 2023

carolinan commented Sep 19, 2023

t-hamano commented Sep 19, 2023

andrewserong Sep 19, 2023

t-hamano Sep 19, 2023

andrewserong Sep 19, 2023

andrewserong left a comment

t-hamano commented Sep 19, 2023

t-hamano commented Sep 19, 2023

carolinan commented Oct 3, 2023

Gutenberg Plugin: Add hook to allow writing-mode as a safe CSS property #54581

Gutenberg Plugin: Add hook to allow writing-mode as a safe CSS property #54581

Conversation

t-hamano commented Sep 19, 2023 • edited Loading

What?

Why?

How?

Testing Instructions

Footnotes Block

Post Navigation Block

github-actions bot commented Sep 19, 2023

carolinan commented Sep 19, 2023

carolinan commented Sep 19, 2023

t-hamano commented Sep 19, 2023

andrewserong Sep 19, 2023

Choose a reason for hiding this comment

t-hamano Sep 19, 2023

Choose a reason for hiding this comment

andrewserong Sep 19, 2023

Choose a reason for hiding this comment

andrewserong left a comment

Choose a reason for hiding this comment

t-hamano commented Sep 19, 2023

t-hamano commented Sep 19, 2023

carolinan commented Oct 3, 2023

Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property #54581

Gutenberg Plugin: Add hook to allow `writing-mode` as a safe CSS property #54581

t-hamano commented Sep 19, 2023 •

edited

Loading