In my attempt to learn more about developing with the WordPress block editor I watched a video recently with Bill Erickson where he discusses his approach to building themes. If you have some time, check it out. If not, I made some notes on things that stood out to me below. At the very least you should check out his blog as it’s a great resource.
Design Approach
- His agency has shifted to an atomic design approach. This pairs well with the block editor.
- If you design unique page layouts where every page is different then it’s more difficult to use the block editor.
- Design and dev work together to make sure designs are more easily developed.
Using Default Blocks
- Use as many native blocks as possible.
- Rarely disables blocks unless they create a custom block that improves/changes that functionality.
- Doesn’t use the columns block. Too much control and difficult to use.
Custom Blocks
- Uses Advanced Custom Fields to create custom blocks.
- He doesn’t use React to build custom blocks.
- Uses preview mode for ACF blocks unless it’s a complicated field, like a repeater, uses the auto mode instead. (A parameter for ACF blocks.)
Styling Blocks
- Minimizes the undoing of block editor styles.
- Leaves the block editor stylesheet to future-proof (as this CSS is updated with WP updates) and adds CSS overrides if needed.
- Uses SASS which makes it easier to handle CSS for both front end and editor style sheets.
- Tip: Adds pseudo-element to remove click functionality within the editor. This helps when the user wants to select the block and not click the link.
Block Styles & Patterns
- Removes the block styles that WP adds and adds his own (in JS).
- Hasn’t used block patterns much, but could be a good idea for page layouts.
Custom Post Types vs. Pages
- Post types still serve a role, but less of a need now with the new editor.
- He mentions he rarely uses post types unless he needs an archive. (I’ve thought this for a bit coming from ACF so this makes sense.)
My thoughts
Overall a great video from the Highrise Digital team and I’m glad I took the time to watch it. To hear the choices other devs make when working with the new editor was very helpful.
Design for blocks
He mentioned that his agency shifted their to a component-based design system. This is nothing new and, of course, makes complete sense for the block editor but I’m leery letting dev dictate your design process. That said, I do like the idea that designers and devs working closely to determine the best way to create a project.
WordPress updates breaking things
Something concerning that was very briefly mentioned in the video was about WordPress updating and breaking things. I may be misunderstanding his context but this is definitely something I need to research.
Removing block styles
He mentions that he removes block styles that WP adds and uses his own instead. I’ve dabbled in that myself but I wonder if this causes any future-proof issues. Again, something I need to research.
That’s all for now. I’ll update this post if I get any clarity about those things.