In WordPress 5.0, the classic content editor was replaced with a brand new block editor, known as Gutenberg. Since then, several of our readers have asked us to create a comprehensive tutorial on how to use the Gutenberg block editor in WordPress.
WordPress block editor is a totally new and different way of creating content in WordPress. In this tutorial, we will show you how to use the new WordPress block editor and master it to create visually stunning blog posts and pages.
What’s The Difference Between Block Editor (Gutenberg) and Classic Editor?
Before we dive into the new editor, let’s first compare and understand the differences between Gutenberg Block Editor and the Classic Editor.
Here is what the classic editor in WordPress looked like:
If you upgrade to WordPress 5.0, then this is what the new block editor looks like:
As you can see, they are two completely different editors for creating content in WordPress.
The old classic editor was a text editor with formatting buttons very similar to Microsoft Word.
The new editor uses a totally different approach, called ‘Blocks’ (hence, the name Block Editor).
Blocks are content elements that you add to the edit screen to create content layouts. Each item you add to your post or page is a block.
You can add blocks for each paragraph, images, videos, galleries, audio, lists, and more. There are blocks for all common content elements and more can be added by WordPress plugins.
How is the new WordPress block editor better than the classic editor?
The new WordPress block editor offers a simple way to add different types of content to your posts and pages.
For example, previously if you wanted to add a table in your content, then you needed a separate table plugin.
With the new editor, you can simply add a table block, select your columns and rows, and start adding content.
You can move content elements up and down, edit them as individual blocks, and easily create media-rich content.
Most importantly, the new WordPress block editor is easy to use and learn.
This gives an immense advantage to all WordPress beginners who are just starting their first blog or building a DIY business website.
That being said, let’s take a look at how to use the new WordPress block editor like a pro to create great content.
Here is what we will cover in this Gutenberg tutorial:
- Using Gutenberg – The new WordPress block editor
- Creating a new blog post or page
- How to add a block in Gutenberg
- Working with blocks in the new editor
- Saving and reusing blocks in Gutenberg
- Publishing and post settings in Gutenberg
- Plugin settings in new editor
- Adding some common blocks in Gutenberg
- Exploring some new content blocks in Gutenberg
- Bonus tips on using Gutenberg like a pro
- Adding more blocks to Gutenberg Block Editor
- FAQs about Gutenberg
Ready? Let’s dive in.
Using Gutenberg – The New WordPress Block Editor
The block editor is designed to be intuitive and flexible. While it looks different than the old WordPress editor, it still does all the things that you were able to do in the classic editor.
Let’s start with covering the basic things that you did in the classic editor, and how they are done in the block editor.
Creating a New Blog Post or Page Using The Block Editor
You will start creating a new blog post or page like you normally would. Simply click on Posts » Add New menu in your WordPress admin. If you are creating a page, then go to Pages » Add New menu.
This will launch the new block editor.
How to Add a Block in Gutenberg
The first block of every post or page is the title.
After that, you can use the mouse to move below the title or press the tab key on your keyboard to move down and start writing.
By default, the next block is a paragraph block. This allows users to start writing right away.
However, if you want to add something different, then you can click on the add new block button on the top left corner of the editor, below an existing block, or on the left side of a block.
Clicking on the button will show the add block menu with a search bar on top and commonly used blocks below.
You can click on tabs to browse block categories or type in the keyword to quickly search for a block.
If you don’t want to use a mouse to click on the button, then you can use a keyboard shortcut by typing / to search and add a block.
Working with Blocks in The New Editor
Each block comes with its own toolbar which appears on top of the block. The buttons in the toolbar would change depending on the block you are editing.
For example, in this screenshot, we are working in a paragraph block which shows basic formatting buttons like: text alignment, bold, italic, insert-link, and strikethrough buttons.
Apart from the toolbar, each block can also have its own block settings which would appear in the right column of your edit screen.
You can move blocks up and down by simple drag and drop or by clicking the up and down buttons next to each block.
Saving and Reusing Blocks in Gutenberg
One of the best things about blocks is that they can be saved and reused individually. This is particularly helpful for bloggers who frequently need to add specific content snippets to their articles.
Simply click on the menu button located at the right corner of each block’s toolbar. From the menu, select ‘Add to reusable blocks’ option.
You will be asked to provide a name for this reusable block. Enter a name for your block and then click on the save button.
The block editor will now save the block as a reusable block.
Now that you have saved a block, let’s see how to add the reusable block into other WordPress posts and pages on your site.
Simply edit the post or page where you want to add the reusable block. From the post edit screen, click on the add block button.
You will find your saved block under the ‘Reusable’ tab. You can also find it by typing its name in the search bar.
You can take your mouse over it to see a quick preview of the block. Simply click on the block to insert it into your post or page.
All reusable blocks are stored in your WordPress database, and you can manage them by clicking on the ‘manage all reusable blocks’ link.
This will bring you to the block manager page. From here, you can edit or delete any of your reusable blocks. You can also export reusable blocks and use them on any other WordPress website.
Publishing and Managing Options in Gutenberg Block Editor
Each WordPress post contains a lot of metadata. This includes information like publish date, categories and tags, featured images, and more.
All these options are neatly placed in the right column on the editor screen.
Plugin Options in Gutenberg
WordPress plugins are able to take advantage of the block editor’s API to integrate their own settings within the edit screen.
Some popular plugins are already available as blocks. For example, WPForms, the best WordPress form builder plugin allows you to add forms into your content using a widget block.
Here is how Yoast SEO allows you to edit your SEO settings in the new editor:
WooCommerce also comes with widget blocks that you can easily add to any of your WordPress posts and pages.
Adding Some Common Blocks in New Editor
Basically, the new editor can do everything the classic editor did. However, you will be doing things way quicker and elegantly than before.
1. Adding an image in new WordPress editor
There is a ready to use image block in the new WordPress editor. Simply add the block and then upload an image file or select from the media library.
You can also drag and drop images from your computer, and the editor will automatically create an image block for it.
Once you have added an image, you will be able to see the block settings where you can add metadata for the image like alt text, size, and add a link to the image.
2. Adding a link in new block Editor
The block editor comes with several blocks where you can add text. Most commonly used one is the paragraph block which comes with an insert link button in the toolbar.
All other commonly used text blocks also include a link button in the toolbar.
You can also insert a link using the keyboard shortcut, which is Command + K for Mac and CTRL + K on Windows computers.
3. Adding an image gallery in Gutenberg
The gallery block works like the image block. You add it and then upload or select image files.
4. Adding shortcodes in WordPress posts using Gutenberg
All your shortcodes will work just like they did in the classic editor. You can simply add them to a paragraph block, or you can use the shortcode block.
Exploring Some New Content Blocks in Gutenberg
The Gutenberg editor promises to solve some long-standing usability issues in WordPress by introducing some new blocks.
Following are some of the favorites that we believe users will find immensely helpful.
1. Adding an image next to some text in WordPress
Using the old editor, many of our users were unable to place an image next to the text. You can do this now with the Media & Text block.
This simple block comes with two blocks placed side-by-side allowing you to easily add an image and add some text next to it.
2. Adding a button in WordPress posts and pages
Adding a button to your blog posts or pages was another annoyance in the classic editor. You either had to use a plugin that created a shortcode for the button, or you had to switch to HTML mode and write code.
Gutenberg comes with a button block that allows you to quickly add a button to any post or page.
You can add a link for your button, change colors, and choose from three button styles.
3. Adding beautiful cover images in blog posts and landing pages
Another cool feature that you may want to try is the ‘Cover’ block, which allows you to add cover images to your posts and pages.
A cover image is a wider image often used as a cover for a new section in a page or the beginning of a story. They look beautiful and allow you to create engaging content layouts.
Simply add a cover block and then upload the image you want to use. You can choose an overlay color for the cover or make it a fixed background image to create parallax effect when users scroll down the page.
4. Creating tables inside articles
The classic editor didn’t have a button to add tables into your WordPress posts. You had to use a plugin or create a table writing custom CSS and HTML.
New Gutenberg editor comes with a default Table block, which makes it super easy to add tables into your posts and pages. Simply add the block and then select the number of columns and rows you want to insert.
You can now go ahead and start adding data to table rows. You can always add more rows and columns if needed. There are also two basic style options available.
5. Creating multi-column content
Creating multi-column content was another issue that the classic editor didn’t handle at all. The block editor allows you to add Columns block, which basically adds two columns of paragraph blocks.
This columns block is quite flexible. You can add up to 6 columns in a row and even use other blocks inside each column.
Bonus Tips to Use Gutenberg like a Pro
Looking at the new block editor, you may be wondering whether you will be spending more time adding and adjusting blocks than creating actual content?
Well, the new editor is incredibly fast and even very basic usage for a few minutes will allow you to instantly add blocks without even thinking.
Pretty soon you will realize how much faster your workflow will become with this new approach.
For power users, here are some bonus tips to help you work even faster with the new WordPress editor.
1. Move the block toolbar to the top.
As you may have noticed in the screenshots that there is a toolbar that appears on top of every block. You can move this toolbar to the top of the editor.
Simply click on the three-dot button at the top right corner of the screen and then select the Top Toolbar option.
2. Use keyboard shortcuts
Gutenberg comes with several handy shortcuts that will make your workflow even better. The first one you should start using right away is the /.
Simply enter / and then start typing, and it will show you matching blocks that you can instantly add.
For more shortcuts, click on the three-dot menu on the top-right corner of your screen and then select ‘Keyboard Shortcuts’.
This will bring up a popup with the list of all the keyboard shortcuts that you can use. The list will have different shortcuts for Windows and Mac users.
3. Drag and drop media to automatically create media blocks
Gutenberg allows you to just drag and drop files anywhere on the screen and it will automatically create a block for you.
You can drop a single image or video file, and it will create the block for you. You can also drop multiple image files to create a gallery block.
4. Adding YouTube, Twitter, Facebook, Vimeo, and other embeds
Gutenberg introduces new embed blocks to the block editor. There is a block for all supported embed types including YouTube, Twitter, Facebook, and more.
However, you can just copy and paste the embed URL at any point, and it will automatically create a block for you.
For example, if you added a YouTube video URL, it will automatically create a YouTube embed block and display the video.
Adding More Blocks to Gutenberg Block Editor in WordPress
The new block editor in WordPress allows developers to create their own blocks. There are some awesome WordPress plugins offering block bundles for the new editor.
Here are a few of them:
Advanced Gutenberg comes with several blocks for popular content elements like WooCommerce product slider, testimonials, maps, counter, tabs, accordions, and more.
It also gives you advanced control on which users can access blocks based on their user roles. You can create user profiles and select which blocks they can add.
2. Stackable – Gutenberg Blocks
Stackable – Gutenberg Blocks is a collection of beautifully designed Gutenberg blocks that you can use on your website. It includes blocks for the container, posts, feature grid, accordion, image box, icon list, call to action, and more.
Editor Blocks is another neat collection of Gutenberg blocks that you can use. It comes with useful blocks like author profile, hero image, pricing table, brands, features, and more.
FAQs about Gutenberg – The New Block Editor in WordPress
Since Gutenberg became the new WordPress editor, we have been getting a lot of questions. Here are the answers to some of the most frequently asked questions about Gutenberg.
1. What happens to my older posts and pages? Can I still edit them?
Your old posts and pages are completely safe and unaffected by the Gutenberg. You can still edit them, and Gutenberg will automatically open them in a block containing the classic editor.
You can edit them inside the old editor, or you can convert older articles into blocks and use the new block editor.
2. Can I still keep using the old editor?
Yes, you can still keep using the old editor. Simply install and activate the Classic Editor plugin.
Upon activation, it will disable the block editor, and you will be able to continue using the classic editor.
Please note that Classic Editor will be supported until 2022.
3. What to do if the new editor doesn’t work with a plugin or theme I am using?
Project Gutenberg was under development for a long time. This gave plugin and theme authors plenty of time to test their code for compatibility.
However, there is still a chance that some plugins and themes may not work well with the new editor. In that case, you can install the classic editor plugin, request the developer to add Gutenberg support, or simply find an alternative plugin or theme.
4. How to learn more Gutenberg tips and tricks?
WPBeginner is the best place to learn about the new block editor in WordPress. We are the largest WordPress resource site on the internet.
We will be publishing new articles and updating our old resources to help you master the new block editor.
Meanwhile, if you have any questions, feel free to reach out to us by leaving a comment or by using the contact form on our website.
We hope this Gutenberg tutorial helped you learn how to use the new WordPress block editor. You may also want to see our complete WordPress performance guide for improving your website speed.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dear,
I have a problem with GUTENBERG block on wordpress. The block has suddenly become narrow, it is not all over the page and I do not have enough space. How to fix this problem?
To start, if it is not a block added by a plugin, you would want to reach out to your theme’s support to ensure this isn’t a styling error in the theme.
My blocks are all jumbled up when I try to create a new post and I can’t even write. Please help? I have everything updated so am not sure why it’s doing this. I am in Chrome.
There are a few possible reasons, to start with you could try a different browser to see if an addon or similar is causing a problem. If that doesn’t fix the block location you could check for a theme or plugin conflict using our guide here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
This new block system is awful.
I can’t do the basic of having a thumbnail image to the left and a h2 heading text centred inline at the top next to it with a h4 heading below.
This was the most basic of things to do with the old, superior system.
I have the illusion of more control but the reality is I have more options that achieve less.
I hope I can go back to classic style because this means i can’t add to my site anymore.
Just appalling.
It is a learning process for the new editor, for what you’re wanting you may want to try the column block to create that.
After reading the tutorial, and want to uninstall the plugin for classic editor. However, I have a post that was written in both classic and block–the fonts are different and it looks weird. When I switch to block view one of the blocks says “contains unexpected or invalid content”. And then asks to switch to HTML.
If I uninstall the plugin will I have to recreate this content?
You will likely need to set up the content that was modified to HTML to get your styling back but for the most part, the content should still be there.
is there a comprehensive list of the block symbols and what each one does?
Not at the moment, as plugins add blocks there will also be more blocks in your list but the blocks should state their name below their symbol to give you an idea on what they’re used for
This is a great intoduction! I’ve learned a lot..
However I can’t seem to find a guide on how to make a link block.
I need to link from my site to another site just using a block with a link.
The only option I get is to edit my permalink
Any ideas, you guys??
When you edit text in a paragraph block by highlighting it, you should be able to use the small new toolbar to add a link.
First started using WP V2.6 way back in 2008, and converted my own developed php sites, to use WP as a CMS. It’s certainly come a long way since then. While Gutenberg certainly seems to provide far better work-flow UI, which is packet with goodies, where once you either had to code yourself, or adopt a plugin, I must admit, even as seasoned WP user, the new interface has me stumped more often than not. It’s just another learning curve. So thanks for introduction, tips and guidance. I’ll use this inform to get handle on it! Cheers.
Thanks for sharing how you feel about Gutenberg, as it improves hopefully it should get easier to use
I was pleased to find I could insert a table using the block editor. I populated the cells with codes each of which I wanted to link to media content. However, I could not see any easy way to do this. I could have linked to the URL in each case but this is long-winded. Obviously it would be better to be able to add media content directly from the block editor – have I been stupid and missed something?
For the moment that is a limitation with the table block, the closest would be creating a column block to insert media blocks as another option.
Since I updated WordPress,I was alerted that “Connection lost” I disabled classic editor plugin before it was resolved. Please is there any way I can use the classic editor and disable the Block editor. Since the block came, my WordPress app always notify me of Generic error when I publish. what is the problem of the app too?
You would want to reach out to the app’s support and let them know about that issue for them to take a look into what could be the issue.
This was an incredibly helpful tutorial.
But I don’t think I saw a solution to my inability to center title text. Which is ridiculous.
But the side bar format options you get with Headings, which have a CENTER option disappears with Title and the overhead format bar, which with Images has a CENTER option too. also disappears. This is the most important and visible feature on a page and WordPress has seemed to go out of its way to prevent a very common formatting choice. Any help? Thanks again for your service to the WordPress community.
If you do not see the option to center the text then you should be able to click the three dots in the top right to enable the top toolbar. With that enabled, you should have the option to center the text in the paragraph block while the block is selected.
Is there an easy way to navigate between blocks on a page. For example if I am reading something in the first block on the page and next want to go to a block further down the page is there an easy way to jump to a different block or do you just have to scroll down the page?
For the moment you would want to scroll down the page
I loathe the new formatting of WP, so much that I am changing my blog host. This is not more user friendly. I used to be able to post easily, then add a video from my library. Now, it defaults to the new block format, which is dreadful, and which I can’t change, and when I frustratingly finish the blog post, I can’t add my video media. WP is always updating to make blogging a more infuriating experience. What a shame.
If you would like to stay on WordPress there is the option to revert to the classic editor using the method in our article here:
https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
Although this infuriating problem is universal to all software UIs. It often feels like as soon as you get up on to the flat part of the learning curve, they update the UI and throw another climb in your face.
I guess knowing how long to wait and how far to push design changes is the key to acceptance of progress among the user base. Indeed, Gutenberg is a tall step that some folks will not want to climb. But there were so many inscrutable legacy elements that they put off addressing for so long, it may have been unavoidable.
I’m struggling as well, especially dealing with older sites using lots of shortcodes, but hoping once I get over the hump, there will be a beautiful wide meadow on the other side.
I think it would be useful to have the ability to save a group of blocks as one and not just the individual blocks. That way, once you have your post page like you want it, it can be reused. This would be particularly useful for those of us who don’t really change the structure of each post and don’t really need that degree of flexibility.
That could certainly be something to look into for the future as Gutenberg improves
Hi! Is there a way to change the size of a cover block? I want it to be a half page width so I can have two next to each other but can’t find anything to support this.
Thank you!
You may want to use the column block for what it sounds like you’re wanting.
Is there an option to disable blocks and revert back to the old editor format?
Gutenberg Block sucks, and I don’t want to compromise the quality and speed of my work while they spend the next couple of years improving it.
You can revert to the classic editor using one of the plugins in our article here: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
The block is actually still rubbish. how to change block height??????
The block editor is slowly trying to improve, your block should change its height based on the content added in the block
I’m a total newb to WP and I am currently using the 2019 theme. All I’m trying to do is add an excerpt so that the full posts don’t show up on the home page. For the life of me I can’t figure out how to do this. I tried using the “excerpt” text box found in the right nav of the document editor. Any help here would be great. Thanks!
The theme may not support excerpts, you could try adding the more block or the read more depending on if you’re using the classic or block editor to see if that solved the issue
Danielle, maybe you want the “More” tool, listed under Layout Elements. It lets you add a “Continue reading” link after the first (or whichever) paragraph of a post.
Is there a way to reduce space between two blocks?
If you mean on the front end of your site, you would normally need to edit that using CSS
When I look at my paragraph block I don’t see the same options as you’ve shown here. I can’t change the color of a font and there are preset colors in the color settings under custom styles for background colors. Is there something I need to turn on to access this option in the paragraph block?
You shouldn’t need to enable anything, you may want to ensure a plugin or your theme isn’t removing these options
I inserted a hyperlink on a phrase and I want to change the font color for that phrase. how do I do that? please help
If only for that specific phrase, you would need to edit the text as HMTL to add styling to that phrase at the moment
Hello!
I created a column block with 3 columns. Added content and everything was distributed across the page width equally. Then I added a 4th column and now the column block no longer distributes across the entire page width. It’s seems like it has “squooshed” (sorry, can’t think of a better word right now), all 4 columns and shrunk the info as well. I tried various alignments for each individual column and it still would not spread the entire block back out. Hope this makes sense and hope you can help. Thanks!!
It sounds like what you added to your largest column has a minimum width that is not allowing the content to adjust which would be the root of your problem.
I’m struggling with the Gutenberg block editor. Heres a couple of questions but there will surely be many more to come.
How do I add a pdf document so it opens when I click a link? Used to create and highlight the link text then select “add media” and all worked fine.
When I try to add a link from within the paragraph block I no longer see a list of possible pages and posts so that I can chose. How do I get this list.
You would manually need to take the link from the document in your media library unless you wanted to embed it. In the paragraph block, there is the link button which is third from the right, as you type into it the dropdown should appear
This upgrade so stupid. I spent more time to write. Haiz
Learning a new interface can certainly be troublesome but as the interface improves it should slowly become better to use
I’ve searched and can’t find an applicable answer to my issue, so I’m hoping you can help me.
I upgraded to the new block system for our website this past week. I need to find and copy the url for one of our buttons (it’s a redirect to PayPal), but I can’t find the url anywhere.
There’s no “edit button” when I hover over the button in the block. I checked the html and couldn’t find it there, either – the only thing I could see were the image files for the button itself.
Clicking on the button live still redirects correctly, so I know the link is working – I just can’t find it.
Any advice?
Thanks!
Jennifer
When you select the block there should be the block settings on the right-hand side where you would find the link settings for where the button links to if it was transferred as an image. If it is a button block then there should be the url beneath the button where you can edit it.
Please help me resolve the “Update failed” issue when trying to publish my articles using the Gutenberg.
To start, you would want to go through the steps in our troubleshooting guide: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
For a temporary workaround, you could also enable the classic editor plugin and reach out to the support for Gutenberg.
How to use the new advanced Css option. I Tried to put some code there, but It´s not run.
That is for adding a class to the object, you would want to take a look at our explanation of CSS to understand classes better: https://www.wpbeginner.com/glossary/css/
On the top right of my block edit page, it doesn’t say publish. The button says update. When I click that button it says page has updated but when I go take a look at it on my website it hasn’t changed. Did something not upgrade correctly to have that button not say publish?
You may want to check any caching that you have on your site that could be causing the problem.
How do I go back to the old version? There was nothing wrong with it, and this version does not add anything. In fact, it makes it MUCH more confusing. It is NOT user-friendly, and it has been very frustrating. Upgrades should only be made to improve something, not just for the sake of changing.
The new editor was created to help those new to WordPress have less of a barrier to entry. For those who prefer the old editor, there is the Classic Editor plugin and we explain that plugin in our article here: https://www.wpbeginner.com/plugins/how-to-disable-gutenberg-and-keep-the-classic-editor-in-wordpress/
Good article.
Thank you
How do I change the font of text in blocks?
For setting up your site’s font, you would want to take a look at our article here: https://www.wpbeginner.com/wp-themes/how-to-add-custom-fonts-in-wordpress/
Time consuming, if you go to WP you will see very negative comments
For me the solution was to activate a plugin called “Disable Gutenberg”
I understand there´s a learning curve…but I pass..sorry
If you’re not ready to use the Gutenberg editor then using a plugin like that is certainly understandable.
I am a complete novice in website writing and decided to use WP because it seemed to have good support. At that time I did not realise WPbeginner existed but wow! now that I’ve found various guides from wpbeginner I am convinced that I made the right choice. Specifically, this guide on the new editor is fantastic. Even its existence helped me out of a deep hole: I have installed WP on my pc so I can play with it before starting my first real website but got stumped because when I got to the stage of trying to edit a page there was no sign of the editor shown in the “Getting Started with WordPress” guide by iThemes. I spent hours trying to see if my download to my pc was corrupted or if I was missing something simple – now I know the classic editor has been replaced! Sorry for the long post but a real thank you for this guide and the several other documents I have found from WPbeginner.
Thank you, glad our site and articles could help you get up and running with WordPress
everytime i try to publish ..all i get is Auto Draft.
cant understand what is going on
For a starting point, you may want to go through our troubleshooting article here: https://www.wpbeginner.com/beginners-guide/beginners-guide-to-troubleshooting-wordpress-errors-step-by-step/
Thanks for a great article! This really helped me make the transition. I was hesitant to switch, but now that I’ve played around for a while I like the new block editor.
You’re welcome, glad our article could ease the transition
Hi, thanks for this, was really helpful.
May I ask, for adding a button block, I’m currently unable to add one such that it opens up in a new tab. There used to be an easy checkbox for this. Do you know how to do so?
2. Adding a button in WordPress posts and pages
Thanks!
When adding a link you should have an option with three dots that you can click to have the open in new tab option again.
There is a button block you can use to add a button to your posts and pages
How do I use Grammarly app with this new editor, because I cannot see Grammarly popping down there to correct my mistakes or even show me my mistakes? Thank you.
Once you reach the second line in a paragraph block the Grammarly check should appear in the bottom corner. If it’s not appearing you could reach out to Grammarly’s support and they should be able to help ensure it appears correctly in your editor.
Hi, as a brandnew beginner, I took two courses on WordPress 5 by Morten on Lynd. Gutenberg is easy to use. However, I still don’t know how to build header and footer with Gutenberg. I need a full width color background, onto which I add several buttons such as “about,” “services,” “products,” etc. Can you help?
Headers and footers styling is normally handled from your theme, you would either need knowledge of HTML, CSS, and PHP or you could take a look at our article here: https://www.wpbeginner.com/wp-themes/how-to-easily-create-a-custom-wordpress-theme/
Do you know if they have been able to fix the scrolling issue in the block editor? It is really annoying that you can’t scroll to the bottom of the block section without having to go to the Settings section and scroll there. I have googled and googled some more, and I am not finding a solution. Thanks so much!
Unless I hear otherwise, the error shouldn’t be an issue but you could reach out to the WordPress.org support for if the specific error you are running into was resolved.
Come on, folks. These are not the people who created WordPress. These are the people who are kind enough to help you adjust to the blocks. How many times do they need to tell you to install the Classic Editor plugin if you don’t like blocks? I don’t know if I like blocks or not, but I feel more confident in testing them after reading this introduction. Thank You!
Glad our article could help
Hi, after I installed WordPress 5.1 , using Gutenberg if go to write text, on top of first word one line will come . I am not getting what’s issue. Can tell how to solve this
Have you tried disabling all of your plugins to see if this could be a plugin specific issue?
I’ve found no way to wrap text around images. Am I missing something or is this not as popular as I thought?
You would want to use the Media&Text block to have your text wrap with the block editor
Is there a way to still code in html in the block editor?
I ask this because the block editor inserted an extra wide space between 2 lines which I did not want. I could and did use the classic editor’s text option to get rid of the extra space.
Yes, you can use the ellipses in the top right to swap to HTML or you could use a classic block if you only wanted to edit a specific section in HTML
I grudgingly started using this new block mentality, and I wasn’t happy about it. I am glad I found your article, though, because it has made navigating this new concept much easier.
Wondering if anyone has had this experience though. While adding tags to my Document, I will add the tags, hit enter and the little box doesn’t expand at all. I have NO idea how to see my tags that I have entered.
I use WooThemes – Canvas
Very frustrating experience right now.
If you have not already, you may want to try disabling your plugins and/or swapping themes to see if it is a conflict with one of those that is preventing the auto-expanding tag section from displaying properly.
Maybe one day I will figure out how to use this, but at the moment it seems impossible. I have used over a dozen word processors, and various web editors, but that experience is not helping me now.
I would like to indent a number of paragraphs. Sounds simple, but I have not found a way to do it. What is the use of having a paragraph block that can’t indent?
Last time I gave up on putting in a table and went back to editing HTML in the old system.
While the paragraph block does not have an indent option at the moment, should you use the block editor again you could add an indent using the Classic block
So the concept of allocating a Template to a new page is gone?
As far as I can see, when you are making a new page ‘from blocks’ there is not way to select a template that you may have constructed in the old way? (i.e. the drop down for templates is no where to be seen).
You would want to check under page attributes to set the template for a page if your current theme has templates.
How do you increase font size in a list block? I have looked everywhere. I am new to WordPress and find it not very user friendly but I’m trying to get the hang of it. I need to be able to increase list block font size. Please help.
You would need to manually add CSS to change that font size or you could use a plugin such as CSS Hero:
https://www.wpbeginner.com/plugins/css-hero-review-wordpress-design-customization-made-easy/
For how to find the CSS you need to change you can use inspect element which we explain how to use in our article here: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/
I just installed the new Word Press (blocks) and I am having trouble because Ido the title block fine, then whatever I type for the second block appears duplicated when I do the preview: I see that block under the title TWICE in the post. What am I doing wrong?
You may want to check with your theme’s support to ensure that this is not a style of your specific theme
I’m trying to navigate the new Block editor. I’m simply looking for the “read more” button that you use to be able to simply click a button on the Classic editor and it would place the “read more” button to divide the text on the home page.
It was renamed into the More block
How do I increase the size of my block, I have read through the guide several times. You did not address that.
If I want to increase the writings in a block, how do I do that, and is it possible to join two block?
It would depend on what you’re trying to change. You can copy and paste the content then remove the block you moved the content from but there is not a simple merge button at the moment. If you’re looking for the font size, that is normally governed by your theme’s CSS
I can’t figure out how to do a “read more” option so that the first few sentences of a blog show up as a preview on the main blog page. Any insight? Also is there a way to change the colour of the font of hyperlink? Thanks!!
You would want to add the More block to use the read more function. For the hyperlink color, you would want to modify the CSS, you can test the color changes you want to make using inspect element then copy the custom CSS to your Appearance>Customize>Additional CSS section: https://www.wpbeginner.com/wp-tutorials/basics-of-inspect-element-with-your-wordpress-site/