Gutenberg Block
Ariel Wascom
By clicking on a block, you can use the up and down arrows to rearrange your blocks at will. You can also click on the six dots to the left to use the drag-and-drop function and move your block to somewhere else on the page:
Productivity tip: Gutenberg includes a number of keyboard shortcuts that can help you quickly delete blocks or insert new blocks. Type Shift + Alt + H to view all the Gutenberg keyboard shortcuts.
Ready to create a WordPress blog? You've made an outstanding choice! Learning how to start a blog can be your path to an exciting new adventure. Lucky for you, WordPress is an excellent tool you can use for that. It's free, user-friendly, powerful, ...
In this tutorial, we will lead you through all the steps you need to take in order to start a personal blog that is cheap, effective, good-looking, and that will set you up for future success. This is your ultimate guide to a personal WordPress blog ...
Even though it might not seem like so at first, knowing how to make a website from scratch is a must-have skill for today's small business owners. The following guide takes you by the hand and shows you all the steps to getting the job done with ...
The web host you choose to power your WordPress site plays a key role in its speed and performance. However, with so many claiming to offer the fastest WordPress hosting out there, how do you decide which company to use? In this post, we'll look at ...
Installing XAMPP and WordPress to set up a local development site is a smart move when you need a private space for testing or experimenting. XAMPP allows you to host a website right from your own Windows PC. Once installed, launching a new ...
The Block Editor is a modern paradigm for WordPress site building and publishing. It uses a modular system of blocks to compose and format content and is designed to create rich and flexible layouts for websites and digital products.
A block is a discrete element such as a Paragraph, Heading, Media, or Embed. Each block is treated as a separate element with individual editing and format controls. When all these components are pieced together, they make up the content of the page or post, which is then stored in the WordPress database.
Besides offering an enhanced editing experience through visual content creation tools, the Block Editor is also a powerful developer platform with a rich feature set of APIs that allow it to be manipulated and extended in countless ways.
How-to Guides: Here, you can build on what you learned in the Getting Started section and learn how to solve particular problems. You will also find tutorials and example code to reuse in your own projects, such as working with WordPress data or Curating the Editor Experience.
Contributor Guide: Gutenberg is open-source software, and everyone is welcome to contribute to the project. This section details how to contribute, whether with code, design, documentation, or in some other way.
After reading this post about the release of the first Gutenberg-compatible ACF version (beta) -5-8-introducing-acf-blocks-for-gutenberg/, I played with it and tried to reduce the work to create a custom block to the minimum.
I mostly just wanted to post here because no one else has. What you are doing is awesome, for I see this work flow taking over in my agency as we move from using flexible ACF fields to ACF Blocks. Keep up the good work, in the coming months we will be trying this out and working this or a similar process into production. Thank you for a great starting point.
Combining several answers into an approach with WP_Query, this is a function that can be reused all over the place. Place it in functions.php and call it from templates with get_reusable_block('block-title');.
Probably a long shot but is there any way to make the WYSIWYG block work like the Gutenberg editor instead of the Classic editor? I know you can put ACF blocks in the main editor, but can you put Gutenberg blocks into the ACF WYSIWYG?
And on top of that I need to add fairly complex queries to show the information and without a lot of extra effort it would be impossible to search the content in those blocks to add the needed search filters. Building blocks that also save meta data for searching or using a page builder that requires me to do extra work to extract and save meta data for searching seems like a huge waste of time.
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.
You will start creating a new blog post or page like you normally would. Simply click on the Posts Add New Post menu in your WordPress admin. If you are creating a page, then go to the Pages Add New menu instead.
For example, in the screenshot below, we are working on a Paragraph block that shows basic formatting buttons like text alignment, bold, italic, insert link, and more options that are available under the three-dot menu.
One of the best things about using blocks is that they can be saved and reused. This is particularly helpful for website owners and bloggers who frequently need to add specific content snippets to their articles or pages.
Adding a button to your blog posts or pages was another annoyance in the old 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.
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 a parallax effect when users scroll down the page.
Since Gutenberg became the default WordPress editor, we have been getting a lot of questions about how to use it. Here are the answers to some of the most frequently asked questions about the block editor.
However, there is still a chance that some plugins and themes may not work well with the block 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.
If you are running into issues with the WordPress block editor, then we have created a quick troubleshooting guide with all the common WordPress block editor problems that users encounter and how to fix them.
We hope this Gutenberg tutorial helped you learn how to use the WordPress block editor. You may also want to see our complete WordPress performance guide for improving your website speed or check out our comparison of the best email marketing services for small businesses.
Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.
Hey WPBeginner readers,
Did you know you can win exciting prizes by commenting on WPBeginner?
Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
You can get more details about the contest from here.
Start sharing your thoughts below to stand a chance to win!
This is an immensely useful article. I thought I knew block editor well but this article gave me another perspective on how to better use it. I learned for the first time the existence block editor API which can be utilise in plugin development, the grouping of block to create pattern. very useful article.
Let me take this comment as an opportunity to appreciate the grand old classic editor
which has ruled the wordpress space ever since the wordpress was launched.
Now since we have transitioned to the new edition of gutenburg editor and using it
for making posts and pages, I often miss that old classic editor for its simplicity and ease of use.
I remember recommending my non developer friends to write and post content on
my news website without any training or guide. They used to get familiar with it as soon
as they start using it.
Thanks for this detailed article for steps using gutenburg blocks.
There are a few possible reasons, if your theme adds many customizations to the design then it could be some confusion from your theme but if you mean your changes are not being applied then it is likely a caching issue.
actually I am using classic editor which is great for me.
butvi found that some plugins are not working with it.
so, I had to change to block editor which is new for me.
I am following the video step by step which make it easy
thank you
You would want to be sure your WordPress site is updated to the most recent version to see it. You would also would want to check if the classic editor plugin is active on your site for why the block editor is not your default editor.
Finally decided to learn the block editor. Wow! Why did I wait so long? I read this article, then started a new draft page using block editor. So easy. Once I get used to it and learn more writing new pages and post will be so easy and fun! To those still using classic editor, you really need to start learning and using block editor.
I did not see something I have used often. Example is I have paragraph block where I describe a scripture reference. Then I make another paragraph block to contain the scripture. I would like to indent the scripture block. How would I do that?
That would be in the document settings, or you could check under the three verticle dots in the top right under options. Our tutorials are for self hosted installations so should the option not be available you would want to reach out to their support.
That would be due to your site being on WordPress.com, you are limited to their options for the classic editor as there are differences in WordPress.com and WordPress.org:
-guide/self-hosted-wordpress-org-vs-free-wordpress-com-infograph/