Add new textAlign block support #6590

t-hamano · 2024-05-21T01:51:16Z

Trac ticket: https://core.trac.wordpress.org/ticket/61256

This PR backports the following three PHP changes in Gutenberg PR:

This PR enables textAlign block support on the server-side.

Testing Instructions

Currently, there are no blocks that support textAlign, so please add the following changes to your theme's functions.php. This enables textAlign support in the Archive block.

function custom_block_type_metadata_settings( $settings, $metadata ) {
	if ( $settings['name'] === 'core/archives' ) {
		$settings['supports']['typography']['textAlign'] = true;
	}
	return $settings;
}
add_filter( 'block_type_metadata_settings', 'custom_block_type_metadata_settings', 10, 2 );

Next, switch the post editor to the code editor and paste the code below.

<!-- wp:archives {"style":{"typography":{"textAlign":"center"}}} /-->

Save the post and check it on the front end. The block should be given the has-text-align-center class and the text should be centered left and right.

This Pull Request is for code review only. Please keep all other discussion in the Trac ticket. Do not merge this Pull Request. See GitHub Pull Requests for Code Review in the Core Handbook for more details.

github-actions · 2024-05-21T01:51:36Z

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

Core Committers: Use this line as a base for the props when committing in SVN:

Props wildworks, ellatrix.

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

github-actions · 2024-05-21T02:04:23Z

Test using WordPress Playground

The changes in this pull request can previewed and tested using a WordPress Playground instance.

WordPress Playground is an experimental project that creates a full WordPress instance entirely within the browser.

Some things to be aware of

The Plugin and Theme Directories cannot be accessed within Playground.
All changes will be lost when closing a tab with a Playground instance.
All changes will be lost when refreshing the page.
A fresh instance is created each time the link below is clicked.
Every time this pull request is updated, a new ZIP file containing all changes is created. If changes are not reflected in the Playground instance,
it's possible that the most recent build failed, or has not completed. Check the list of workflow runs to be sure.

For more details about these limitations and more, check out the Limitations page in the WordPress Playground documentation.

Test this pull request with WordPress Playground.

ellatrix · 2024-06-03T07:19:32Z

@t-hamano Could you rebase this?

t-hamano · 2024-06-03T08:21:31Z

Could you rebase this?

Done.

ellatrix · 2024-06-04T05:07:17Z

tests/phpunit/tests/theme/wpThemeJson.php

@@ -560,7 +565,7 @@ public function test_get_stylesheet() {
 		);

 		$variables = ':root{--wp--preset--color--grey: grey;--wp--preset--gradient--custom-gradient: linear-gradient(135deg,rgba(0,0,0) 0%,rgb(0,0,0) 100%);--wp--preset--font-size--small: 14px;--wp--preset--font-size--big: 41px;--wp--preset--font-family--arial: Arial, serif;}.wp-block-group{--wp--custom--base-font: 16;--wp--custom--line-height--small: 1.2;--wp--custom--line-height--medium: 1.4;--wp--custom--line-height--large: 1.8;}';
-		$styles    = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:root :where(body){color: var(--wp--preset--color--grey);}:root :where(a:where(:not(.wp-element-button))){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';
+		$styles    = ':where(body) { margin: 0; }.wp-site-blocks > .alignleft { float: left; margin-right: 2em; }.wp-site-blocks > .alignright { float: right; margin-left: 2em; }.wp-site-blocks > .aligncenter { justify-content: center; margin-left: auto; margin-right: auto; }:where(.is-layout-flex){gap: 0.5em;}:where(.is-layout-grid){gap: 0.5em;}.is-layout-flow > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-flow > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-flow > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > .alignleft{float: left;margin-inline-start: 0;margin-inline-end: 2em;}.is-layout-constrained > .alignright{float: right;margin-inline-start: 2em;margin-inline-end: 0;}.is-layout-constrained > .aligncenter{margin-left: auto !important;margin-right: auto !important;}.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)){margin-left: auto !important;margin-right: auto !important;}body .is-layout-flex{display: flex;}.is-layout-flex{flex-wrap: wrap;align-items: center;}.is-layout-flex > :is(*, div){margin: 0;}body .is-layout-grid{display: grid;}.is-layout-grid > :is(*, div){margin: 0;}:root :where(body){color: var(--wp--preset--color--grey);}:root :where(a:where(:not(.wp-element-button))){background-color: #333;color: #111;}:root :where(.wp-element-button, .wp-block-button__link){box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.66);}:root :where(.wp-block-cover){min-height: unset;aspect-ratio: 16/9;}:root :where(.wp-block-group){background: var(--wp--preset--gradient--custom-gradient);border-radius: 10px;min-height: 50vh;padding: 24px;}:root :where(.wp-block-group a:where(:not(.wp-element-button))){color: #111;}:root :where(.wp-block-heading){color: #123456;}:root :where(.wp-block-heading a:where(:not(.wp-element-button))){background-color: #333;color: #111;font-size: 60px;}:root :where(.wp-block-media-text){text-align: center;}:root :where(.wp-block-post-date){color: #123456;}:root :where(.wp-block-post-date a:where(:not(.wp-element-button))){background-color: #777;color: #555;}:root :where(.wp-block-post-excerpt){column-count: 2;}:root :where(.wp-block-image){margin-bottom: 30px;}:root :where(.wp-block-image img, .wp-block-image .wp-block-image__crop-area, .wp-block-image .components-placeholder){border-top-left-radius: 10px;border-bottom-right-radius: 1em;}:root :where(.wp-block-image img, .wp-block-image .components-placeholder){filter: var(--wp--preset--duotone--custom-duotone);}';


I saw the test result adds a style here

:root :where(.wp-block-media-text){text-align: center;}

But above I see that we're adding classes instead of style properties. So is this normal?

I see, these are global styles.

ellatrix

Works, changes make sense.

See WordPress/gutenberg#59531. See WordPress/gutenberg#61182. See WordPress/gutenberg#61717. See #6590. Fixes #61256. Props wildworks, ellatrix. git-svn-id: https://develop.svn.wordpress.org/trunk@58314 602fd350-edb4-49c9-b593-d223f7449a82

See WordPress/gutenberg#59531. See WordPress/gutenberg#61182. See WordPress/gutenberg#61717. See WordPress/wordpress-develop#6590. Fixes #61256. Props wildworks, ellatrix. Built from https://develop.svn.wordpress.org/trunk@58314 git-svn-id: https://core.svn.wordpress.org/trunk@57771 1a063a9b-81f0-0310-95a4-ce76da25c4cd

See WordPress/gutenberg#59531. See WordPress/gutenberg#61182. See WordPress/gutenberg#61717. See WordPress/wordpress-develop#6590. Fixes #61256. Props wildworks, ellatrix. Built from https://develop.svn.wordpress.org/trunk@58314 git-svn-id: http://core.svn.wordpress.org/trunk@57771 1a063a9b-81f0-0310-95a4-ce76da25c4cd

This was referenced May 21, 2024

PHP backports for WP 6.6 WordPress/gutenberg#61226

Closed

Fix: Enable Text Align UI to be controlled correctly with theme.json WordPress/gutenberg#61182

Merged

Try: Add new textAlign block support WordPress/gutenberg#59531

Merged

t-hamano added 2 commits June 3, 2024 17:12

Add new textAlign block support

d6765d0

Update unit test

118c9a3

t-hamano force-pushed the 61256 branch from 3451a52 to 118c9a3 Compare June 3, 2024 08:19

ellatrix reviewed Jun 4, 2024

View reviewed changes

ellatrix approved these changes Jun 4, 2024

View reviewed changes

ellatrix closed this Jun 4, 2024

talldan mentioned this pull request Jun 4, 2024

Backport theme.json version 3 migrations #6616

Closed

ellatrix mentioned this pull request Jun 5, 2024

Backports for 6.6 Beta/RC WordPress/gutenberg#62315

Open

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add new textAlign block support #6590

Add new textAlign block support #6590

t-hamano commented May 21, 2024 •

edited

github-actions bot commented May 21, 2024 •

edited

github-actions bot commented May 21, 2024

ellatrix commented Jun 3, 2024

t-hamano commented Jun 3, 2024

ellatrix Jun 4, 2024

ellatrix Jun 4, 2024

ellatrix left a comment

Add new textAlign block support #6590

Add new textAlign block support #6590

Conversation

t-hamano commented May 21, 2024 • edited

Testing Instructions

github-actions bot commented May 21, 2024 • edited

github-actions bot commented May 21, 2024

Test using WordPress Playground

Some things to be aware of

ellatrix commented Jun 3, 2024

t-hamano commented Jun 3, 2024

ellatrix Jun 4, 2024

Choose a reason for hiding this comment

ellatrix Jun 4, 2024

Choose a reason for hiding this comment

ellatrix left a comment

Choose a reason for hiding this comment

t-hamano commented May 21, 2024 •

edited

github-actions bot commented May 21, 2024 •

edited