Gutenberg - Wordpress block editor

Czym jest edytor Gutenberg?

Gutenberg is a built-in editor for WordPress, which appeared in version 5.0 in 2018. It replaced the classic TinyMCE editor, which was based on a single large text field. The new editor introduced the concept of blocks, which allow intuitive creation of pages without the need for coding knowledge.

The name “Gutenberg” comes from Johann Gutenberg, the inventor of movable type printing, who revolutionized printing in the 15th century. Like his invention, the Gutenberg editor aimed to simplify and democratize the process of publishing content.

Key features of the Gutenberg editor

Block system

The most important feature of Gutenberg is its block-based approach to content editing. Each element of a page – text, image, gallery, video, header, list – is a separate block that can be added, modified and rearranged at will.

The main types of blocks are:
✔ text blocks – paragraph, heading, list, quote, code.
✔ multimedia blocks – images, galleries, videos, audio files.
✔ layout blocks – columns, buttons, spacing, content grouping.
✔ dynamic blocks – embedding posts, shortcodes, tables.

Each block has its own settings, which you can customize in the editor’s side panel. You can change the background color, alignment, text size or add visual effects.

Personalization and content editing

Gutenberg offers many tools that allow you to customize the layout of your content:
✔ drag & drop – you can quickly rearrange blocks using drag & drop.
✔ block reuse – you can save custom blocks and use them on different pages.
✔ live preview – every change is immediately visible, making your work easier.
✔ block styling – you can change fonts, colors and spacing without using CSS.

Integration with themes and plugins

The Gutenberg editor is compatible with modern WordPress themes, especially those based on blocks, such as Astra, GeneratePress and Kadence. You can also extend its functionality with plugins that add new blocks and editing options, such as:

✔ CoBlocks – additional blocks for creative layouts.
✔ Kadence Blocks – advanced page layout options.
✔ Ultimate Addons for Gutenberg – new elements and features.

Advantages of the Gutenberg editor

Simplicity and intuitiveness– thanks to the block editor, even people without coding experience can easily create pages and blog posts.

Optimization for SEO – gutenberg generates clean and semantic HTML code, which makes it easier for Google to index your content. In addition, you can easily integrate it with SEO plugins, such as Yoast SEO.

Better performance – compared to classic page builders (e.g. Elementor, Divi), Gutenberg loads faster because it does not add unnecessary CSS and JS code.

Personalization and flexibility – thanks to a wide selection of blocks and editing options, you can create unique page layouts without using pre-made templates (also check out the article titled“WordPress Templates“)

Need help with WordPress?

Contact us!

Disadvantages and limitations of Gutenberg

Lack of full design freedom – Gutenberg does not give you as much control over the look of your site as Elementor or Divi.

Compatibility issues – some older themes and plugins may not work properly.

Need to learn – users accustomed to the classic WordPress editor may initially feel lost.

Gutenberg vs. Elementor

See the article: Updating PHP in WordPress – how to do it quickly and efficiently?

Practical applications of Gutenberg

Thanks to its modular design, the Gutenberg editor works well in a variety of scenarios, from simple blogs to advanced online stores. Here are specific cases where its functionality brings real benefits.

Creating blogs and articles

WordPress has been a popular blogging tool for years, and Gutenberg makes the process significantly easier. Thanks to its block structure, you can easily:

-add paragraphs and headings – the “Paragraph” and “Heading” block allow you to conveniently format your content and improve readability. You can also use different levels of headings (H1-H6), which affects SEO.

-create dynamic entries – for example, using “List” (ordered and unordered), “Quote” (to highlight opinions) or “Table” (to present data) blocks.

– add multimedia – you can embed images, photo galleries, YouTube videos or audio files without using HTML code. WordPress’ built-in mechanism automatically optimizes media for performance.

– enrich content with interactive elements – for example, embed posts from social media (Facebook, Twitter, Instagram) or use “Button” blocks to direct the user to important pages.

An example of using Gutenberg in blogging:

1. You create a new post and add an introduction in the “Paragraph” block.
2. You add H2 and H3 headings to improve the text structure.
3. You insert a quote to highlight a key passage.
4. You insert a gallery of images to illustrate the topic.
5. At the end, you add a “Button” with a CTA (“Read more”, “Contact us”).

Company pages and portfolios

If you want to create a professional company website, Gutenberg allows you to quickly and intuitively build a page layout. The use of several blocks will allow you to create a clear and modern look for your site:

“Cover” block – ideal for a welcome section, allows you to place a background image and overlay text with a CTA.
“Columns” block – allows you to divide content into sections, such as 3 columns with descriptions of services.
“Group” block – allows you to combine several elements into one stylized field, which is useful for ‘About Us’ or ‘Our Mission’ sections.
“Button” block – for placing clear calls to action, such as ‘Contact us’.
“Google Map” block. – helpful for local businesses, makes it easier to find an office.

An example of using Gutenberg in a company website:

1. Inserting a “Cover Page” with the company name and CTA.
2. Dividing the “Our Services” section into 3 columns, each with an icon and description.
3. Adding a “Make an appointment for a consultation” button.
4. Inserting a gallery of photos of implementations or portfolios.
5. Finally, a contact section with a map and form.

Creating sales pages and landing pages

Sales pages require attractive design and effective calls to action. Gutenberg, although not as powerful as Elementor, offers many tools to help create an effective landing page.

Headlines and sub-headlines – key to conveying the value of the offer.
CTA buttons – leading to a purchase or contact form.
Testimonials and reviews – a “Quote” block for displaying customer recommendations.
Animations and effects – thanks to dedicated plugins, such as Kadence Blocks.
Countdown timers and countdowns – for promoting time-limited offers.

An example of using Gutenberg in a landing page:

1. Inserting a “Cover” block with attractive graphics and a sales headline.
2. Placing the offer description in the column section.
3. Adding a “Buy Now” or “Subscribe” button.
4. Displaying customer testimonials in the “Quote” block.
5. Adding a form for newsletter signup.

WooCommerce online stores with Gutenberg.

Gutenberg fully supports WooCommerce, which means you can easily build product pages and categories in your store. There are dedicated WooCommerce blocks that streamline the process:

“Product” block – allows you to showcase a single product.
“Shopping Cart” block – displays a shopping cart anywhere.
“Category List” block – shows available product categories.
Block “Reviews” – for presenting customer reviews.

An example of using Gutenberg in e-commerce:

1. You create a product page from the “Product” block.
2. You add a description, photos and price.
3. You place “Related products” and “Reviews” blocks.
4. You insert an “Add to cart” button.
5. Finally, you place a FAQ section with the most common customer questions.

Create documentation and knowledge base pages

Gutenberg allows you to easily create a clear FAQ or knowledge base page. You can use:

“Expandable accordion” block – to hide and expand content.
“Table” block – for presenting comparisons and specyfikacji.
Blok „Lista punktowana” – do wypunktowania kroków instrukcji.

Example of using Gutenberg in documentation:

1. H1 header – “Frequently Asked Questions.”
2. Block “Expandable accordion” – sections with questions and answers.
3. “Table” block. – Comparison of different product variants.
4. Block “List” – step-by-step instructions for use.

Is it worth using Gutenberg?

Gutenberg is the future of the WordPress editor. With its block structure, it offers a modern, flexible approach to content management, eliminating the need for additional page editing plugins. It’s fast, intuitive and SEO-optimized, making it ideal for both simple blogs and more complex corporate sites or online stores.

Although it was initially met with mixed reviews, today it is gaining popularity, and WordPress is consistently expanding its capabilities. In the future, you can expect even more integration with block-based themes, new dedicated features for e-commerce, and improved visual editing tools. Gutenberg’s goal is full modularity, which means it can become a complete page design tool without the need for additional page builders.

If you’re looking for a simple and powerful content creation solution for WordPress, Gutenberg is an option worth considering.

FAQ – Frequently asked questions about Gutenberg editor.

Is Gutenberg better than the classic WordPress editor?
Yes, Gutenberg offers much more flexibility and intuitiveness compared to the classic TinyMCE editor. Thanks to the block system, you can more easily manage the layout of your site, add multimedia and personalize content without coding knowledge.

Is Gutenberg free to use?
Yes, the Gutenberg editor is built into WordPress and available for free. It doesn’t require installing additional plugins or fees, making it an attractive alternative to commercial page builders.

Is Gutenberg suitable for building entire websites?
Yes, especially when combined with modern block-based themes such as Astra, GeneratePress or Kadence. It can also be extended with plugins that add new blocks and features.

Does Gutenberg work well with WooCommerce?
Yes, Gutenberg offers special WooCommerce blocks that allow you to easily add products, shopping carts and purchase buttons to pages and posts. This is a convenient solution for those managing online stores.

What are Gutenberg’s development plans?
WordPress is constantly developing Gutenberg, aiming to create a full page editor that will eliminate the need for external page builders. In the future, we can expect better integration with block themes, new visual editing features and expanded page customization options.