Introduction
The new block editor introduced as part of Gutenberg is a major change from the traditional WordPress editor. With blocks replacing the classic visual/text editor, it can take some getting used to for both new and experienced users. However, once you get the hang of it, the block editor opens up new creative possibilities for building sophisticated page layouts. In this article, we’ll share some tips and tricks to help you master the WordPress block editor.
Understanding the Core Blocks
When you first start using the block editor, it’s helpful to familiarize yourself with the core blocks that are available out of the box. These basic building blocks allow you to construct pages without any additional plugins. Here are some of the most useful core blocks:
Paragraph: The standard text block for adding prose. Offers basic formatting options.
Heading: Titles your content in hierarchical styles from H1 to H6.
Image: Embeds images on your page and allows for caption and alignment.
Gallery: Displays multiple images in a customizable layout. Great for image galleries.
Quote: Styles quoted text to stand out visually.
Pullquote: Larger version of a quote meant to draw attention.
Cover: Full-width block great for hero images or intro text.
Button: Creates clickable call-to-action buttons.
Installing and Using Extra Blocks
While the core blocks cover basic needs, you’ll likely want additional blocks from third-party developers too. WordPress allows third-party plugins to integrate new blocks seamlessly. Here are some tips for extending your block options:
- Browse popular block plugins on WordPress.org for things like forms, tables, maps and more. Install them like regular plugins.
- Some themes bundle new blocks as well. Enable theme-specific blocks in the editor settings.
- Once installed, new blocks show up in the inserter menu (+ icon). Drag them into place like core blocks.
- Many blocks have sidebar panels for configuration. Toggle panels open to customize block attributes.
- Hovering over a block reveals a toolbar for editing, removing, duplicating, and more actions.
- Try out different blocks to gain experience with their various features and use cases.
Layout Tools and Styling Controls
The block editor provides robust layout tools beyond just the raw blocks. Learn to use these for advanced page designs:
- Columns: Group blocks horizontally or vertically into equal width columns for grid layouts.
- Spacers: Add empty space between blocks with margin and padding controls.
- Inner blocks: Wrap blocks together into reusable parent blocks.
- Inserter icon: Drag this between blocks to easily reorder or split/combine columns.
- Styles panel: Access color palette, typography options and additional block styles.
- Inspector: Edit alignment, spacing, dimensions and more from this single control panel.
- LaTeX: Render scientific formulas and mathematical expressions with LaTeX blocks.
- Code/HTML blocks: Drop custom coded widgets, ads or other elements within pages.
With practice, you can create complex multipage responsive layouts using only the block editor interface.
Templates for Consistency
For consistent repeated content, block templates save you time. Here are some useful tips for templates:
- Create: Design your layout once, then save it as a reusable template block.
- Apply: Drag template blocks anywhere needed for instant populated layouts.
- Edit: Modify the template itself to update all instances in one go.
- Categories: Group related templates together within the same template part.
- Parts: Save template categories as separate template parts files for portability.
- Import/export: Share templates across sites by exporting from one and importing to another.
- Auto-template: Certain changes like adding an image can auto-generate template variations.
- Nesting: Place one template block within another to achieve layered nested templates.
Templates empower you to establish standardized design patterns and sections.
Keyboard Shortcuts for Speed
Once you get the hang of blocks, leverage keyboard shortcuts to work even faster:
- /: Open inserter to add new block
- Esc: Close sidebar panels and inspector
- Ctrl/Cmd + s: Save draft
- Ctrl/Cmd + z: Undo
- Ctrl/Cmd + Shift + z: Redo
- Tab: Indent a block to the right
- Shift + tab: Un-indent a block to the left
- Ctrl/Cmd + a: Select all content
- Backspace: Delete the current block
- Ctrl/Cmd + c/v: Copy and paste blocks
- Ctrl/Cmd + x: Cut the current block
- Ctrl/Cmd + up/down: Reorder selected blocks
With practice, you can fly through editing just using your hands on the keyboard.
Exporting and Importing Content
Sometimes you need to move content between sites. The block editor streamlines content portability:
- Export: From the editor, choose Export as JSON file to save all content as structured code.
- Import: On other sites, choose Import from the main menu, then upload the exported JSON file.
- Authors/media: Cross-site imports usually require manual handling of author/media relationships.
- Template/CSS: Styling like templates and CSS won’t auto-import between different themes.
- Tools: Plugins like WordPress CLI and WP Migration Dashboard streamline bulk imports/exports.
- Reference: Understanding block nesting/relationships in the JSON helps smooth import/export.
With some care taken, you can effortlessly sync content created in the block editor between sites.
Additional Accessibility Features
Accessibility is crucial for all users to access content. Leverage these block editor capabilities:
- Titles: Add insightful alternative text titles for images using the image toolbar.
- Headings: Properly structured hierarchical headings aid navigation for screen readers.
- Color contrast: Check sufficient color contrast between text and backgrounds passes accessibility standards.
- Layout: Logical flow order aids understanding, especially for those with cognitive/visual impairments.
- ARIA attributes: Add ARIA roles, labels, live regions directly to advanced blocks as needed.
- Keyboard: All functions work seamlessly without require mouse for full keyboard navigation.
- Focus: Clear focus indicators appear around interactive elements for easy targeting.
- Tab indexing: Logical tabbing order flows between blocks ensuring nothing is skipped.
Follow best practices to make your content equitable and inclusive for everyone.
Conclusion
With practice, the WordPress block editor can become second nature. Try buildingsample pages, experimenting with layouts, and leveraging all the tools at your disposal. Refer back to this guide as needed for tips on core blocks, templates, styling, and more advanced techniques. Mastering the block paradigm will unlock new creative possibilities for presenting content engagingly across any site.