Skip to content

Gallery: Opt-in to axial (column/row) block spacing controls#41175

Merged
andrewserong merged 1 commit intotrunkfrom
add/axial-gap-controls-to-gallery-block
May 23, 2022
Merged

Gallery: Opt-in to axial (column/row) block spacing controls#41175
andrewserong merged 1 commit intotrunkfrom
add/axial-gap-controls-to-gallery-block

Conversation

@andrewserong
Copy link
Copy Markdown
Contributor

@andrewserong andrewserong commented May 19, 2022

What?

Fixes: #41174

This PR opts-in to separate column / row (or horizontal / vertical) controls for the spacing between images in the Gallery block. This unlocks layouts like the following, where depending on the design, folks might like to have a different horizontal versus vertical gap between images:

image

Why?

In #41125 we added in the technical capability for the gallery block to support split horizontal / vertical values. That PR was merged primarily as a bug fix — this PR now opts-in to the controls so that the feature is available in the UI.

How?

  • Opt the Gallery block in to split horizontal / vertical controls in the block.json file.

Testing Instructions

  1. In a theme that opts-in to spacing.blockGap, go to add a gallery block and add a few images.
  2. In the Dimensions controls, set the grouped block spacing to a value and make sure it works.
  3. Click the button to Unlink sides.
  4. Adjust the vertical and horizontal values and ensure that the spacing looks correct in the editor and on the front end of the site.

Screenshots or screencast

2022-05-20 09 41 48

@andrewserong andrewserong added [Type] Enhancement A suggestion for improvement. [Block] Gallery Affects the Gallery Block - used to display groups of images [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi labels May 19, 2022
@andrewserong andrewserong self-assigned this May 19, 2022
@andrewserong andrewserong marked this pull request as ready for review May 19, 2022 23:54
@andrewserong andrewserong requested a review from geriux as a code owner May 19, 2022 23:54
This was referenced May 19, 2022
Closed
Merged
@ramonjd
Copy link
Copy Markdown
Member

ramonjd commented May 20, 2022

This is working well for block themes 🎉 in both the editor and the frontend

2022-05-20 10 43 35

For classic themes I'm seeing that the layout gap default value is overwriting the gap value:

Screen Shot 2022-05-20 at 10 46 11 am

Where have we see that before 😄 ?

In classic themes I'm seeing this in the footer:

		<style> .wp-block-gallery-2{ --wp--style--unstable-gallery-gap: 154px; gap: 208px 154px}</style><style>.wp-container-3 {display: flex;gap: 0.5em;flex-wrap: wrap;align-items: center;}.wp-container-3 > * { margin: 0; }</style>

For block themes, the layout styles are in the header, but the gallery gap css is in the footer, so it overwrites gap.

Maybe something to test further in #41015 too @glendaviesnz

@ramonjd
Copy link
Copy Markdown
Member

ramonjd commented May 20, 2022

Oh, I forgot to ask whether it matters since classic themes might not opt-in to blockGap in general anyway?

Might affect copy/pasted block content though.

@andrewserong
Copy link
Copy Markdown
Contributor Author

andrewserong commented May 20, 2022

Thanks for testing!

Oh, I forgot to ask whether it matters since classic themes might not opt-in to blockGap in general anyway?

I think I'd lean toward it not really mattering too much for classic themes because they can't opt-in to blockGap. But yes, probably something to look closer at in testing #41015.

@glendaviesnz
Copy link
Copy Markdown
Contributor

glendaviesnz commented May 20, 2022

Oh, I forgot to ask whether it matters since classic themes might not opt-in to blockGap in general anyway?

This is the same on trunk at the moment, ie. if you add a gallery to a block theme and set the gap, then switch to a non-block theme, the gap on frontend reverts back to the 0.5em gap default ... so I don't think we need to worry about it as part of this PR.

@glendaviesnz
Copy link
Copy Markdown
Contributor

glendaviesnz commented May 20, 2022

I wonder if there are any implications with --wp--style--gallery-gap-default which was added with the intention of allowing themes to set default to something other than 0.5em. It will break the column width calculations if it was set to column and row values. I don't think it needs to affect this PR, and I wonder if theme.json would be the way to set default row and column values, rather than trying to extend the usage of that css var?

@andrewserong
Copy link
Copy Markdown
Contributor Author

andrewserong commented May 20, 2022 •
edited
Loading

I wonder if theme.json would be the way to set default row and column values

In the longer-term, ideally yes, it'd be great to be able to set default values there (particularly when we come up with a solution for #39789 where we could do it at the gallery level within theme.json). Semi-related: there's also an open issue to look at supporting shorthand values in padding in global styles (#40132). If we wind up implementing that, we could do it for blockGap, too.

glendaviesnz
glendaviesnz approved these changes May 20, 2022
View reviewed changes
Copy link
Copy Markdown
Contributor

@glendaviesnz glendaviesnz left a comment

Choose a reason for hiding this comment

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

Tested well for me. Worked as expected for block themes, and non-block themes continued to fall back to the gap default.

@andrewserong
Copy link
Copy Markdown
Contributor Author

andrewserong commented May 20, 2022

Thanks Glen! Since it's nearly the end of the week for me, just to be safe, I'll leave this open until Monday and merge then if there aren't any objections.

@andrewserong andrewserong merged commit 8e44ad4 into trunk May 23, 2022
@andrewserong andrewserong deleted the add/axial-gap-controls-to-gallery-block branch May 23, 2022 00:12
@github-actions github-actions bot added this to the Gutenberg 13.4 milestone May 23, 2022
westonruter added a commit that referenced this pull request May 23, 2022
@westonruter
Merge branch 'trunk' of github.com:WordPress/gutenberg into fix/env-w…
460027e 
…p-tests-config

* 'trunk' of github.com:WordPress/gutenberg: (88 commits)
  Components: refactor `AlignmentMatrixControl` to pass `exhaustive-deps` (#41167)
  [RNMobile] Add 'Insert from URL' option to Image block (#40334)
  [RNMobile] Improvements to Getting Started Guides (#40964)
  Post Author Name: Add to and from Post Author transformations (#41151)
  CheckboxControl: Add unit tests (#41165)
  Improve inline documentation (#41209)
  Mobile Release v1.76.1 (#41196)
  Use explicit type definitions for entity configuration (#40995)
  Scripts: Convert file extension to js in `block.json` during build (#41068)
  Reflects revert in 6446878 (#41221)
  get_style_nodes should be compatible with parent method. (#41217)
  Gallery: Opt-in to axial (column/row) block spacing controls (#41175)
  Table of Contents block: convert line breaks to spaces in headings. (#41206)
  Add support for button elements to theme.json (#40260)
  Global Styles: Load block CSS conditionally (#41160)
  Update URL (#41188)
  Improve autocompleter performance (#41197)
  Site Editor: Set min-width for styles preview (#41198)
  Remove Navigation Editor screen from experiments page (#40878)
  Fix broken Page title for pages created inline within in Nav block (#41063)
  ...
@bph bph added the Needs Dev Note Requires a developer note for a major WordPress release cycle label Jun 8, 2022
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 2, 2022
@femkreations femkreations mentioned this pull request Sep 25, 2022
Closed
19 tasks
@bph bph mentioned this pull request Oct 3, 2022
Closed
89 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@glendaviesnz glendaviesnz glendaviesnz approved these changes

@geriux geriux Awaiting requested review from geriux

Assignees

@andrewserong andrewserong

Labels

[Block] Gallery Affects the Gallery Block - used to display groups of images [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs Dev Note Requires a developer note for a major WordPress release cycle Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.

Projects

None yet

Milestone

Gutenberg 13.4

Development

Successfully merging this pull request may close these issues.

Gallery block: allow setting separate row and column gap

5 participants

@andrewserong @ramonjd @glendaviesnz @bph @femkreations