Post Template: Output number of columns as classname for backwards compatibility #51358
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
andrewserong
added
Backwards Compatibility
|
Size Change: -182 B (0%) Total Size: 1.39 MB
ℹ️ View Unchanged
|
|
Flaky tests detected in f57e86f. 🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/5216790413
|
There was a problem hiding this comment.
Thanks for picking this up!
I think we should avoid adding an extra classname to any block that might have this type of layout in the future.
Theme authors have an increasing amount of APIs at their disposal that allow for customising block styles without having to target dynamic classnames in their stylesheets, so I guess ideally this classname wouldn't be needed at all 😄 but given that it existed previously in the Post Template block, we should provide back compat for that block specifically.
We should be able to add some logic in Post Template itself, maybe after this condition? So other blocks aren't affected.
Would the classname also be needed in the editor? We could add it in the block's edit function too.
Ah, gotcha! Yes, great feedback — I'll refactor this so that it's applied only to the Post Template block, and not all layouts 👍 (and place the code in the Post Template block instead) |
andrewserong
changed the title
|
Done! I've moved the logic over to the post template block, and that's looking better now 🙂 |
tellthemachines
approved these changes
Jun 9, 2023
andrewserong
added
the
Backport to Gutenberg RC
|
Thanks again for the reviews and feedback! 🙇 @ndiego do you mind cherry-picking this one for 16.0, too? |
|
Thanks for the quick fix @andrewserong, I will include this in RC3 today. |
fullofcaffeine
pushed a commit
that referenced
this pull request
Jun 9, 2023
…mpatibility (#51358) * Grid Layout: Output number of columns as classname for backwards compatibility * Refactor to only apply to the post template block
ndiego
removed
the
Backport to Gutenberg RC
sethrubenstein
pushed a commit
to pewresearch/gutenberg
that referenced
this pull request
Jul 13, 2023
…mpatibility (WordPress#51358) * Grid Layout: Output number of columns as classname for backwards compatibility * Refactor to only apply to the post template block
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
Fixes #51346
Output
columns-xclassname for the post template block when the grid layout is in use and when acolumnCountvalue is set (wherexis the number of columns).Why?
As raised in #51346, this is so that themes that are currently targeting post template blocks with a certain number of columns can continue to do so.
This change is only for backwards compatibility / to ensure themes can continue to target these blocks, as the old width-based columns class styling rules (e.g. here) no longer apply for grid layouts.
How?
columns-${ columnCount }classname.gridbecause the columnCount number isn't automatically removed when switching between grid and flow layouts in the editor. Personally, I think this is desired behaviour, as it means that someone switching between values doesn't lose their old value, but it does mean we need to check forgridbefore outputting the classname (which I think is fine).Testing Instructions
columns-3classname or whichever number of columns you have setcolumns-3classname should no longer appear.columns-3classname should no longer appear there either.Screenshots or screencast