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

Query Title: Add padding support #43458

Merged

Conversation

ndiego
Copy link
Member

@ndiego ndiego commented Aug 21, 2022

Related:

What?

Add padding support to the Query Title block.

Why?

To create consistency across blocks. This also allows users to override padding applied to Query Title blocks when there is a background color.

How?

Added the relevant block support in block.json

Testing Instructions

  1. Insert a new Query Title block.
  2. Confirm the Dimension control panel allows you to add padding.
  3. Adding padding and configure.

Screenshots or screencast

query-title-padding

(Note the padding visualizers are a bit wonky still in the Site Editor, but I don't think that should hold up this PR)

@ndiego ndiego added [Type] Enhancement A suggestion for improvement. [Feature] Design Tools Tools that impact the appearance of blocks both to expand the number of tools and improve the experi [Block] Query Title Affects the Query Title Block labels Aug 21, 2022
@ndiego ndiego requested a review from ajitbohra as a code owner August 21, 2022 18:49
@ndiego ndiego self-assigned this Aug 21, 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.

Thanks for updating this one @ndiego! I ran into the same issue as in the Post Title PR (#43457) where I think we might need to add in box-sizing: border-box in order for the padding to be consistent with adjacent blocks that have padding, like the Group block:

image

There's an example in the Post Date block PR (#43406), but it looks like for Query Title, that there isn't yet a styles.scss file. The block does output a wp-block-query-title classname in the editor and when rendered on the server, so we should be able to use a similar change as in #43406, if that looks good to you?

Copy link
Contributor

@aaronrobertshaw aaronrobertshaw left a comment

Choose a reason for hiding this comment

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

Another +1 for the box-sizing suggestion.

Added this PR to the dimensions design tools tracking also.

@ndiego
Copy link
Member Author

ndiego commented Aug 22, 2022

I'll get box-sizing taken care of today.

@ndiego
Copy link
Member Author

ndiego commented Aug 22, 2022

@andrewserong added box-sizing. This required adding a stylesheet. When adding, I noticed an editor stylesheet declared in block.json, but there actually isn't one for this block. Therefore, I removed that as well.

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.

Thanks for updating @ndiego!

✅ Padding is working as expected in the post editor now
✅ Padding is working as expected in the site editor and set in global styles

image

LGTM! ✨

@andrewserong andrewserong merged commit cb3130b into WordPress:trunk Aug 23, 2022
@github-actions github-actions bot added this to the Gutenberg 14.0 milestone Aug 23, 2022
@femkreations femkreations added the Needs User Documentation Needs new user documentation label Sep 4, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Block] Query Title Affects the Query Title Block [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.
4 participants