In our earlier article, we have explained about using block library in WordPress. As we hinted in that article, Gutenberg is the future of WordPress and you will get a complete package within WordPress platform for building wonderful page layouts. WordPress community recently introduced openverse a free stock image platform by merging Creative Commons with WordPress.org site. And the latest is the copy paste block patterns that you can simply copy and paste in your site and use as per your need. In this article, we will explain how to get copy paste block patterns for WordPress from WordPress.org patterns section.
Reusing Gutenberg Blocks
Reusability is one of the biggest advantages of Gutenberg block editor. Below are the ways to reuse a block within your site.
- You can add any block as a reusable block and use within your site to save plenty of time in designing.
- Use one of the block plugins offers out of the box design patterns that you can use after installing the plugin in your site.
- It is possible to duplicate a single or selected blocks from the block options.
- You can copy the entire post content and paste in another post in the same or different site.
- Insert the patterns right inside the Gutenberg block editor like any other blocks.
Though you can copy paste blocks and page content from one site to another, it is a hassle to design a good looking pattern in first place.
Block Patterns in Gutenberg Editor
As mentioned above, you can click on the + icon available on the top left corner of the Gutenberg editor that shows “Toggle block inserter”. From here, you can go to “Patterns” section and choose the type your want from the dropdown. There are patterns available for buttons, headers, columns, gallery, text and query. Simply click on the pattern you like and start modifying it without own content.
Public Block Patterns in WordPress.org
WordPress community moved all the patterns available within Gutenberg editor to a new section in WordPress.org website. This is a patterns repository similar to plugins, themes and stock images repository. You have the following advantages with WordPress patterns available in public repository.
- Copy the block pattern you like and paste on any WordPress post or page using Gutenberg editor.
- You no more need to create a reusable block, anytime go to WordPress.org patterns section and copy the content.
- You can also submit your pattern in the repository and after approval it will be available for public use.
- When developers submitting their content, the repository will grow in size and you can get any type of blocks for your site without the need of complicated page builder plugins.
- It will also eliminate the need of using plugins for minor purposes like inserting a call out or testimonial section.
- You can login to WordPress.org account and add block patterns as favorites to create your collection of frequently used blocks.
- Search or filter to find the blocks quickly.
In summary, successful block patterns can reduce the use of other plugins which is a good news for those focusing on improving page speed as well good looking layouts with Gutenberg editor.
Copy Paste Block Patterns
Follow the below instructions to copy paste block patterns from WordPress.org site.
- Go to WordPress.org patterns section where you will find hundreds of block patterns.
- Use the search option or filter based on category to find your favorite block pattern. Let’s explain here with inserting a call block with slanted background with a text and button.
- Scroll down to find the block and hover on the block.
- Click the “Copy” button the appears to copy the block pattern.
- You will see the button changed to “Copied” indicating the content is copied in the clipboard.
- If you want to see the live preview before copying the content, then click on the block pattern.
- On the next screen, you can select the width of the block as fullwidth, default, medium or narrow. Alternatively, you can also drag one of the right or left edge and adjust the width.
- Click “Copy Pattern” button to copy the block pattern to clipboard. You can click “Learn More” button to view the online instructions on how to insert the copied block pattern in your site.
Now that you have copied the content, go to the post where you want to insert the block. Make sure to position the cursor inside the paragraph block and press “Control + V” keys in Windows PC. If you are using Mac, then press “Command + V” keys to paste the content. You will see the block pattern is now pasted in your post like you saw in WordPress.org patterns site. In our example, below is the live call out section that we have copied and pasted from WordPress.org site.
Art & Beauté
Writing that influences modern culture
Below is another featured block that we have copied and pasted from WordPress.org patterns.
Copper wire, wood base. I created this piece in late 2008. For this work, I aimed to convey both the industrial heaviness of an airplane, but also the cloudlike floating quality you feel when you’re in one.
Further Steps in Using Block Patterns
After pasting, you do not need to settle with the default block pattern’s design. You are free to modify the options of the block like any other block by changing the color, font size and other elements. For example, we have modified the above call out example block pattern that we have copied from the patterns section. The final block looks like below by changing the gradient background direction and set minimum height for the cover bloc.
Art & Beauté
Writing that influences modern culture
Points to Note
Remember the following when using copy paste block patterns from WordPress.org site.
- You can convert the customized blocks as reusable block patterns and use anywhere on your site.
- Whenever you change the theme, all block patterns will remain as they are as long as you do not deactivate Gutenberg block editor on your site.
- Some individual blocks on the pattern may not work as shown in the demo due to your theme’s CSS. For example, hyperlink colors, fullwidth/wide width blocks, font size, font family, etc. will change depending upon the settings you use on your theme. You may need to adjust the block pattern accordingly to align the content and fit on your site’s layout.
As you can see, it takes hardly few minutes to create a beautiful call out block without any additional shortcode or plugin. Beauty is that you can submit your customized block to the WordPress block patterns repository and many others can benefit from that. You can expect, plenty of copy paste block patterns will be available soon for users which will make the use of page builder plugins obsolete.