fuxt
fuxt copied to clipboard
funkhaus
Better Gutenberg Block's style system
The WordPress editor now is a “block” editor, and includes lots of flexibility (they call it Gutenberg). On the frontend, we’ve built a lot of Vue components that work with the backend “blocks”. But the CSS is very complicated and I’m not sure it is as good as it could be. I’d really like to figure out a better way to architect these “blocks” and have them still be flexible for the frontend. I think this is mostly a CSS problem as the Vue components are pretty basic and I’ve built them already (maybe some slight changes to HTML would help). https://github.com/funkhaus/fuxt/tree/master/components/gutenberg https://github.com/funkhaus/fuxt/blob/master/components/WpGutenberg.vue
The key is these blocks need to be generic and flexible mostly, as we use them on all our sites. Ideally we just tweak some fonts and colors on every new site, maybe change some props or perhaps CSS variables to tweak margins etc.
These “blocks" are what build out a page like this: https://mssngpeces.com/projects/commercials/pinterest-calling-all-creators/
So, I’d really like someone to architect out a better CSS approach to all these blocks that interact with each other (it can get complex, with blocks nested inside a column-block).
The final level is making the frontend CSS match the WordPress editor approximately. How to do that is explained here: https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-json/
We'd also want to merge in all our custom blocks that we build, and have those work with the CSS system we develop. So far the sites for Tool and MssngPeces have custom blocks for theme. We'd need to include the PHP templates for them in fuxt-backend, and include a blocks.json file of the ACF export's in fuxt backend too.
Perhaps we can use this on the front end somehow?
https://fuxt-backend.funkhaus.us/wp-includes/css/dist/block-library/style.min.css
Maybe this helps? https://css-tricks.com/a-deep-introduction-to-wordpress-block-themes/#creating-wordpress-block-themes
Would be nice if gradients worked https://developer.wordpress.org/block-editor/how-to-guides/themes/theme-support/#block-gradient-presets
Lesson learned...
Use consistent prop names across all components. For example innerBlocks is best for all inner blocks.
If we decided to not use Blocks for gutenberg, and just work with the rendered HTML, this would help https://github.com/natemoo-re/ultrahtml
This is a good read: https://developer.wordpress.org/block-editor/reference-guides/components/#usage
This would be helpful: https://make.wordpress.org/core/2023/07/17/introducing-the-block-selectors-api/