Gallery block: Add css var to enable theme authors to set a default gallery gap#40008
Merged
glendaviesnz merged 4 commits intotrunkfrom Apr 4, 2022
Merged
Gallery block: Add css var to enable theme authors to set a default gallery gap#40008glendaviesnz merged 4 commits intotrunkfrom
glendaviesnz merged 4 commits intotrunkfrom
Conversation
|
Size Change: +56 B (0%) Total Size: 1.22 MB
ℹ️ View Unchanged
|
Contributor
Author
|
@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 |
andrewserong
approved these changes
Apr 4, 2022
Contributor
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
Contributor
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 |
Contributor
Author
|
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. |
ramonjd
approved these changes
Apr 4, 2022
Member
ramonjd
left a comment
There was a problem hiding this comment.
I'm not 100% across the context, but this is working as advertised for me in the editor and on the frontend.
With --gallery-block--gutter-size set
With --wp--style--gallery-gap-default set
With both vars set
37 tasks
3 tasks
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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:
