<\/div>\n

The vertical dots allows you to view the editor in Visual or Code editor views. It also controls the Toolbar behavior in the block. The toolbar option shows the pop-up menu in the block if it’s fixed to the block. If it’s not, then options appear in the top bar of page\/post that you’re editing. You can see the difference in the editor’s appearance per the screenshot below:<\/p>\n\n\n\n
\n
$\"\"$ <\/a>
Code editor<\/figcaption><\/figure><\/p><\/td>\n
\n
$\"\"$ <\/a>
Visual Editor<\/figcaption><\/figure><\/p><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n
<\/p>\n
<\/p>\n
The Different Blocks Used in the Gutenberg Editor<\/h3>\n
$\"\"$ <\/a><\/p>\n
<\/p>\n
Gutenberg’s visual interface works on a system of blocks. You can move the block up or down through your existing content. You can also edit the contents of the block. When you add a block you can select blocks based on the most recently selected, the entire block list, and content embeds from different popular social media websites.<\/p>\n
The blocks you can select include three major types:<\/p>\n
\n
Common Blocks<\/li>\n
Formatting Blocks<\/li>\n
Layout Blocks<\/li>\n<\/ul>\n
<\/p>\n
You can also add Widgets or select different types of embed options. A few examples of the embed choices include:<\/p>\n
\n
Facebook<\/li>\n
Twitter<\/li>\n
Instagram<\/li>\n
YouTube<\/li>\n<\/ul>\n
After you have added your blocks and typed in text or added visual content, you can easily move them up and down using the arrows on the side of the block:<\/p>\n
$\"\"$ <\/a><\/p>\n
How to Use the Gutenberg Editor to add content<\/h2>\n
<\/div>\n
The new Gutenberg editor is designed to make adding and editing content an easy experience. When you start to add content you start with a title and then start adding your content from there. Here the basic steps to adding content in the Gutenberg Editor<\/div>\n
<\/div>\n
\n
Login to your WordPress Administrator Dashboard<\/a>.<\/li>\n
$\"\"$ <\/a>Go to Posts or Pages and click on Add New<\/b>.\n
<\/div>\n<\/li>\n
$\"\"$ <\/a>Where it says Add Title<\/strong>, type in a title for your content.\n
<\/div>\n<\/li>\n
$\"\"$ <\/a>Select a block for the content. You can find the add option by hovering over the bottom center point of the block. You will see a plus sign in a circle. In this example, we are selecting an image.\n
<\/div>\n<\/li>\n
$\"\"$ <\/a>After selecting the image block you will need to select an image.\n
<\/div>\n<\/li>\n
$\"\"$ <\/a>Once the image selection is complete you can continue to add other content until you are finished. When the post\/page is complete, click on Update<\/b> or Publish<\/b> in the top right corner. Note: Although your content is autosaved, it would still be wise to occasionally save a draft of your work when you are working on lengthy post or page.<\/em>\n
<\/div>\n<\/li>\n<\/ol>\n
<\/div>\n
\n
\n<\/div>\n
<\/div>\n
This is just a quick overview and introduction to the new Gutenberg editor. The Gutenberg Project strives to provide a simple but complete interface that can handle all of the tasks of creating content for your WordPress site. Whether you are a visual designer or prefer to work directly with the code, this is the WordPress editor you will be using when you use WordPress for your website projects.<\/div>\n
<\/div>\n<\/body><\/html>\n","protected":false},"excerpt":{"rendered":"
The continual changes within the WordPress interface occasionally lead to a major change that affects not only what you see but also how you use the WordPress application. One of the core modules of WordPress is the editor. It is a flavor of the venerable TinyMCE editor that includes all of the base functions for creating […]<\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"bgseo_title":"What is the Gutenberg editor - Introduction","bgseo_description":"The Gutenberg editor is the eventual successor to the current WordPress editor for pages and posts. We will introduce the editor in this tutorial.","bgseo_robots_index":"index","bgseo_robots_follow":"follow","footnotes":""},"categories":[151],"tags":[691],"class_list":["post-11557","post","type-post","status-publish","format-standard","hentry","category-wordpress-tutorials","tag-gutenberg"],"acf":[],"_links":{"self":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11557","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/comments?post=11557"}],"version-history":[{"count":25,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11557\/revisions"}],"predecessor-version":[{"id":17903,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/posts\/11557\/revisions\/17903"}],"wp:attachment":[{"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/media?parent=11557"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/categories?post=11557"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.boldgrid.com\/support\/wp-json\/wp\/v2\/tags?post=11557"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

<\/h2>\n

Working with the Gutenberg Interface<\/h3>\nThe Gutenberg editor is made for creating posts and pages. When you create a new post you will see the interface starting with the title. There will also be a menu bar on the right and an interface at the top.<\/p>\n