Gutenberg
WordPress block editor for creating rich content layouts.
Open the official app on wordpress.org
This tool is hosted by its maintainers. Click below to open wordpress.org in a new tab — it's their official demo.
Browse design tools →What's next with Gutenberg?
Choose how you want to get started.
Use it free
Open the official tool or demo — no account needed.
Self-host it
Run the open-source version on your own infrastructure.
What is Gutenberg?
Gutenberg is an open-source block editor for WordPress, designed to transform content creation by replacing the traditional visual editor with a modular, drag-and-drop interface. Its primary purpose is to enable users to build websites and posts using reusable content blocks, such as text, images, videos, and custom components. This tool is widely used by WordPress developers, designers, and content creators who seek greater flexibility in structuring digital content. Gutenberg addresses the limitations of older editors by allowing granular control over layout, styling, and interactivity, while streamlining the workflow for both novice and advanced users. By prioritizing a component-based approach, it aligns with modern web development practices and enhances collaboration between designers and writers. The project evolved from a four-phase initiative within WordPress, focusing on editing, customization, collaboration, and multilingual support. It introduced post block editing in 2018 and expanded to full site editing (FSE) in 2021, enabling users to design entire websites using blocks. Gutenberg’s open-source nature under the GPL-2.0 license ensures transparency, community contributions, and adaptability for diverse use cases, from simple blogs to complex enterprise websites. Its modular architecture allows developers to extend functionality through plugins and custom blocks, making it a foundational tool for modern WordPress development.
How it works
Gutenberg is the block editor for WordPress, replacing the classic editor with a visual interface composed of reusable content blocks. It enables users to structure pages and posts by assembling pre-designed elements, offering greater control over layout and design. The tool’s purpose is to modernize content creation by adopting a modular approach, allowing users to edit text, images, videos, and custom components independently. This shift simplifies complex tasks like formatting and layout adjustments, making it accessible for both beginners and experienced developers. Gutenberg supports block-based editing, enabling users to add, rearrange, and customize elements like headers, galleries, and buttons. It also introduced full site editing (FSE) in WordPress 5.9, allowing site-wide design changes through a unified block interface. The editor integrates with WordPress themes and plugins, enhancing compatibility with modern web standards.
How to use it
- 1Install the Gutenberg plugin from the WordPress repository or enable it via the WordPress dashboard. 2. Open a new post or page and select the block editor interface. 3. Add content blocks by clicking the '+' icon, choosing from pre-designed elements or custom plugins. 4. Customize each block’s settings, such as text alignment or image dimensions, using the inline toolbar. 5. Preview the layout in real-time and publish the content. Practical tips include using the block library for pre-built components, leveraging the inserter menu for quick access, and utilizing the 'Edit as HTML' option for advanced customization. Regularly updating plugins and themes ensures compatibility with Gutenberg’s evolving features.
What it can do
- block editor
Use cases
Assumptions and limitations
Assumptions
- source: https://github.com/WordPress/gutenberg
- license: GPL-2.0 — free to use
- privacy: Self-hosted — you control your data
Limitations
- Learning curve for users accustomed to traditional WYSIWYG editors
- Compatibility issues with older WordPress themes and plugins
- Limited native support for complex layout grids compared to dedicated design tools
- Performance overhead from extensive use of custom blocks and plugins
- Requires regular updates to maintain compatibility with WordPress core changes
Understanding the result
WordPress block editor for creating rich content layouts.
Tool details
- Clearly flagged when a network request is needed.
- No account, no sign-up, and no tracking of your content.
- Powered by (MIT).
- Built with
- (WordPress/gutenberg)
- License
- MIT
- Runs locally
- No — requires a network request
- Verification
- Not yet verified
- Input
- Query
- Output
- Text
Built with WordPress/gutenberg. OpenToolVault provides the discovery and browser interface while crediting the original project maintainers.
- Built with
- License
- MIT
Open-source project
OpenToolVault is an independent directory. We are not affiliated with or endorsed by this project.
References
- / — GitHub Repository
Upstream project · GitHub
- GPL-2.0 License
Upstream project
Frequently asked
What is Gutenberg and how does it differ from the classic WordPress editor?
Gutenberg is WordPress’s block editor, replacing the classic editor with a modular interface. Unlike the traditional WYSIWYG editor, Gutenberg uses reusable content blocks (e.g., text, images, galleries) that can be rearranged and customized independently. This approach offers greater flexibility for layout design and aligns with modern web development practices, though it requires a learning curve for users accustomed to older workflows.
How does Gutenberg’s full site editing (FSE) work?
Full site editing in Gutenberg allows users to design entire websites using a unified block interface. This feature, introduced in WordPress 5.9, enables editing of headers, footers, and page templates through a block-based system. Developers can create custom templates and reuse blocks across the site, streamlining the design process while maintaining consistency. FSE integrates with WordPress themes that support the Block Editor, providing a cohesive editing experience.
How do I add a custom block to Gutenberg?
To add a custom block, developers create a plugin that registers the block using WordPress’s block API. This involves defining the block’s structure, attributes, and rendering logic in JavaScript. The block must be enqueued properly and registered with the editor via the 'init' hook. Once activated, the block appears in the Gutenberg block library, allowing users to insert and customize it like any other block.
How does Gutenberg compare to alternatives like TinyMCE or Blocksy?
Gutenberg is a core WordPress tool focused on block-based editing, while TinyMCE is a lightweight WYSIWYG editor with limited block capabilities. Blocksy is a theme framework that integrates with Gutenberg to enhance design options. Unlike Gutenberg, which is open-source and extensible, TinyMCE is proprietary, and Blocksy is a commercial theme. Gutenberg’s strength lies in its extensibility and alignment with WordPress’s future direction, whereas alternatives offer specialized features for specific use cases.
How do I troubleshoot Gutenberg editor crashes or layout issues?
Common issues include conflicts with plugins or themes. To resolve crashes, disable recently added plugins or switch to a default WordPress theme like Twenty Twenty-Three. For layout problems, check if the theme supports Gutenberg’s block rendering and ensure all plugins are updated. Clearing the browser cache or using a different browser may also resolve rendering glitches. If issues persist, consult the Gutenberg GitHub repository for bug reports or seek support in WordPress forums.