WordPress 5.0 introduced Gutenberg as its default editor. This provided a new interface and experience for creating content through the use of blocks.
The platform developers took the concept of block editing to the next level by introducing the . Essentially, the block editor now replaces the WordPress Customizer as the primary tool for editing the theme and appearance of the site.
This article will show you how to use the new WordPress block editor, Gutenberg, for full editing of your site.
What is Gutenberg in WordPress?
Gutenberg is the new WordPress editor that comes pre-installed starting with WordPress 5.0. This introduces a new approach to the content creation process, which gives you more control over the visual aspects of your content.
How does the WordPress Gutenberg editor work?
The WordPress Gutenberg editor uses the concept of content blocks to add and edit various elements in posts and pages, such as text, images, files, and links. The previous default WordPress editor, , focused on text editing.
professional tip
While the new block editor comes pre-installed as of WordPress 5.0, users with older versions of WordPress can also use it by installing the Gutenberg plugin. However, we recommend updating the core WordPress software to the latest version.
After the WordPress 5.9 update, the Gutenberg editor works as more than just a simple content editor. This includes all aspects of site customization, such as editing themes and creating pages or posts.
The new editor also provides a better visual representation of the page. This feature makes it more like a page builder than the previous WordPress editor.
It breaks down website elements like header, text, and images into blocks, making them more manageable and customizable.
By selecting any block, you can customize it individually. For example, you can set a different background color or font without affecting other blocks or elements. This extends the customization options and flexibility in site editing.
The new interface is easy to use, allowing new users to quickly. All blocks are listed in a dropdown list based on their structure. Adjusting their position on the site is easy, as you just need to drag and drop the individual blocks in the list view.
Users can add blocks by clicking the button plus (+) in the top bar or in the page preview.
Each block has different layout tools and settings. For example, paragraph blocks come with tools to change color and font. On the other hand, the image block has tools to add alt text and adjust the dimensions of the image.
The new full site editing approach also reduces the need for programming and . The Gutenberg block editor introduces the global styles panel, which controls the file theme.json. This allows users to change the styles of the entire site. With it you can, for example, add custom colors and change fonts directly from the editor.
Using the Gutenberg block editor
The WordPress Gutenberg editor interface can be confusing for a new user or anyone who is used to working with the classic editor. Here are some guides on how to build your website and manage content through the Gutenberg editor.
1. Add a new page or blog post
Creating content for your website begins by adding a new post or page with the Gutenberg block editor.
A blog entry has a publication date and generally appears in reverse chronological order on the site. Instead, a page is static and provides timeless information, like the pages About, Privacy Policy Y Contact.
If you intend to create a new entry, you must access Tickets-> Add new on your WordPress dashboard.
Once you’re in the default content editor, you’ll see a blank draft with placeholders for the post title and first paragraph block. Add the post title and new blocks to create the content.
You can find the post settings in the right sidebar. This is where you configure the author, template, permalink, and categories for the template.
Creating a new page is a similar process. go to pages -> Add new, and you will see the same interface as the one used to create a post. The only difference is the configuration of page attributes in the right sidebar, which specifies the parent page and page order. Also, there are no category or tag settings for the pages either.
2. Global styles interface
The current WordPress editor has a global styles interface to customize the colors, typography and layout of the entire site without programming.
However, this feature is only available when using a block-based theme in WordPress 5.9, including block-based ones. Go to the site editor by navigating to Appearance -> Editor and click on the black and white icon in the upper right corner of the screen. The global styles interface will appear on the right side.
There will be four aspects to modify: typography, colors, provision Y blocks.
In the settings of typographyyou can manage the font family, size, line height, and appearance for text and links.
In the settings of colorsyou will find two main elements: The pallet Y The elements. The color palette shows the colors available for website elements: the theme color palette and default colors can be used throughout the site. The custom color picker allows you to add more colors to the palette.
The elements section for color customization comprises three aspects: the background, the text, and the links. Click on any of these to customize its color.
The next element for global styles is the provision. Essentially, this allows you to specify the padding for each element of the website.
The last element in the global styles interface is the blocks, which allows you to customize a specific block. By selecting this option, you will see a list of available blocks. Choose any of them to start customizing. Depending on the block, you can modify its design, color, typography or all of these.
3. Template editing mode
The new WordPress block editor includes a template editing mode. Most block-based themes support this feature, so with the block editor you can edit theme templates for posts, pages or 404 pages. You can even create a new template.
Go to the site editor by navigating to Appearance -> Editor. Open the drop-down navigation sidebar by clicking the logo wordpress in the upper left corner of the screen and selecting Templates. You should see the list of available templates and the button Add new in the upper right corner.
4. Insert a block pattern
You can use the built-in block patterns if you don’t have time to customize each block. Click the button plus (+) at the top of the editor screen and select the tab patterns to find various pre-built block patterns in different styles.
Click the dropdown menu to browse block patterns for buttons, columns, galleries, and headers.
5. Add a new block
Blocks are the main feature of the Gutenberg editor. Each block houses one element, making it more accessible to create custom content layouts for your posts and pages.
If you add a new post or page, the WordPress block editor sets a paragraph block as the default content block. This makes it easier to start creating content.
To add more blocks to the content, tap enter and the editor will automatically add another paragraph block, which is convenient when writing long text.
However, you may want to add other block elements to the text. To do so, click the button plus (+) in the upper left corner of the screen and choose or search for the desired block.
By clicking on the button plus In the content area, a popup window with six recently used blocks will be displayed, making it easy to insert a frequently used block. Alternatively, you can use the search bar to find a specific block.
6. Widget insertion
They are now built into the Gutenberg editor, so adding one of these is the same as adding other blocks.
In the previous version of WordPress core, you needed to use the widget specific page and theme customizer to manage them.
Click the button plus (+) at the top of the editor screen and select the tab blocks. Scroll down to the section widgets to find all available blocks for widgets.
7. Work with blocks
Understanding how to work with Gutenberg blocks will improve your experience as a blogger and speed up your workflow.
The Gutenberg editor provides a toolbar for formatting and aligning elements just like the classic editor. This appears above the currently active block and consists of different tools depending on the type of block.
For example, the paragraph block will have options to make the text bold, italicize, and adjust its alignment.
On the other hand, the image block will allow you to change the alignment of the image and switch to a different type of block.
The arrows upwards Y down they allow you to move the block to rearrange the order. You can also click the icon list view at the top of the screen, this will display all the content blocks in the order they appear on the page.
Drag and drop any block to move it to a new position in the list. This feature makes it easier to work with complex content structures, especially if there are multiple nested blocks.
Each block also has different layout tools depending on its type. Click the button Settings in the upper right corner of the screen and a sidebar will appear on the right side.
For example, the image block has a field for entering alt text, while the navigation block offers layout and display settings.
It is also possible to add blocks within blocks to create a unique content structure. This works with…
Facebook Comments
Disqus