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

Add padding and margin support to the gallery block #43965

Merged
merged 1 commit into from
Sep 9, 2022

Conversation

glendaviesnz
Copy link
Contributor

@glendaviesnz glendaviesnz commented Sep 7, 2022

Related:

What?

Add padding and margin support to the Gallery block.

Why?

To create consistency across blocks.

How?

Added the relevant block supports in block.json

Testing Instructions

  1. Insert a new Gallery block.
  2. Confirm the Dimension control panel allows you to add both padding and margin.
  3. Adding padding and margin.
  4. In global styles add padding and margin to the Gallery block and check it is applied in site editor, block editor and frontend

Screenshots or screencast

gallery-margin.mp4

@glendaviesnz glendaviesnz 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 Sep 7, 2022
@glendaviesnz glendaviesnz self-assigned this Sep 7, 2022
@glendaviesnz
Copy link
Contributor Author

glendaviesnz commented Sep 7, 2022

@andrewserong I looked at adding box-sizing: border-box; to the Gallery as part of this, but it has the potential to quite radically change the size of images within the Gallery if themes are already applying padding to a Gallery, eg.

Without border-box:
Screen Shot 2022-09-08 at 10 42 03 AM

With border-box:
Screen Shot 2022-09-08 at 10 42 15 AM

I would be inclined to leave box-sizing as the default in the case of this block, what do you think?

@andrewserong
Copy link
Contributor

I would be inclined to leave box-sizing as the default in the case of this block, what do you think?

Oh, great question. I agree — I think it's good for us to treat adding these settings on a case-by-case basis. From my perspective, where it feels safe to add it in, it makes sense to, but not at the expense of backwards compatibility for existing themes.

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.

I've tested this placing the Gallery inside a group block.

2022-09-09 12 27 08

Outside the Group block (without box-sizing: border-box;), there's overflow:

Screen Shot 2022-09-09 at 12 38 45 pm

But you've already tested that. In that case LGTM

@glendaviesnz glendaviesnz merged commit af73244 into trunk Sep 9, 2022
@glendaviesnz glendaviesnz deleted the add/padding-margin-support-to-gallery branch September 9, 2022 04:53
@github-actions github-actions bot added this to the Gutenberg 14.1 milestone Sep 9, 2022
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 20, 2022
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 [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi Needs User Documentation Needs new user documentation [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants