Come usare l'editor di blocchi di WordPress (guida per principianti)

Ankur Raj Bongshi

-

WordPress block editor is like any other page builder that lets you create and design amazing content and web pages for your website. It is built into WordPress, so anyone can create a website from scratch.

The Gutenberg Block Editor, aka block editor, is the new editor that has replaced the old classic editor. The block editor works differently than the classic editor.

WordPress Block Editor! What’s that?

WordPress Block Editor is the new default blocks-based default editor. Blocks are like the content elements required to build a website or content.

It offers a modern, block-based approach to content creation, making designing and formatting pages and posts easier without requiring extensive coding or third-party tools.

Block Editor Interface

Let’s look at the Gutenberg Block Editor interface and its functionality.

Here’s a quick run-down of the elements of the Gutenberg editor interface: 

  1. Aggiungi blocco
  2. Redo/Undo Button
  3. Document Overview
  4. View
  5. Settings (Blocks & Post)
  6. Options for Editor

There are even more. Check out the image below.

  1. Search Bar Option
  2. Add Title of the Post or Page
  3. Add Blocks in the Content Area
  4. Installed & Core WordPress Blocks
  5. Add Block Button
  6. Options for Posts & Pages
  7. Block Options
  8. Block Styles & Settings
  9. Blocks, Patterns, & Media

Now that you are familiar with the block editor interface, let’s look at the blocks that come with Gutenberg. 

Core WordPress Blocks

Since Gutenberg Block Editor is block-based, let’s learn what blocks come with the Block Editor and what they do exactly.

Content Blocks

These blocks are the foundation for creating text-based content:

  • Paragrafo: This is for adding regular text with formatting options.
  • Intestazione: For creating headings with six levels (H1 to H6).
  • Elenco: Adds ordered (numbered) or unordered (bulleted) lists.
  • Citazione: Format text as a blockquote with optional citation.
  • Codice: Displays raw code snippets in a formatted block.
  • Preformattato: Adds text with preserved spacing and alignment.
  • Tabella: Creates simple tables for data presentation.
  • Verse: For poems or other preformatted text with special spacing.

Creare bellissimi tavoli
Con l'editor di blocchi

Prova gratuita
Ottieni un professionista

Media Blocks

These blocks allow you to embed and display various types of media:

  • Immagine: Adds single images with captions and alignment options.
  • Gallery: Creates image galleries with customizable layouts.
  • Video: Embeds videos uploaded to the Media Library.
  • Audio: Adds playable audio files directly to the page.
  • File: Uploads and links to files for download.
  • Media e testo: Combines text and media side-by-side in a single block.
  • Copertina: Adds an image or video with overlaying text, perfect for headers or sections.

Design Blocks

These blocks help with page structure and visual design:

  • Colonne: Creates multi-column layouts.
  • Gruppo: Groups multiple blocks for better organization and styling.
  • Row: Aligns blocks horizontally in a row.
  • Buttons: Adds customizable buttons with links.
  • Distanziatore: Adds space between blocks for layout adjustments.
  • Separator: Inserts horizontal lines to divide sections.

Embed Blocks

WordPress supports embedding content from various platforms with these blocks:

  • YouTube: Embeds YouTube videos.
  • Twitter: Embeds tweets directly on the page.
  • Instagram: Embeds Instagram posts.
  • Spotify: Embeds Spotify playlists, albums, or tracks.
  • Other Embeds: Support for Vimeo, Facebook, TikTok, SoundCloud, and more.

Theme Blocks

These blocks are used to add theme-related content:

  • Post Title: Displays the title of the current post or page.
  • Post Content: Outputs the content of the current post or page.
  • Post Immagine in primo piano: Displays the featured image of a post.
  • Query Loop: Dynamically displays a list of posts based on specific criteria.
  • Navigation: Adds navigation menus.

Widget Blocks

Allows adding traditional widget content into block-based designs:

  • Ricerca: Adds a search bar.
  • Latest Posts: Displays a list of recent posts.
  • Categories: Shows a list of post categories.
  • Tag Cloud: Displays tags in a visually engaging format.

Reusable and Custom Blocks

Reusable Blocks: Save any block or group of blocks for reuse across the site.

  • HTML personalizzato: Add custom HTML for advanced customization.

These core blocks provide the foundation for creating various page layouts and content types without additional tools, making WordPress versatile and accessible for users of all skill levels.

How to Use the WordPress Block Editor?

The block editor is child’s play as it is very easy to use. The WordPress Block Editor is powerful and flexible, allowing you to design pages and posts easily. By familiarizing yourself with its features, you can quickly create visually appealing and engaging content!

Inserting Blocks

This new editor supports the drag-and-drop feature, which means you can drag and drop the blocks to create new layouts and sections of a webpage. To drag and drop blocks, click “Add New Block” at the top and drag and drop the

You can add or insert blocks simply by clicking the “add block” button in the editor, typing the block name, and inserting it into the editor.

There is another method you can use to add blocks to the editor. Just type “/Blcok Name.” A demo is below. Be sure to check it out.

Duplicate A Block

Duplicating blocks is a simple process. You can duplicate a block by selecting the block and using the shortcut key Ctrl+Shift+D. 

Or you can do that manually. Select a block and click the three vertical dots in the block’s settings menu (1) to duplicate it. From there, choose the “Duplicate” option (2). Once clicked, the block will be instantly duplicated.

You can duplicate blocks by selecting the block and using the shortcut key Ctrl+Shift+D. 

Move A Block

You can easily move blocks using the drag-and-drop feature or the up-and-down buttons.

Select the block, and you’ll see two arrows (up and down). Click the up or down arrow to move the block vertically.

Alternatively, use the drag handle to reposition the block anywhere you like.

Delete or Remove A Block

Deleting or removing a block is super easy. Select the block and press the shortcut key Shift+Alt+Z from your keyboard.

You can do that manually by clicking on the block settings and selecting the remove block option.

Create Pattern

One standout feature of the block editor is Create Pattern. These are blocks you can save and reuse across multiple posts or pages.This feature is incredibly handy, allowing you to save time by reusing custom-designed blocks.

To create a pattern, open the block settings of the selected blocks or a block by clicking the three dots and select ‘Create Pattern’.

Next, assign a name (1) and categories (2) to your block or blocks and click the Aggiungi pulsante (3).

This saves your block to the Gutenberg block library, making it accessible for future use. Whenever you need it, simply insert the reusable block just like any other block.

Key Board Shortcuts

You can take advantage of using the Gutenberg Block editor via keyboard shortcuts. These shortcuts can help users quickly navigate, format text, and manage blocks without relying on the mouse.

These shortcuts work across the entire editor interface:

  • Ctrl + S (Windows) / Cmd + S (Mac): Save the draft.
  • Ctrl + Z (Windows) / Cmd + Z (Mac): Undo the last action.
  • Ctrl + Y: Redo the last action.
  • Ctrl + Shift + Alt + M (Windows) / Cmd + Shift + Option + M (Mac): Switch between Visual and Code editor modes.
  • Ctrl + Shift + D: Duplicate a selected block
  • Ctrl + Shift + , : Hide or Display the Settings Panel

If you want, you can see the editor keyboard shortcuts from WordPress.org.

Add More Blocks Using Ultimate Blocks!

The default blocks in the block editor are fantastic for creating visually appealing posts and pages. But what if you need more flexibility?

Fortunately, the block editor supports custom block development, enabling developers to create their own unique blocks. This has resulted in a wide range of impressive Gutenberg block plugins crafted by the community. Such a plugin is Blocchi definitivi.

Blocchi definitivi is a powerful plugin designed to supercharge the WordPress block editor with 25+ customizable blocks. Perfect for bloggers and marketers, it includes features like review blocks, content filters, and call-to-action blocks to enhance engagement and functionality.

Pensieri finali!

Mastering the Gutenberg Block Editor opens up endless possibilities for creating engaging and visually stunning content on your WordPress site.

I hope the tutorial was helpful and easy to follow. Do let me know your thoughts in the comment section below. Also, do let your friends know about this easy guideline through your social media.

Per saperne di più!

Iniziate oggi stesso a creare bellissime tabelle!

Siete pronti a portare i vostri tavoli al livello successivo?
Scaricate subito Tableberg e create bellissime tabelle.

Ottenere Tableberg →

SULL'AUTORE

Il team Tableberg

Siamo un team dedicato di sviluppatori, scrittori ed esperti di WordPress con la missione di semplificare la creazione di tabelle in WordPress. Se potete usare il blocco Table predefinito, potete usare il blocco Tableberg. È facile da usare e ricco di opzioni di personalizzazione. Tableberg offre tutte le caratteristiche che desiderate nel blocco Tabella predefinito. Provatelo... è GRATIS!