Technology overview
WordPress block editor (code named and also generally known as ”Gutenberg”) is the largest change in WordPress ecosystem since it’s inception and was released as a WordPress Core feature in 2018 bringing modern React / Redux based Web UI layer in place of the old fashioned and ugly, but so far highly popular PHP templating system and CMS.
Block editor is built from the grown up to being highly modular and modern WYSIWYG editor and to compete and deprecate the tried and true TinyMCE editor which is the ”rich text editor box” used in many parts around web and has even been powering the legacy WordPress ”classic editor” experience for ages. WordPress being GPLv2+ licensed and restricting it’s proprietary use, the Gutenberg project is working on dual-licensing the code with GPLv2+ and a MIT style MPL 2.0 model for breaking later also into proprietary systems space as TinyMCE did. More about the ongoing license discussions and progress in an open GitHub issue.
Block Editor is a heavy SPA application and there’s performance optimization to be done in it while features are being constantly added. As a single thread application it benefits from high CPU single core performance where something like an Intel i3 and 8 GB of system ram would be a bare minimum when running on any mainstream grafical operating system. Cross-browser support is good with mainstream browsers such as Firefox, Safari and Chromium, while mobile responsivity is optimized for the best end user experience. The development tools and API’s for are considered being pretty stable. While depending on NPM, Webpack, React and the ES6/Javascript2015 transpiling workflow, the official ”best practices” are available in NPM package repository @wordpress/create-block and WordPress data objects have compatibility layer built on top of underlying frameworks that may change over time (such as Redux).
Block editor uses the WordPress PHP application through extendable WordPress REST API. A couple development server options include open source Virtualbox/Vagrant/AMD64 Ubuntu Box based VVV, and a free but proprietary and more plug and play XAMP based alternative ”Local” which also support for ARM processors which is something being worked on in VVV that currently runs on new Macs only through Parallels Pro requiring a paid ($120/year) license. Both support XDebug out of the box, and Local has plug and play launch.json VSCode configuration generator for it’s PHP Debug extension.
While this article is not intended being a complete introduction into WordPress Block Editor development, here’s some recommended sources for diving deeper while the rest of the article is covering some useful tips and tricks for content editors or the regular WordPress users.
- Advanced technical tutorial for existing JavaScript/React developers: https://unfoldingneurons.com/2020/wordpress-data-series-overview-and-introduction
- In depth Udemy course aimed for developers new in JavaScript and/or WordPress covering the whole process of building dynamic block editor extensions and blocks https://www.udemy.com/course/gutenberg/
- More links about topic by https://www.diigo.com/user/jasalt/gutenberg
Tips and tricks
- Markdown text can be pasted into the editor and it is converted into block editor elements. Helps some writers having problems with the editor.
More tips: https://www.gsarigiannidis.gr/gutenberg-tips-to-forget-the-classic-editor/
Cool Example blocks
3D block
”3D model” block by WordPress developer company Automattic is installed currently which supports GLB format with a nice drag and drop interface. Here is a demo with a model from https://3d.si.edu/:
HUOMIO
Tämä artikkeli on nysä. Voit jatkaa sen editointia, tai poistaa sen jos tieto on jo vanhentunutta.
