Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Lower the priority of the gallery gap css so it loads after the block layout css #41423

Merged
merged 1 commit into from
May 30, 2022

Conversation

glendaviesnz
Copy link
Contributor

What?

Fixes the order that the Gallery gap CSS is enqueued so it is not overwritten by layout CSS in non block themes

Why?

Currently for non-block themes the Gallery block gap CSS is being loading prior to the layout CSS, so the gap value is overwritten by the default 0.5em value

How?

Set the action priority lower in the Gallery render method. This issue is also fixed by #41015, but this smaller change may be easier to backport to 6.0.1?

Testing Instructions

  • In a non-block theme, add a custom CSS var or --wp--style--gallery-gap-default: 37px;
  • Add a Gallery and check in the frontend that the gap is set to 37px
  • Also try and block theme and make sure gap still works as expected

Screenshots

Before:
Screen Shot 2022-05-30 at 1 24 11 PM

After:
Screen Shot 2022-05-30 at 1 23 28 PM

@glendaviesnz glendaviesnz added [Type] Bug An existing feature does not function as intended [Block] Gallery Affects the Gallery Block - used to display groups of images Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release labels May 30, 2022
@glendaviesnz glendaviesnz requested a review from geriux as a code owner May 30, 2022 01:33
@glendaviesnz glendaviesnz self-assigned this May 30, 2022
Copy link
Contributor

@andrewserong andrewserong left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good idea @glendaviesnz, this looks like a simple way to fix the issue in the short-term to me!

✅ The gallery block spacing feature still appears to work correctly in the post and site editors with a block theme.
✅ In a classic theme, adding in a rule like :root { --wp--style--gallery-gap-default: 46px; } in the frontend and editor CSS allowed for overriding the gallery gap's default 0.5em on the site frontend and within the editor.

Before After
image image

LGTM!

Copy link
Member

@ramonjd ramonjd left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What @andrewserong said 😄

Tested in block/classic themes the latter by adding --wp--style--gallery-gap-default + value to the :root selector in frontend and editor stylesheets.

Tested on 2021, 2020 and 2022 WordPress themes.

@glendaviesnz glendaviesnz merged commit c489e26 into trunk May 30, 2022
@glendaviesnz glendaviesnz deleted the fix/gallery-css-gap-order-bug branch May 30, 2022 03:49
@github-actions github-actions bot added this to the Gutenberg 13.4 milestone May 30, 2022
youknowriad pushed a commit that referenced this pull request Jun 3, 2022
@adamziel adamziel added the Needs PHP backport Needs PHP backport to Core label Jun 21, 2022
@adamziel
Copy link
Contributor

I just cherry-picked this PR to the wp/6.0 branch to get it included in the next release: 10f347a

adamziel pushed a commit that referenced this pull request Jun 21, 2022
@adamziel adamziel removed the Backport to WP Minor Release Pull request that needs to be backported to a WordPress minor release label Jun 21, 2022
@adamziel
Copy link
Contributor

adamziel commented Jun 21, 2022

@glendaviesnz this PR contains PHP changes that need a matching PR in the https://github.com/WordPress/wordpress-develop repository to be included in WordPress 6.0.1. Would you please create such a PR? CC @SergeyBiryukov

@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Jun 21, 2022

@adamziel WordPress/wordpress-develop#2839 - I assume we branch of 6.0 for this, but let me know if this was the wrong assumption and I will redo the PR

@adamziel adamziel removed the Needs PHP backport Needs PHP backport to Core label Jun 22, 2022
@adamziel
Copy link
Contributor

@glendaviesnz I just commented on the other PR, we're good!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Gallery Affects the Gallery Block - used to display groups of images [Type] Bug An existing feature does not function as intended
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

4 participants