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

Post Title: Add padding support #43457

Merged

Conversation

ndiego
Copy link
Member

@ndiego ndiego commented Aug 21, 2022

Related:

What?

Add padding support to the Post Title block.

Why?

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

How?

Added the relevant block support in block.json

Testing Instructions

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

Screenshots or screencast

post-title-padding

@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] Post Title Affects the Post Title Block labels Aug 21, 2022
@ndiego ndiego requested a review from ajitbohra as a code owner August 21, 2022 18:41
@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 looking into these PRs, @ndiego!

One of the things I noticed when I was working on a similar PR for the Post Date block (#43406) is that I needed to add a box-sizing: border-box CSS rule in order for the padding to be consistent with other blocks that already have padding controls (e.g. Group block) while running TwentyTwentyTwo.

In the Group block's CSS, this is where the styling rule is set:

// This block has customizable padding, border-box makes that more predictable.
box-sizing: border-box;

Here's an example of the Post Title block set next to a Group block, both with the same padding value:

image

What do you think about adding the same rule for the Post Title block?

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.

+1 for the box-sizing suggestion.

Added this PR to the tracking issue 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 the update @ndiego!

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

image

LGTM! ✨

@andrewserong andrewserong merged commit 7a19f69 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] Post Title Affects the Post 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.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

4 participants