Gallery block: Add css var to enable theme authors to set a default gallery gap #40008
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
glendaviesnz
added
[Status] In Progress
|
Size Change: +56 B (0%) Total Size: 1.22 MB
ℹ️ View Unchanged
|
|
@justintadlock - it looks like with a minor change to the way the block gap is being applied we can add a fallback to a css var. I am not sure if it is worth supporting both indefinitely. I wonder if we are better to make a clean switch to |
glendaviesnz
removed
the
[Status] In Progress
andrewserong
approved these changes
Apr 4, 2022
There was a problem hiding this comment.
This looks like a good path forward to me @glendaviesnz (tested that it appears to be using fallbacks correctly in the editor and on the frontend)! Nice idea incorporating the deprecated CSS variable. Just left a couple of minor comments about skipping serialization and the order of the CSS variables, but no real blockers there I don't think 🙂
added 2 commits
April 4, 2022 17:07
This all looks pretty good. I was definitely having trouble finding a way to set a default via CSS without a var. Theme authors should be able to provide compat for WP 5.9 and 6.0+ with something like this now: .wp-block-gallery {
--gallery-block--gutter-size: var( --wp--custom--spacing--4 );
--wp--style--gallery-gap-default: var( --wp--custom--spacing--4 );
}As for removal of the |
|
Thanks for taking the time to test this out @justintadlock - and for raising the concern in the first place - good to get this sorted ahead of 6.0.
Sounds like a good approach, let's go with that. |
glendaviesnz
added
the
Needs Dev Note
ramonjd
approved these changes
Apr 4, 2022
37 tasks
3 tasks
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?
Adds back support for the deprecated
--gallery-block--gutter-sizecss var, and also support for a new--wp--style--gallery-gap-defaultcss var to allow theme authors to define a default gallery gap that can be overridden by any user applied gap.Why?
As noted here the recent change to add gap support was a breaking change for some themes as it removed the
--gallery-block--gutter-sizeand did not provide an alternative way for themes to define a default gap setting.How?
Disables the default serialization of the layout to allow it to be manually applied by the Gallery block allowing for fallbacks to any theme set css vars
Testing Instructions
Screenshots
Before:
After:
