![]() While the editing experience delivered by Gutenberg is new compared to the classic WordPress editor, the way WordPress stores your pieces of content in the database doesn’t change at all. Working with Gutenberg blocks in WordPress 5.8. ![]() They serve the same purpose as JavaScript functions, but work in isolation and return HTML via a render() function. So, what are React components? W3Schools provides the following definition:Ĭomponents are independent and reusable bits of code. ![]() Titles, paragraphs, columns, images, galleries, and all the elements that make up the editor’s interface, from sidebar panels to block toolbar controls, are React components. The idea combines concepts of what in WordPress today we achieve with shortcodes, custom HTML, and embed discovery into a single consistent API and user experience. “Block” is the abstract term used to describe units of markup that, composed together, form the content or layout of a webpage. ![]() In Gutenberg, the content is divided into blocks, which are “bricks” that users can use to create posts and pages or their entire websites. Rather, it redefines the entire editing experience in WordPress. Gutenberg is not a regular WYSIWYG editor. However, this should not make you think of an enhanced version of the traditional content editor. In short, even if Gutenberg is still under heavy development, it has come a long way - and today, the block editor is a full-fledged candidate as a reliable, functional page and site builder.įrom a developer’s point of view, Gutenberg is a React-based Single Page Application (SPA) that allows WordPress users to create, edit, and delete content in WordPress. Since it was first released in December 2018, the block editor has been greatly improved in all aspects: more powerful APIs, a more advanced user interface, improved usability, a ton of new blocks, the first implementations of Full Site Editing, and much more. Once you get going with block building, you’ll be poised to improve your skills further and build even more advanced Gutenberg blocks on your own. With the knowledge you’ll gain by the end of this article, you’ll be able to start having fun and being productive right away. These topics require additional space and attention and are probably too advanced for beginning block development (unless you’re a React developer).įor the same reason, we won’t be covering some of the more advanced topics related to Gutenberg block development, such as dynamic blocks and meta boxes. Hopefully, intermediate and advanced readers will forgive us for not delving deeply into certain concepts such as React state, Redux store, high-order components, and so on. It wasn’t easy to find the right compromise between completeness and simplicity or decide which topics to include and which to leave out. Will this be an ambitious project? You bet it will be! Gutenberg Block Development Prerequisitesįor this tutorial, the only required skills are a good knowledge of WordPress plugin development and at least a basic understanding of HTML, CSS, JavaScript, and React. With that in mind, we’ve decided to provide a step-by-step tutorial aimed at helping our readers get started with Gutenberg block development. I think there are several layers to this documentation could be an order of magnitude better in both organization and presentation. While there are folks that can learn it quickly, it’s still a big barrier for people. The official WordPress Block Editor Handbook provides developers with a tremendous amount of information, but you may find yourself lost in that sea of details.Īnd it’s worth mentioning what Matías Ventura, lead architect of the Gutenberg project, reported in his interview with WP Tavern: In addition, a solid knowledge of JavaScript, Node.js, React, and Redux are must-have ingredients for this fairly complex recipe. The learning curve is steep, mainly due to the difficulty of installing and configuring the development environment. Many people complain about the hurdles of getting started with building Gutenberg blocks and apps.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |