Photo by Alexandr Podvalny on Pexels.com

Expanded Button Formatting, New Spacing Controls, and Drag-and-Drop for List View Now in Block Editor

This month, our team released features in the block editor that give your site a little breathing room: spacing controls for buttons and paragraphs. And the List View tool keeps getting better with drag-and-drop.

Powerful Expanded Button Formatting

Buttons never looked so good with custom padding.

Padding is empty space within the border of a block, which can bring clarity to your content and adjust the balance of the page’s layout.

Custom control over a button’s spacing, color, and aggressiveness of the corner radii — all within the visual editor — can elevate it as a powerful design element of your website.

Make a punchy set of buttons themed in your brand’s colors or place an effective Call to Action button to attract your visitors.

To try, add a button with the Buttons block, and in the block’s menu go to the Dimensions section and select Padding. Adjust the padding uniformly around the button by changing the one value. If you click the unlink icon, you can adjust the four sides independently. Experiment with changing the Border and Color as well. To quickly create a grid of similar buttons, select the Options icon (…) in the toolbar above the block in your post editor and select Duplicate.

New Spacing Controls

Manually adjust the padding of other blocks as well, like a Paragraph block.

Custom-indent an entire section of text or generously pad a small amount of text for a big effect.

Experiment by wrapping a couple paragraphs with a Group block. Select the Group block and in the block’s menu go to the Dimensions section and select Padding. You can adjust the padding in this block just as you did with the button.

Drag-and-Drop for Persistent List View

We mentioned updates to the List View in June and July.

Accessible in the top-left menu of your post editor, the List View is the table of contents of all the blocks used in your post — select the diagonal hamburger icon to open this list. For deeply nested layouts, you can expand and collapse certain sections of this list, making navigation more efficient.

Now, with drag-and-drop functionality, you can reposition blocks within your post. Drag-and-drop a block within the list to reposition it, but if you prefer to organize visually, you can also drag the block’s label from the list into the post editor. List View is more powerful than ever to reorganize a post.

Keep Building, Keep Exploring

Your feedback is crucial to expanding the block editor’s capabilities, so keep it coming. Watch here for more updates, and in the meantime, go forth and create!


Missing out on the latest WordPress.com developments? Enter your email below to receive future announcements direct to your inbox. An email confirmation will be sent before you will start receiving notifications - please check your spam folder if you don't receive this.

Join 87,000,761 other followers

5 Comments

Comments are closed.

  1. Jenna Breunig

    Ooh, these look fun! I love playing with options, and it’ll be fun to play with it right in the editor instead of messing around with custom CSS.

    Liked by 23 people

  2. Joe

    “Manually adjust the padding of other blocks as well, like a Paragraph block.”

    Not seeing this (specifically with the Paragraph block) at my WP.com business site. Too soon?

    Liked by 8 people

    • Seth McLellan

      Correct, you can’t currently add this padding on just the paragraph block. Try “wrapping” the paragraph block with a group bloc and select the group block to make the padding adjustments.

      Liked by 12 people

Create your new blog or website for free

Get Started

%d bloggers like this: