Using Block Patterns with Material Design for WordPress
You can learn more about the Material Design for WordPress plugin in this blog post.
With the 0.3.0 update to the Material Design for WordPress plugin, you can now use Block Patterns to compose beautiful layouts and reusable sections.
What are Block Patterns?
Block Patterns are new components in WordPress that allow you to quickly build with templates for common layouts.
You can combine blocks to create complex and beautiful pages.
How to add a Block Pattern
Using the Gutenberg WordPress Editor, you can add a new block pattern using the add icon on the toolbar, or from the editor.
Selecting the “Patterns” tab and choosing “Material Design” in the dropdown will filter all the new Material Block Patterns.
You can select or drag a pattern from the list to the editor and start to customize the content.
Templates will automatically include placeholder text where necessary, which you can replace with your own content.
Theming
Start by changing the starter style in the customizer (wp-admin > Appearance > Customize > Material Design Options).
Now navigate to any page and start editing in the Gutenberg editor.
With the Crane theme active all the Material Block Patterns will show a preview of the correct theme.
By adding a block pattern to the page you can start to edit any component that makes up the pattern just like Material Blocks.
Both Material Block Patterns and Material Blocks can be themed and customized to the design of your choice.
There are a lot of patterns to choose from. Here’s a full list:
- Call to action
- Call to action + benefit
- Contact form
- Features + CTA
- Numbers
- Hero section
- Hero section + image
- Latest posts
- Highlights
- Feature list
- Logos
- Media grid
- Single feature
- Single feature extended
- Pricing
- If you have an idea for a new block pattern you can discuss it on the Github repo!