Backport Layout block support refactor part 2 by andrewserong · Pull Request #3254 · WordPress/wordpress-develop

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.

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

+ */
+	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!

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

@@ -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 👍

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.

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

Comment threadsrc/wp-includes/block-supports/layout.php Outdated

tellthemachines mentioned this pull request Sep 16, 2022
Sync Gutenberg packages #3154
Closed

costdev approved these changes Sep 16, 2022
View reviewed changes

andrewserongand 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 d64d61dCompare 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

Comment threadsrc/wp-includes/block-supports/layout.php

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

		@@ -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">

Uh oh!

Conversation

andrewserong commented Sep 15, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

To-do

Uh oh!

andrewserong commented Sep 15, 2022

Uh oh!

costdev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

costdevSep 15, 2022

Choose a reason for hiding this comment

Uh oh!

andrewserongSep 16, 2022

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

andrewserong commented Sep 16, 2022

Uh oh!

tellthemachines left a comment

Choose a reason for hiding this comment

Uh oh!

tellthemachinesSep 16, 2022

Choose a reason for hiding this comment

Uh oh!

andrewserongSep 16, 2022• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

costdev left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

costdev left a comment

Choose a reason for hiding this comment

Uh oh!

andrewserong commented Sep 19, 2022

Uh oh!

andrewserong commented Sep 20, 2022

Uh oh!

hellofromtonya commented Sep 20, 2022

Uh oh!

costdev commented Sep 20, 2022

Test Report

Steps to Test

Expected Results

Environment

Actual Results

Supplemental Artifacts

Uh oh!

mukeshpanchal27 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

hellofromtonya commented Sep 21, 2022

Uh oh!

hellofromtonya left a comment

Choose a reason for hiding this comment

Uh oh!

hellofromtonya commented Sep 21, 2022

Uh oh!

hellofromtonya commented Sep 21, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

6 participants

andrewserong commented Sep 15, 2022•
edited
Loading

andrewserongSep 16, 2022•
edited
Loading