Gutenberg Block Development for WordPress

Explore the essential Gutenberg JavaScript libraries—WP element, WP blocks, WP components, and WP i18n—learn how they expose as globals, and how to access and use them in block development.

Learn why custom Gutenberg blocks belong in plugins to extend WordPress functionality, while themes handle styling and color palettes; avoid placing blocks in themes to prevent breakage.

Compare the modern JavaScript approach to ES5 in Gutenberg block development. Learn how ESX, ESNext, Harmony, React, GSX, and tooling like Webpack and Babel shape code and compatibility.

Learn to build Gutenberg blocks by architecting a main plugin file, enqueuing JavaScript, and registering blocks with registerBlockType. Break code into components, import them, and apply per-block or shared CSS.

Learn how to enqueue block editor assets and block assets in WordPress Gutenberg, separating editor-only JavaScript and CSS from front-end styles, with dependencies and optional front-end loading via is_admin.

Explore how registerBlockType creates custom WordPress Gutenberg blocks by defining a namespace and block name with settings, attributes, edit, and save configurations.

Learn to set a Gutenberg block’s title and description with registerBlockType, localize the title via i18n, and distinguish the block name from its UI title.

Explore how the register block type category setting organizes blocks into common, layout, widgets, and embeds, guiding discovery via category, search, and recently used blocks.

explain how to set the icon for a registerBlockType block using dash icons and svga icons, including configuring a 20-pixel size via an icons.js file.

Explore the keywords setting for registerBlockType, using up to three translatable keywords to improve search discovery. Create a descriptive title to control visibility, since keywords rely on user search.

Explore the supports setting for registerBlockType in Gutenberg, covering anchor linking, custom class name control, and automatic className generation within the WP namespace; also learn how to disable HTML editing.

Explore Gutenberg block attributes as dynamic data containers, using sources and selectors (content, message body) to map and save values in the database while keeping front-end rendering clean of comments.

Learn how the edit setting in registerBlockType shapes the block editing interface, including fields, components, and save behavior, using props, attributes, and setAttributes to drive a rich text editing experience.

Explore how the save setting in registerBlockType controls how block content is saved to the database by rendering a div with the class name and content saved via selector-based attributes.

Learn how to set up the Gutenberg block development environment by cloning the example plugin repo, installing dependencies with npm, and configuring webpack to build editor and front-end assets.

Explore how to build a static Gutenberg block that cannot be edited in the editor, with no settings, and displays static text on the front end.

Explore how to build an editable Gutenberg rich text block using the Rich Text component, with attributes, placeholders, and front end versus back end behavior.

Explore how to add a text alignment toolbar to Gutenberg blocks, manage text alignment with block controls, and reflect left, center, or right alignment on the front end.

Explore inspector controls in Gutenberg block development, wiring shared attributes between toolbar and inspector controls, and structuring settings with panel bodies, panel rows, and icons.