With the new WordPress 5.0. update appeared the new WordPress block editor named Gutenberg. From now on, it will be the default WordPress text editor. Although you can still use an old classic editor to write posts, which is now available via a WordPress plugin named ‘Classic Editor’, it’s worth getting to know the block editor better.
Or maybe you want to create your blog first? I will help you get started. All tips on how to start a WordPress blog you will find in my article. Start today. It is effortless!
The appearance of the new editor is very different from the well-known classic WordPress editor. You will have to learn some things from scratch. In my opinion, it’s worth it because the block editor is very intuitive and gives you many more possibilities.
The new WordPress editor is built of blocks. What does it mean? To create a blog post you have to put a series of these small blocks together. Well don’t fret we will discuss about them in detail in this article.
It’s very simple because each element is just a block. A separate block is a header, a separate one is a paragraph, an image, and so on. There are blocks available for all kinds of content: you can insert text, list, headings, columns, video and lots more.
Furthermore, you can change the order in which blocks are displayed, you can move them to any place on the page.
I think you will like it.
Let’s begin!
What is Block Editor
The Gutenberg Editor, also known as the WordPress Block Editor, is a content creation tool integrated into the WordPress platform. It was introduced with WordPress version 5.0 in December 2018 and is named after Johannes Gutenberg, the inventor of the printing press. The Gutenberg Editor (Block Editor) has replaced the Classic Editor as the default editor in WordPress since the release of WordPress 5.0.
The Gutenberg Editor revolutionizes the way users create and manage content in WordPress by allowing them to create posts and pages using individual blocks for different types of content, such as text, images, videos, and widgets. Each block can be customized and styled separately, providing greater flexibility and control over the layout and design of the content.
The Block Editor is designed to be more intuitive and also user-friendly than the previous Classic Editor, which relied on a single text editor for creating and editing content. The Block Editor simplifies the process of creating engaging and visually interesting content, making it accessible to users of all technical levels.
In addition to its basic functionality, the Gutenberg Editor also supports advanced features such as reusable blocks, block patterns, and custom block creation. These features enable users to create complex layouts and custom designs without needing advanced technical knowledge.
The Gutenberg Editor is an innovative content creation tool that has significantly enhanced the WordPress platform. Its flexible, user-friendly interface has made it easier for users to create engaging and professional-looking content, thereby making WordPress an even more powerful tool for website and content creation.
How is the WordPress Block Editor Different than the Classic Editor?
- Content Creation: The Block Editor uses individual blocks for different types of content, such as text, images, videos, and widgets. The Classic Editor relies on a single text editor for creating and editing content.
- Flexibility: The Block Editor provides greater flexibility and control over the design and layout of the content. Each block can be customized and styled separately. The Classic Editor had limited design and layout options.
- Advanced Features: The Block Editor includes advanced features such as reusable blocks, block patterns, and custom block creation. These features enable users to create custom designs and layouts that can be reused across different pages and posts. The Classic Editor did not have these features.
- Intuitive Interface: The Block Editor has a more intuitive and user-friendly interface compared to the Classic Editor. This makes it easier for users of all technical levels to create engaging and professional-looking content.
- Default Editor: The Block Editor is now the default editor in WordPress, while the Classic Editor is no longer being actively developed. This means that the Block Editor will continue to receive updates and improvements in the future.
The WordPress Block Editor (Gutenberg) is a more modern, flexible, and intuitive content creation tool than the Classic Editor, making it easier for users to create complex layouts and custom designs without needing advanced technical knowledge.
How the Block Editor Works
The WordPress Gutenberg Editor works by using a block-based approach to content creation. Instead of relying on a single text editor, users can create and manage content by adding and arranging individual blocks for different types of content, such as text, images, videos, and widgets.
Here’s how the Gutenberg Editor works in more detail:
Adding Blocks: To start creating content, users can simply click on the + button to add a new block to their post or page. They can choose from a wide range of blocks, including text, images, videos, headings, and more.
Customizing Blocks: Each block can be customized and styled separately, allowing users to change the font size, colour, and other design elements. Users can also add custom CSS to each block if they have more advanced design needs.
Arranging Blocks: Users can easily arrange blocks by dragging and dropping them into place, allowing them to create complex layouts and custom designs without needing advanced technical knowledge.
Reusable Blocks: The Gutenberg Editor also includes the option to create reusable blocks, which are blocks that can be saved and reused across different pages and posts. This feature can save time and effort when creating content with similar design elements.
Block Patterns: Another advanced feature of the Gutenberg Editor is block patterns, which are pre-designed layouts that can be added to a post or page with a single click. This feature can benefit users who want to create complex layouts quickly.
What are Blocks in WordPress?
Blocks in WordPress are the fundamental elements of content creation within the Block Editor. Each block represents a specific type of content, such as text, images, videos, audio, quotes, code snippets, and more. Each block can be customized and styled independently of the others, allowing for greater flexibility and control over the design and layout of the content.
One of the primary benefits of using blocks in WordPress is that they make creating and organizing content easier. Previously, users had to rely on a single text editor to create content. This often proved difficult to format and structure the content properly. Users can now easily create content by adding and arranging different blocks with the Block Editor and blocks.
Another key benefit of using blocks is that they can be reused and shared across different pages and posts. This makes it easy to create consistent designs and layouts across a website. For example, a user might create a custom block for a call-to-action button that can be reused on different pages throughout the website.
The Block Editor also includes a growing library of specialized blocks that are tailored to specific use cases. For example, the Table of Contents block automatically generates a table of contents based on the headings in a post or page. While the WooCommerce Products block allows users to display products from their WooCommerce store.
In addition to the built-in blocks, users can also create their own custom blocks using plugins or by writing custom code. This provides additional customization and flexibility for users who want to create unique designs and layouts for their websites.
Overall, blocks are a powerful tool for content creation in WordPress, providing a flexible and intuitive way to create, organize, and customize content.
Functions of the new block editor – Gutenberg
The editor screen is divided into several parts. Before you start writing a new blog post in the new WordPress block editor, I will discuss the function of individual parts.
More info about what is a blog and how to start a blog.
Here is an overview of what I am going to cover:
- Option Bar Settings
- Publishing Options
- Document and Block Options Settings
3.1. Document Settings
3.2. Block Settings - Content Area
# How to add a new block
4.1. The new Paragraph Block Settings
# How to add Reusable Block in your blog post
4.2. Headings Block Settings
4.3. List Block Settings
4.4. Quotes, Pullquotes, and Verses Block Settings
4.5. Image Block Settings
4.6. Gallery Block Settings
4.7. Cover Block Settings
4.8. Media&Text Block Settings
4.9. Insert Audio / Video / File & other Embeds
4.10. Columns Block
4.11. Button Block
4.12. Table Block
# Moving multiple blocks at the same time - Is it worth using the new WordPress block editor
1. Option bar settings
A handy set of the most-needed settings.
By clicking the ‘+’ (‘Add block’) button you add a new block. There are blocks available for all kinds of content: you can insert text, headings, images, lists, and lots more.
You may also like
Arrows help you navigate. Arrows make navigation easier when creating a post. You can undo your changes or move forward. This makes it easier to work with the document, so the next change in the new editor is a plus.
The ‘i’ icon allows you to see the outline of the document, its general structure composed of headings – a heading breakdown. Here you can also see the number of words, blocks or headers in the entire document. The structure of the document is very important both for the user and for SEO. Thanks to this function, you can easily check all the most important things in your article. This is brilliant.
The last icon in this section is ‘Block Navigation’. It shows the detailed structure of your document. By clicking on any of the elements – a specific paragraph or heading you will automatically go to the indicated block in the body of the post.
2. Publishing Options
Here you can publish or save a draft of your article. Here you can also click on the Preview button to see what your post looks like before publishing it.
By clicking the cog icon, it will hide the settings sidebar.
You will also find here ‘More tools and options’ button (the one with three dots). Here you will find many interesting options that will facilitate the use of the new editor.
I will discuss them briefly so that you know how you can facilitate your work using all the available options.
By clicking on the ‘Top Toolbar’, access to all block tools and documents will appear in one place, at the top of the page, instead of each block separately.
By selecting ‘Spotlight Mode’, we focus on one selected block. The rest of the content is brightened up, which does not disturb the editing of a specific element. In my opinion, it’s a nice solution. It will help to avoid overwhelming by a large number of blocks.
What else you can find in ‘More tools and options’: ‘Fullscreen Mode’ allows you to work in full-screen mode, without distractions. Here you can also copy all of your content by clicking ‘Copy All Content’– I admit that this function was missing from the previous editor.
Additional block editor settings allow you to view the Code editor (which is an HTML of your post with block editor PHP code).
And the last ‘Options’ that help you manage Document and Block Options Settings.
3. Document and Block Options Settings
3.1. Document settings
In the Document settings, you can set the visibility of your post. What options do you have? You can share it for everyone publicly, you can set your post as private or password-protected, so only those with the password can view this post. You can also schedule the publication of your post later, setting a specific date of its publication.
In this section you can also mark the post as sticky, you can change the post’s formats, add a category, tags, featured image, excerpt and set up Discussion. Most of these options were also available in the classic editor.
3.2. Block settings
Clicking any block will bring you to the block settings on the right side of the screen.
Depending on the type of block you choose, its settings will change. The nice thing is that they are always at hand, they are intuitive and give many more opportunities for changes than in the previous editor. You can simply change more than previously possible.
4. Content Area
This is the place where you put your title and content.
As mentioned before, the content is added using blocks. To create a blog post, you must put together a series of these small blocks. Let’s start with how to add a new block in your post.
# How to add a new block?
1. By clicking on the ‘plus’ icon.
The “plus” icons (“Add block”) are several on the page. To add a new block, you can click on the “+” icon in the upper left corner of the page or on the icon that is located on the left side of each block, visible after hovering over the mouse. The plus icon will also appear when you move to the center-top of any block. By clicking on it the new block will be inserted above.
2. By hitting enter.
Just start writing and hit enter to go to the next paragraph. After that, you can choose several frequently used block options (located in the right corner of the block)
3. By hitting ‘/’ on the keyboard.
You can get quick access to WordPress blocks by pressing the forward-slash ‘/’ on your keyboard. If you press ‘/’ the list of blocks will immediately appear on your screen, but there is one condition you must be in the new line.
Read about
Best Free WordPress Themes for Fashion Bloggers
But you can facilitate your work even more :).
Press ‘/’ and start typing the name of the block you want to insert, WordPress will automatically tell you the matching block names.
Let’s say you want to insert a gallery, so start typing: ‘/ g’ and WordPress will match the name you’re looking for already existing blocks.
Nothing simpler, right?
So let’s get to see a list of all blocks that you can use in a blog post, I will discuss them in detail below.
Common Blocks:
Formatting:
Layout Elements:
- Button
- Columns
- Media&Text
- More
- Page Break
- Separator
- Spacer
Widgets:
- Shortcode
- Archives
- Categories
- Latest Comments
- Latest Posts
Embeds:
Reusable:
4.1. The New Paragraph Block Settings
You may also like
By inserting the paragraph block into the content of your post, take a look at the available functions. Some of them are the same as in the classic WordPress editor, while others add new functionality.
The most interesting options are in the right sidebar. All block setting options will be displayed here. In the case of the paragraph block, you can change the size of the text, its color, background color, or even add a capital letter.
So many possibilities? wow 🙂
The icons visible on the left side of each block allow changing the display order of individual blocks. Each block can be moved to any place in the post.
By clicking the first button from the left you can change block type. The paragraph block can be changed at any time into a header, quote or list. The next few icons are standard editing tools, such as right/left-aligned text, bold or italic.
The 3-dots (‘More options’) icon hides additional options like: ‘Hide Block Settings’ – will hide the settings sidebar on the right, ‘Duplicate’ – copying block content, ‘Insert Before/After’– insert a new block before or after the current block, ‘Edit as HTML’– is used to writing in HTML code and ‘Remove Block’– removes the entire block.
What else is important here? Block editor allows you to save the configuration of a given block so that you can use it repeatedly. It’s a great solution to make work easier. Use the ‘Add to Reusable Block’ option and save your block’s settings to use it again elsewhere in your post.
# How to add Reusable Block in your blog post?
First, create your own custom block. Let it be, for example, a highlighted text that will catch the reader’s attention, such as above (dark background and large white letters). Add block by clicking the + icon, select Paragraph and write your text.
Then change the settings of the block on the right. I added a capital letter, changed the background color to dark and text color to white. Now all you have to do is save the settings.
Click the ‘More Options’ icon (the 3-dots icon) and select ‘Add Reusable Blocks’ from the list. Enter the name of your block, e.g. Black Highlighted Block and press save. In this way, your custom block has been saved and you can re-use it somewhere else in your post without having to change the settings again.
To insert a Reusable Block, click ‘Add Block’ (the ‘+’ icon), select ‘Reusable Block’ and search for the name you gave your custom block.
REMEMBER
Each block can be a reusable block.
4.2. Headings Block Settings
You may also like
Kinsta Review – Premium WordPress Hosting
To add a header in a block WordPress editor, simply add a header block. Click the ‘+’ icon and add the headline block by selecting ‘Heading’. You can also use the frequently used block options on the right side of the block by selecting ‘Add Heading’.
Another way to add a header is enter your text and then change the paragraph block to the header block. Click the icon on the left named ‘Change block type’ and select ‘Heading’.
You can also hit ‘/’ on your keyboard and start typing: ‘/ he’ and WordPress will match the name you’re looking for already existing blocks.
4.3. List Block Settings
To add an ordered or unordered list in WordPress, you can do exactly the same as adding other blocks. All the ways how to add a block in WordPress can be found above in this article.
Or you can start typing the number 1. on your keyboard and the editor will start the ordered list.
Using the icons you can always transform an ordered list into an unordered list and vice versa. The choice is yours.
By adding an ordered or unordered list in WordPress using blocks, select the List block.
4.4. Quotes, Pullquotes, and Verses Block Settings
You may also like
The quote and pullquote blocks allow you to highlight the quoted text. The Verse block distinguishes text built from lines and is great for haikus.
In this case, keep in mind that the concept of quotes, pull-quotes, and verses depends on the author of the theme. The author designing the theme determines the appearance of these elements.
This means that what you see in the WordPress panel by inserting quotes, pullquotes and verses can differ from what will appear on the page. This also may mean that some of the options available in the WordPress panel will not work on the site.
I think it’s nothing bad. Not every quotation or pullquote must have a dash on the side or on the top. It’s good that they look different on different pages. Let the author of the theme be creative.
Let’s see how it works on the example of our ‘BOYO’ free WordPress theme.
To add a Quote Block or Pullquote click ‘+’ icon, enter ‘/ q’ in the search field (or ‘/v’ if you looking for Verse) and select Quote or Pullquote (or Verse). Then enter the content and the author.
What you see on the WordPress panel screen looks something like this:
And what you see on the site will look like this:
In the Block Settings on the right, you will find options to change the appearance of these elements, like background color or display styles.
Remember
You can save your individual settings for each block by adding it to Reusable Blocks. How to save the block settings you will learn here.
4.5. Image Block Settings
Image Block and Gallery Block are already well known from the classic WordPress editor. They look similar also in the block editor.
Use the Image Block to insert an image. Choose an image from the media library or upload a file from your computer. Easy.
Then adjust it using the settings (basic settings at the top of the block, like algin left, right and center or block settings on the right).
In the right sidebar ( in the Block Settings) you have more settings. Here you can find Image settings like alternative text, image size, image dimensions, and link settings.
All these settings were available in the classic editor but in the block editor they are not hidden, they are on hand, which makes work easier.
Yes, but these are not all settings that are important when adding an image. To optimize the image in WordPress you need to add Caption and Image Title. Where to find them if they are not in the image block settings on the right?
If you want to learn more about image optimization in WordPress read the article: Optimization of images in WordPress. How you should do it and why it is so important
To add a Caption or to change the Title of the image, click the Edit Image icon (pencil icon above the image), make changes and then click Select or ‘x’.
You can also go to Media > Library, click on the image you are interested in, fill in the appropriate fields and leave the site by clicking ‘x’.
4.6. Gallery Block Settings
If you want to insert a gallery, use the Gallery Block.
Drag images, upload new ones or select files from your library and create a new gallery.
After creating the gallery, you can edit it:
- delete the photo by clicking on the ‘x’ icon in the upper right corner of the image,
- add a new image when you click ‘Add to Gallery’,
- delete the gallery by clicking ‘Cancel Gallery’,
- by clicking on the image you can also change Caption, Alt text, and Title.
Finally, press the ‘Insert gallery’ button to insert it into the post.
Thanks to Gallery Settings on the right you can add a link or choose how the images are displayed (number of columns).
4.7. Cover Block Settings
You may also like
How to add new users to the WordPress blog
The total novelty is two more blocks, namely Cover and Media & Text block.
The Cover Block gives you the option to add a text on the background of the image. This is a fairly well-known and commonly used option to highlight content. Hence, in my opinion, a big plus for this supplement.
4.8. Media & Text Block Settings
As I have mentioned, the next new feature is Media & Text block. It allows you to add text and photos side by side, with the possibility of freely changing the width of these areas.
It is very easy. Click the mouse on the image and a dot appears in the center of the block. You can move it left or right by enlarging or reducing a specific area.
Media & Text block gives you the option to change the settings of its elements. You can change the background color, add a capital letter, change the font size, etc.
All functions can be found in the block settings on the right.
By clicking on the image you will see media & text settings, and clicking on the text (which is an ordinary paragraph block) – you will see text settings.
4.9. Insert Audio, Video, File & other Embeds
To insert audio, video, etc. simply copy the URL and paste it into the editor. WordPress will automatically convert it to the embed block.
To see all available block settings, you have to click the mouse on the block area.
You can also add a block by clicking ‘+’ Add Block > Embeds and choose from the long list what you want to insert and then paste the URL. The new WordPress block editor has a lot of different Embed blocks.
If you want to insert audio or video that is not already on the network (the file has no URL) go to ‘+’ Add block > Common Blocks > select Audio, Video or File and upload your file.
4.10. Columns Block
Columns are another cool thing. Finally, you can easily insert text and any other available block in columns. In my opinion, this is a great solution. To add columns, enter ‘+’ Add block > Layout Elements > Columns. Now you can place other blocks in the new area, with the difference that they will be arranged in columns (the blocks in the block will be created).
Individual blocks can be moved and edited just as you always have.
4.11. Button Block
Finally, you can insert a button in the body of your post, without the need to use any page builders and overloading the page.
In the new WordPress block editor, you can easily place the button anywhere on the page. And what’s more, you can stylize it the way you want.
Not only that, if the choice of colors will be bad for the visually impaired WordPress will inform you about this, recommending a change of color or its dimming. Fantastic!!
You can find the Button Block in the Layout Elements section.
4.12. Table Block
The ability to insert tables is already standard in WordPress, both in the old – classic editor and in the new block editor.
The appearance of the tables depends on the template’s author. He designs their appearance.
Therefore, it is worth remembering that in the case of free themes available at wordpress.org, contact with the author is welcome. If you have any questions, suggestions for changes or suggestions for additions, please let the author know. Maybe it will introduce the changes you are asking for and will improve the product.
To add a table, in the new line write a forward slash ‘/’ and start writing the name of the block or just enter ‘+’ Add Block > Formatting> Table
Then select the number of columns and rows (do not worry, you can always add or remove it later), click the ‘Create’ button, fill in the fields and it’s ready. Easy…:). WordPress gives various table setting options on the page. These functions must also be adapted by the theme’s author to work properly.
In Block Options Settings on the right the only option of ‘Fixed width table cells’ is visible. It limits the width of all table cells. Selecting this option allows table cells to have equal width.
To delete or add a row or column, click on the icon and select one of the options.
# Moving multiple blocks at the same time
You can move individual blocks or even many blocks at the same time using the arrows on the left side of the block.
To move a group of blocks you must select them with the mouse. First click on the block (first or last in the group), then click again and hold the left mouse button and move it along the blocks you want to select. Use the arrows on the left to move the group.
Keyboard Shortcuts for Gutenberg Block Editor
The Gutenberg editor in WordPress comes with several keyboard shortcuts. Keyboard Shortcuts can save time and make the editing process more efficient. Here are some of the most useful keyboard shortcuts for Gutenberg:
- Ctrl + Shift + D (Windows) or Cmd + Shift + D (Mac): Duplicate the selected block
- Ctrl + Alt + T (Windows) or Cmd + Opt + T (Mac): Insert a new block before the selected block
- Ctrl + Alt + Y (Windows) or Cmd + Opt + Y (Mac): Insert a new block after the selected block
- CTRL + A (Windows) or Cmd + A (Mac): Selects all Text
- Shift + Left/Right (Windows) or Shift + Left/Right (Mac): Selects one letter to the right/left
- CTRL + Shift + Right/Left (Windows) or Cmd + Shift + Right/Left (Mac): Selects one word to the right/left
- CTRL + Shift + Up/Down (Windows) or Cmd + Shift + Up/Down (Mac): Selects one line above/below
These shortcuts can be beneficial when working with blocks in Gutenberg, especially for power users looking to streamline their workflow. By learning and memorizing these shortcuts, users can become more efficient and productive when editing content in WordPress
Is it worth using the new WordPress block editor – Gutenberg?
My answer is: yes, yes, yes.
If you are just starting your adventure with WordPress, it’s great because you’ve come to the moment when the WordPress editor is finally user-friendly. Clean, transparent simply wow.
If you’re already blogging and using a simple template, not stuffed with additional functions, also a new block editor should not cause you trouble on the site. Using it, you’ll get even a few extra things that your theme may not have supported earlier.
You may also like
How to write a new blog post in WordPress classic editor
However, there is one big ‘but’ that explains so many bad comments. If your site is stuffed, loaded with extras, shortcodes, drag and drop builders. If the theme you use in any way changes the current, classic WordPress editor (adds new elements, custom fields, meta boxes, etc.) then the new block editor may not work properly, even more, it may cause problems on the page.
In this case, be sure to install the Classic Editor plugin that will restore the previous (“classic”) WordPress editor and the “Edit Post” screen, and hide all the functions available in the new block editor (“Gutenberg”).
Before you update the page to the latest version of WordPress, ask the author of the theme (this also applies to plugins) if his product is compatible with the new WordPress block editor.
Maybe someday the author of your theme will modify it so that you can use the new block editor and appreciate its advantages. Maybe you will change the theme one day to feel the taste of what “Gutenberg” offers.
Common FAQs about Block Editor
You May Also Like: How To Upd
Is the Block Editor mobile-friendly?
Yes, the Block Editor is mobile-friendly and designed to work well on devices of all sizes. The interface is responsive and will adapt to the size of the device screen, so you can easily create and edit content on a desktop, tablet, or mobile device.
However, it’s worth noting that some more complex blocks, such as tables or columns, may be more challenging to work with on smaller screens. Previewing your content on different devices is always a good idea to ensure that it looks and functions as intended.
Is the Block Editor compatible with every theme?
Yes, the Block Editor is compatible with every WordPress theme. However, some themes may have their own styling and layout that can affect how the content appears in the editor. In most cases, the editor will work seamlessly with the theme. But there may be some instances where the content needs to be adjusted or customized to work with the theme’s styling. Additionally, some themes may have specific block styles or templates optimized for the Block Editor, while others may not. Testing how the Block Editor works with your theme is always a good idea before publishing your content.
Can I still use custom HTML and CSS in the Block Editor?
Yes, you can still use custom HTML and CSS in the Block Editor. While the Block Editor is designed to make it easier for users to create and format content without needing to use code, there may be cases where you want to add your own HTML or CSS to a block or a page.
To add custom HTML to a block, you can use the “Custom HTML” block. It allows you to add your own HTML code directly to the block. To add custom CSS to a block or a page, you can use the “Additional CSS” section of the WordPress Customizer. This section allows you to add custom CSS that will be applied to the entire website or specific pages or posts.
It’s important to note that while you can still use custom HTML and CSS in the Block Editor, it’s generally recommended to use the built-in block options as much as possible. As this will ensure that your content is accessible and responsive across different devices and screen sizes.
