Backport Layout block support refactor part 2 #3254

andrewserong · 2022-09-15T00:46:33Z

This PR is a follow-up to #3205 and backports the remaining parts of the layout block support.

Note: the updates to the server test fixtures are all expected changes — the updates to the Layout support are that we now also output semantic classnames for the layout types (e.g. is-layout-floworis-layout-flex). Also, the wp-container-xxx` classname will no longer be output for many blocks that use the default layout settings.

To-do

~~Backport tests~~
~~Ensure it's working on top of Backport script loader: enqueue stored block supports styles #3218~~

To confirm that it's working, you can manually copy the changes from #3218 on top of this PR, and in the rendered view of TwentyTwentyTwo theme, the space between styling of the row block should be output correctly as in the screenshot below (note the highlighted layout classnames that have been added there, too is-layout-flex, etc):

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

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.

andrewserong · 2022-09-15T05:19:24Z

@tellthemachines I believe this one is working correctly — it just depends on #3218 in order for the generated styles to be output.

costdev

Thanks for handling this PR @andrewserong! I've left some thoughts below.

src/wp-includes/block-supports/layout.php

tests/phpunit/tests/block-supports/layout.php

costdev · 2022-09-15T10:26:48Z

tests/phpunit/tests/block-supports/layout.php

+	 */
+	public function data_wp_get_layout_style() {
+		return array(
+			'should_return_empty_value_with_no_args'       => array(


See this comment on another PR.

I've updated the wording for each of these, thanks!

src/wp-includes/block-supports/layout.php

tests/phpunit/tests/block-supports/layout.php

andrewserong · 2022-09-16T04:01:23Z

Thanks for all the feedback @costdev! I believe I've implemented it all, so this should be ready for another look now 🙂

tellthemachines

Code looks good! In testing all the correct styles and classnames are output on the front end.

I also tested with the #3154 patch applied, and everything worked correctly in the post editor (minus some PHP warnings that are not related to this PR). I wasn't able to test the site editor because it doesn't load at all once #3154 is applied. It's likely that those packages are dependent on another PHP backport 🤔

tellthemachines · 2022-09-16T04:36:16Z

tests/phpunit/data/blocks/fixtures/core__columns__deprecated.server.html

@@ -1,5 +1,5 @@

-<div class="wp-container-1 wp-block-columns has-3-columns">
+<div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">


Does this keep wp-container-1 because it has non-default flex settings?

Yes, columns set nowrap so it has a non-default setting from the perspective of the flex Layout type. Thanks for double-checking!

costdev

Thanks @andrewserong! Just one suggestion left from me then LGTM 👍

src/wp-includes/block-supports/layout.php

costdev

LGTM 👍 Thanks for all the work on this @andrewserong!

andrewserong · 2022-09-19T23:56:01Z

Alrighty, now that #3273 has landed, it looks like this one should be good to commit now CC: @ockham

Co-authored-by: Colin Stewart <79332690+costdev@users.noreply.github.com>

andrewserong · 2022-09-20T01:21:48Z

I've given this a rebase, and confirmed that it's still working correctly on top of trunk 👍

hellofromtonya · 2022-09-20T21:26:03Z

I'm self-assigning for review and commit.

costdev · 2022-09-20T23:07:23Z

Test Report

Steps to Test

Apply the PR.
Activate the Twenty Twenty-Two theme. Ensure that there are no header customizations in the Site Editor.
Navigate to the frontend.
Inspect the header row.

Expected Results

✅ The element should now have the .is-layout-flex class.
✅ The styling should match that shown in the screenshot in the PR's description.

Environment

Server: Apache (Linux)
WordPress: 6.1-alpha-53344-src
Browser: Chrome 105.0.0.0
OS: Windows 10
Theme: Twenty Twenty-Two
Plugins: None activated.

Actual Results

✅ The element has the .is-layout-flex class.
✅ The styling matches that shown in the screenshot in the PR description.

Supplemental Artifacts

mukeshpanchal27

Thanks @andrewserong LGTM. Left one minor change.

src/wp-includes/block-supports/layout.php

Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>

hellofromtonya · 2022-09-21T10:53:07Z

For this backport, I'll be reverting the DocBlock changes for wp_get_layout_style(). Why?

They were not part of the backports from Gutenberg's PR 40875 Layout: Use semantic classnames, centralize layout definitions, reduce duplication, and fix blockGap in theme.json gutenberg#40875.
And they were introduced in 5.9.

Instead, I'll do a follow-up coding standards commit to improve the DocBlock including updating the descriptions for the optional parameters (e.g. adding the word Optional. and adding the default Default is null.).

* Reverts changes not found in Gutenberg PR 40875 * Updates changes from Gutenberg PR 40875 for coding standards WordPress/gutenberg#40875

hellofromtonya

Changes in this PR meet Core's coding standards ✅
Other changes not found in the original GB PR have been removed (follow-up commit coming) ✅
Per testing instructions, confirmed works ✅
PHP 8.1 and 8.2 tests do not show any additional deprecation issues ✅

There are additional tweaks that could be done. However, to retain a more pure backport, those will be addressed in follow-up patch(es)/ commit(s).

This is ready for commit. Prepping commit now.

hellofromtonya · 2022-09-21T13:02:37Z

Committed via changeset https://core.trac.wordpress.org/changeset/54274. Thank you everyone for your contributions!

A follow-up commit is coming to address other changes that were not part of the original GB PR (such as DocBlock improvements).

hellofromtonya · 2022-09-21T13:41:09Z

DocBlock improvements suggestioned in this PR were committed via changeset https://core.trac.wordpress.org/changeset/54275.

andrewserong marked this pull request as ready for review September 15, 2022 05:17

andrewserong mentioned this pull request Sep 15, 2022

Plugin: Backport PHP changes for WordPress 6.1 release WordPress/gutenberg#43440

Closed

37 tasks

costdev requested changes Sep 15, 2022

View reviewed changes

tellthemachines approved these changes Sep 16, 2022

View reviewed changes

costdev requested changes Sep 16, 2022

View reviewed changes

src/wp-includes/block-supports/layout.php Outdated Show resolved Hide resolved

tellthemachines mentioned this pull request Sep 16, 2022

Sync Gutenberg packages #3154

Closed

costdev approved these changes Sep 16, 2022

View reviewed changes

andrewserong and others added 11 commits September 20, 2022 10:57

Backport Layou block support refactor part 2

7761f11

Add tests

7a1b5d4

Update test fixtures with new classnames

a7904b4

Fix Layout tests

c5dd3dc

Add code quality updates based on feedback

145a9c2

Fix whitespace linting issue

0007932

Try to fix odd linting issue

dcebfae

Revert prior change to linting

8fe0766

Re-fix linting

ef94265

Split call to wp_get_layout_style onto multiple lines

2a6a882

Co-authored-by: Colin Stewart <79332690+costdev@users.noreply.github.com>

Empty commit to restart CI

d64d61d

andrewserong force-pushed the try/backport-layout-block-support-refactor-part-2 branch from 18118b2 to d64d61d Compare September 20, 2022 01:00

audrasjb assigned audrasjb and unassigned audrasjb Sep 20, 2022

hellofromtonya self-assigned this Sep 20, 2022

mukeshpanchal27 reviewed Sep 21, 2022

View reviewed changes

src/wp-includes/block-supports/layout.php Show resolved Hide resolved

return mention improvement

0099959

Co-authored-by: Mukesh Panchal <mukeshpanchal27@users.noreply.github.com>

hellofromtonya added 2 commits September 21, 2022 06:10

Update wp_get_layout_style() DocBlock

ad32baa

* Reverts changes not found in Gutenberg PR 40875 * Updates changes from Gutenberg PR 40875 for coding standards WordPress/gutenberg#40875

Move tests to separate file

5371947

hellofromtonya approved these changes Sep 21, 2022

View reviewed changes

hellofromtonya closed this Sep 21, 2022

andrewserong mentioned this pull request Oct 4, 2022

Layout: backport code quality changes from core to Gutenberg WordPress/gutenberg#44661

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Backport Layout block support refactor part 2 #3254

Backport Layout block support refactor part 2 #3254

andrewserong commented Sep 15, 2022 •

edited

andrewserong commented Sep 15, 2022

costdev left a comment

costdev Sep 15, 2022

andrewserong Sep 16, 2022

andrewserong commented Sep 16, 2022

tellthemachines left a comment

tellthemachines Sep 16, 2022

andrewserong Sep 16, 2022 •

edited

costdev left a comment

costdev left a comment

andrewserong commented Sep 19, 2022

andrewserong commented Sep 20, 2022

hellofromtonya commented Sep 20, 2022

costdev commented Sep 20, 2022

mukeshpanchal27 left a comment

hellofromtonya commented Sep 21, 2022

hellofromtonya left a comment

hellofromtonya commented Sep 21, 2022

hellofromtonya commented Sep 21, 2022

		@@ -1,5 +1,5 @@

		<div class="wp-container-1 wp-block-columns has-3-columns">
		<div class="is-layout-flex wp-container-1 wp-block-columns has-3-columns">

Backport Layout block support refactor part 2 #3254

Backport Layout block support refactor part 2 #3254

Conversation

andrewserong commented Sep 15, 2022 • edited

To-do

andrewserong commented Sep 15, 2022

costdev left a comment

Choose a reason for hiding this comment

costdev Sep 15, 2022

Choose a reason for hiding this comment

andrewserong Sep 16, 2022

Choose a reason for hiding this comment

andrewserong commented Sep 16, 2022

tellthemachines left a comment

Choose a reason for hiding this comment

tellthemachines Sep 16, 2022

Choose a reason for hiding this comment

andrewserong Sep 16, 2022 • edited

Choose a reason for hiding this comment

costdev left a comment

Choose a reason for hiding this comment

costdev left a comment

Choose a reason for hiding this comment

andrewserong commented Sep 19, 2022

andrewserong commented Sep 20, 2022

hellofromtonya commented Sep 20, 2022

costdev commented Sep 20, 2022

Test Report

Steps to Test

Expected Results

Environment

Actual Results

Supplemental Artifacts

mukeshpanchal27 left a comment

Choose a reason for hiding this comment

hellofromtonya commented Sep 21, 2022

hellofromtonya left a comment

Choose a reason for hiding this comment

hellofromtonya commented Sep 21, 2022

hellofromtonya commented Sep 21, 2022

andrewserong commented Sep 15, 2022 •

edited

andrewserong Sep 16, 2022 •

edited