WordPress Blocks: Block Components for Site Building

Blocks are described by WordPress.org as block components that allow visual interaction with any piece of content, with or without code. They are the visual foundation of WordPress and can be used to create and manage every part of a site, fuelling rich layouts, interactive onboarding and extensibility. WordPress.org states that learning how to edit a block is enough to learn how to use all of WordPress, without having to write code. The approach is presented as suited to design and development work while remaining usable by newcomers.

• Block components requiring no code to insert content
• Used to create and manage every part of a site
• Support rich layouts and extensibility
• A unified and open syntax understood by editors, browsers and AI

The WordPress editor is the default way to insert, transform, style and move blocks on a visual canvas, using a drag-and-drop interface. WordPress.org offers a live way to try blocks from the Blocks page, and the WordPress.org homepage links to a "Try the Block Editor" option alongside its description of building sites with real-time editing. The homepage frames blocks as part of flexible design tools for creating any website, starting from a blank canvas or a theme.

• Insert, transform, style and move blocks
• Drag-and-drop visual canvas
• Live in-browser trial of blocks
• Real-time preview while adding, editing and rearranging content

The Blocks page lists a set of blocks covering text, media and layout needs. These illustrate the range of content types that can be handled through the same editing model. A wider selection is available through the block directory, which WordPress.org links from the same page.

• Paragraph
• Heading
• Media
• Image
• Video
• Audio
• Columns
• File

If an existing block does not suit a need, WordPress.org states that users can create their own, and that creating a block is as simple as building a React component. The @wordpress/create-block package is recommended to jumpstart creation, and the Blocks page shows a registerBlockType example with edit and save functions returning a "Hello world" output. The page also links to guidance on creating custom blocks, designing block patterns, building block themes and deploying blocks.

• @wordpress/create-block package for scaffolding
• registerBlockType with edit and save functions
• Blocks built much like React components
• Related paths: block patterns, block themes, block deployment

WordPress.org notes that each major release can include updates that improve existing blocks and the wider site-building experience. Release pages record block-related changes: WordPress 6.3 added the Details block, the Footnotes block, aspect ratios on images and a patterns page for managing template parts and synced patterns, previously called reusable blocks. WordPress 6.5 added aspect ratios and colour overlays for Cover block images, smoother drag-and-drop with visual cues in List View, and the Interactivity API for bringing interactions to blocks. WordPress 6.6 introduced a grid block with row and column span controls, negative margin values for all blocks with margin support, section styles for groups of blocks, and pattern management for Classic themes.

Blocks sit within WordPress, the open source publishing platform distributed through WordPress.org. The project's history timeline records the Gutenberg Project beginning in 2017, Gutenberg becoming the default editor in 2018, Block Directory support in 2020, and the release of the TT1 Blocks theme in 2021. WordPress.org also provides documentation, code resources, learning materials and a browser-based test environment for people working with the platform.

• Gutenberg Project started 2017
• Gutenberg became the default editor in 2018
• Block Directory support added 2020
• TT1 Blocks theme released 2021