Read on Twitter
I have now been building #WordPress sites with the new(ish) block editor for quite a while.
It was a big change but is now working well.
Here are 10 lessons that I have learnt along the way that you might find useful ... [thread]
It was a big change but is now working well.
Here are 10 lessons that I have learnt along the way that you might find useful ... [thread]
1. You need far less JS skills that you think.
Sure, knowing JS deeply helps, but you can do so much without a detailed knowledge of Javascript.
Much in this thread only requires little knowledge.
Sure, knowing JS deeply helps, but you can do so much without a detailed knowledge of Javascript.
Much in this thread only requires little knowledge.
2. Block styles are awesome!
Block styles provide a nice easy UI for adding a custom class to a block.
This means you can then style it look different on the front end and provide some variation in your designs.
Block styles provide a nice easy UI for adding a custom class to a block.
This means you can then style it look different on the front end and provide some variation in your designs.
3. Use core blocks as much as possible.
With some many core blocks, most designs can be made from what we already have in core.
So, don't reinvent the wheel and use what is there when you can.
With some many core blocks, most designs can be made from what we already have in core.
So, don't reinvent the wheel and use what is there when you can.
4. InnerBlocks FTW!
InnerBlocks is the block editors way of allowing you to nest blocks inside each other.
This even works if you create custom blocks and they are certainly worth looking at.
InnerBlocks is the block editors way of allowing you to nest blocks inside each other.
This even works if you create custom blocks and they are certainly worth looking at.
5. Take advantage of block patterns.
Block patterns allow you to create a layout of blocks that a user can drop onto a page. Not only the layout is "saved" but all the settings such as classes and block styles.
This is a great way to build for example a landing page quickly.
Block patterns allow you to create a layout of blocks that a user can drop onto a page. Not only the layout is "saved" but all the settings such as classes and block styles.
This is a great way to build for example a landing page quickly.
6. Setup custom colour palettes.
Don't force you clients to enter the correct colour codes for their brand.
Setup a custom colour palette they can select from instead.
Don't force you clients to enter the correct colour codes for their brand.
Setup a custom colour palette they can select from instead.
7. Use @wp_acf for adding custom blocks.
If you don't have a deep knowledge of JS then ACF is a great way to create custom blocks in a way that you already know. https://www.advancedcustomfields.com/resources/blocks/
If you don't have a deep knowledge of JS then ACF is a great way to create custom blocks in a way that you already know. https://www.advancedcustomfields.com/resources/blocks/
8. Styling the editor is hard.
This is not something that I know a lot about, but @keithdevon reliably informs me it is tricky.
This is because markup is different and therefore simply using your frontend styles sometimes doesn't work.
This is not something that I know a lot about, but @keithdevon reliably informs me it is tricky.
This is because markup is different and therefore simply using your frontend styles sometimes doesn't work.
9. Decide whether you are supporting all blocks.
If you are then they ALL need styling to match your design.
We take a whitelist approach, allowing certain blocks. This means if new blocks are added, by core or a plugin, they are not available until we add them in and tested.
If you are then they ALL need styling to match your design.
We take a whitelist approach, allowing certain blocks. This means if new blocks are added, by core or a plugin, they are not available until we add them in and tested.
10. Use a "Just in time" CSS approach.
Something I have been experimenting with recently is loading in the styles for block directly before a block is output on the page.
Early days for this but the signs are promising.
Something I have been experimenting with recently is loading in the styles for block directly before a block is output on the page.
Early days for this but the signs are promising.
So there are my 10 lessons learned. What have you learnt about developing #WordPress sites with the block editor that I need to know?
