How to Copy and Paste Styles on WordPress Gutenberg

How to Copy and Paste Styles on WordPress Gutenberg

Today we’re releasing one of the most requested feature in Stackable: Copy and Paste block styles! It works across Stackable blocks and even native blocks. Update to 2.14.0 now.

Introducing Copy and Paste Styles

The Copy Paste Styles is a premium feature that will allow you to copy the styles of one block, and paste it to another. Copy and pasting styles doesn’t overwrite your block’s content, it would only add in the styles for the block.

Pretty-self explanatory right? Yes, it’s a simple concept, but a very useful one that is!

Copy and paste styles supports multi-block selection, meaning you can highlight multiple blocks (using the shift key), then paste your copied styles on them. This also works for copying multiple styles at once.

What’s more is that you can do this across your different browser tabs and different sites. So you can copy the styles of your block in one tab, then paste them on your blocks in another tab or another site!

Copy and pasting styles is available for Stackable blocks, as well as native Gutenberg blocks.

Copy and Paste Styles of Single Blocks

To copy a block style, just select the block you want to copy the styles of. Then in the block’s toolbar, click on the Copy and Paste Styles button, then choose Copy Styles.

You can also use shortcut keys as indicated in the Copy Styles button.

To paste the block style you copied, select the block you want to paste your styles onto, then click on the Copy and Paste Styles toolbar button, but now choose Paste Styles.

While hovering over the Paste Styles button, you’ll see a preview of what the copied style looks like. This is very helpful since you can have the styles of multiple blocks copied simultaneously, and you won’t need to remember what styles you currently have in the clipboard.

Copy and Paste Styles of Multiple Blocks

One of the ways Copy and Paste Styles can greatly save you time, is with applying styles across multiple blocks.

What you can do is click on one of your blocks, hold down the shift key and the click on another block to select them all at the same time.

To paste your copied styles on these selected blocks, click on the More Options toolbar button, then select Paste Styles. It should apply your block styles to all the blocks selected.

You’re not limited to pasting to only the same block, if you have different types of blocks selected and you do a Paste Styles on them, the different styles you currently have copied for each of your blocks would be applied.

This unlocks a lot of power for your workflow, since now you can essentially replicate entire section designs into other parts of your website!

Conclusion

Aside from the Copy and Paste styles, we also have new Block Previews for every Stackable block, and we also have a number of bug fixes released in this version.

We’re very excited for you to try our new Copy and Paste Styles feature, and we hope it helps you greatly in your web design workflow.

Let us know by commenting below what you think of this new feature.

If you haven’t joined yet, please do join our Stackable Community in Facebook. We have a ton of awesome things planned for this year, and we share sneak peeks and updates with the amazing people in the Community.

0 thoughts on “How to Copy and Paste Styles on WordPress Gutenberg

  1. Hey,

    This plugin/service looks great, but I have a question…

    Is it possible in Stackable to create a full-width background colour section for post and page titles?

    The reason I ask is that in Gutenberg post titles are not blocks, so it’s impossible to customise them like an ordinary block.

    I would really like to have this feature on my site and will happily pay for the premium service if it can do it easily enough. Thanks in advance.

    1. For post and page titles, not yet. Currently those are still dependent on the theme you’re using, since Gutenberg can only adjust the contents of posts and pages.

      There are plans for Gutenberg to be able to do Full-Site Editing (FSE), once this happens then we’ll be able to do that 🙂

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.