gutenberg

The Block Editor project for WordPress and beyond. Plugin is available from the official repository.

11,289

4,438

11,289

7,601

View on GitHub View on NPM

Top Related Projects

elementor

6,694

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.

amp-wp

1,800

Enable AMP on your WordPress site, the WordPress way.

Quick Overview

WordPress/gutenberg is the development repository for the Gutenberg project, which is a block-based editor for WordPress. It aims to revolutionize the content creation experience in WordPress by introducing a modular approach to building pages and posts. Gutenberg is now part of the WordPress core and continues to evolve with new features and improvements.

Pros

Modular block-based editing system, allowing for more flexible and dynamic content creation
Improved user experience for content creators, especially those without coding knowledge
Extensible architecture, enabling developers to create custom blocks and plugins
Consistent design and layout across different themes and devices

Cons

Learning curve for users accustomed to the classic WordPress editor
Potential compatibility issues with older themes and plugins
Performance concerns with complex layouts or a large number of blocks
Some advanced customization may still require coding knowledge

Code Examples

Registering a custom block:

import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';

registerBlockType('my-plugin/custom-block', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'common',
    attributes: {
        content: {
            type: 'string',
            source: 'html',
            selector: 'p',
        },
    },
    edit: ({ attributes, setAttributes }) => (
        <RichText
            tagName="p"
            value={attributes.content}
            onChange={(content) => setAttributes({ content })}
        />
    ),
    save: ({ attributes }) => <RichText.Content tagName="p" value={attributes.content} />,
});

Adding custom styles to a block:

import { addFilter } from '@wordpress/hooks';
import { createHigherOrderComponent } from '@wordpress/compose';

const addCustomStyle = createHigherOrderComponent((BlockListBlock) => {
    return (props) => {
        if (props.name === 'core/paragraph') {
            return <BlockListBlock {...props} className="my-custom-style" />;
        }
        return <BlockListBlock {...props} />;
    };
}, 'addCustomStyle');

addFilter('editor.BlockListBlock', 'my-plugin/custom-style', addCustomStyle);

Creating a custom sidebar plugin:

import { PluginSidebar } from '@wordpress/edit-post';
import { PanelBody, TextControl } from '@wordpress/components';
import { registerPlugin } from '@wordpress/plugins';

const CustomSidebar = () => (
    <PluginSidebar name="custom-sidebar" title="Custom Sidebar">
        <PanelBody>
            <TextControl
                label="Custom Field"
                value=""
                onChange={(value) => console.log(value)}
            />
        </PanelBody>
    </PluginSidebar>
);

registerPlugin('custom-sidebar-plugin', {
    render: CustomSidebar,
    icon: 'admin-customizer',
});

Getting Started

To get started with Gutenberg development:

Clone the repository:

git clone https://github.com/WordPress/gutenberg.git

Install dependencies:
```
cd gutenberg
npm install
```
Start the development server:
```
npm run dev
```
Access the development environment at http://localhost:8080

For more detailed instructions and documentation, refer to the Gutenberg Handbook.

Competitor Comparisons

elementor

6,694

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.

Pros of Elementor

More user-friendly interface for non-developers
Wider range of pre-built templates and design elements
Real-time, front-end visual editing experience

Cons of Elementor

Can be resource-intensive, potentially slowing down websites
Less integrated with WordPress core, may face compatibility issues
Limited flexibility for advanced developers compared to Gutenberg

Code Comparison

Elementor:

add_action( 'elementor/widgets/widgets_registered', function( $widgets_manager ) {
    $widgets_manager->register_widget_type( new \Elementor_Custom_Widget() );
});

Gutenberg:

registerBlockType('namespace/block-name', {
    title: 'Custom Block',
    icon: 'smiley',
    category: 'common',
    edit: () => <div>Edit view</div>,
    save: () => <div>Save view</div>,
});

Elementor uses PHP hooks to register custom widgets, while Gutenberg employs JavaScript and React for block creation. Gutenberg's approach aligns more closely with modern web development practices and offers greater flexibility for developers familiar with React. However, Elementor's PHP-based system may be more accessible for WordPress developers who are less experienced with JavaScript frameworks.

amp-wp

1,800

Enable AMP on your WordPress site, the WordPress way.

Pros of amp-wp

Focused specifically on AMP optimization, providing a streamlined solution for mobile performance
Easier integration for existing WordPress sites without major theme changes
Smaller codebase, potentially easier to maintain and contribute to

Cons of amp-wp

Limited to AMP-specific features, less versatile than Gutenberg's block editor
May require additional plugins for full site editing capabilities
Smaller community and ecosystem compared to Gutenberg

Code Comparison

amp-wp:

function amp_init() {
    if ( ! is_amp_endpoint() ) {
        return;
    }
    // AMP-specific initialization
}
add_action( 'wp', 'amp_init' );

Gutenberg:

registerBlockType( 'my-plugin/my-block', {
    title: 'My Block',
    icon: 'smiley',
    category: 'common',
    edit: ( { attributes, setAttributes } ) => {
        // Block editor UI
    },
    save: ( { attributes } ) => {
        // Block content saving
    },
} );

The amp-wp code focuses on AMP-specific functionality, while Gutenberg's code demonstrates its block-based editing system, highlighting the different approaches of these projects.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Gutenberg

Screenshot of the Gutenberg Editor, editing a post in WordPress

Welcome to the development hub for the WordPress Gutenberg project!

"Gutenberg" is a codename for a whole new paradigm in WordPress site building and publishing, that aims to revolutionize the entire publishing experience as much as Gutenberg did the printed word. Right now, the project is in the second phase of a four-phase process that will touch every piece of WordPress -- Editing, Customization, Collaboration (which includes Real-time collaboration, Asynchronous collaboration, Publishing flows, Post revisions interface, Admin design, Library), and Multilingual -- and is focused on a new editing experience, the block editor.

The block editor introduces a modular approach to pages and posts: each piece of content in the editor, from a paragraph to an image gallery to a headline, is its own block. And just like physical blocks, WordPress blocks can be added, arranged, and rearranged, allowing WordPress users to create media-rich pages in a visually intuitive way -- and without work-arounds like shortcodes or custom HTML.

The block editor first became available in December 2018, and we're still hard at work refining the experience, creating more and better blocks, and laying the groundwork for the next three phases of work. The Gutenberg plugin gives you the latest version of the block editor, so you can join us in testing bleeding-edge features, start playing with blocks, and maybe get inspired to build your own.

Check out the Keeping up with Gutenberg Index

Getting Started

Get hands on: check out the block editor live demo to play with a test instance of the editor.

Using Gutenberg

Download: To use the latest release of the Gutenberg plugin on your WordPress site: install from the plugins page in wp-admin, or download from the WordPress.org plugins repository.
User Documentation: See the WordPress Editor documentation for detailed docs on using the editor as an author creating posts and pages.
User Support: If you have run into an issue, you should check the Support Forums first. The forums are a great place to get help. If you have a bug to report, please submit it to the Gutenberg repository. Please search prior to creating a new bug to confirm it's not a duplicate.

Developing for Gutenberg

Extending and customizing is at the heart of the WordPress platform, this is no different for the Gutenberg project. The editor and future products can be extended by third-party developers using plugins.

Review the Quick Start Guide for the fastest way to get started extending the block editor. See the Block Editor Handbook for extensive tutorials, documentation, and API references. Also, check the WordPress Developer Blog for great articles about block development, among other topics.

Contribute to Gutenberg

Gutenberg is an open-source project and welcomes all contributors from code to design, and from documentation to triage. The project is built by many contributors and volunteers, and we'd love your help building it.

See the Contributors Handbook for all the details on how you can contribute.

To get up and running quickly with code contribution see Getting Started With Code Contribution. Also check out the other resources available on the Code Contributions page.

In whichever way you wish to contribute please be sure to read the Contributing Guidelines first.

As with all WordPress projects, we want to ensure a welcoming environment for everyone. With that in mind, all contributors are expected to follow our Code of Conduct.

Get Involved

You can join us in the #core-editor channel in Slack, see the WordPress Slack page for signup information; it is free to join.

License

WordPress is free software, and is released under the terms of the GNU General Public License version 2 or (at your option) any later version. See LICENSE.md for complete license.

Code is Poetry.

Top Related Projects

elementor

6,694

The most advanced frontend drag & drop page builder. Create high-end, pixel perfect websites at record speeds. Any theme, any page, any design.

amp-wp

1,800

Enable AMP on your WordPress site, the WordPress way.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot