{"id":7862,"date":"2018-12-13T15:13:54","date_gmt":"2018-12-13T14:13:54","guid":{"rendered":"https:\/\/www.biteno.com\/en\/?p=7862"},"modified":"2023-11-16T18:33:06","modified_gmt":"2023-11-16T17:33:06","slug":"an-overview-the-gutenberg-editor-for-wordpress","status":"publish","type":"post","link":"https:\/\/www.biteno.com\/en\/an-overview-the-gutenberg-editor-for-wordpress\/","title":{"rendered":"An Overview: the Gutenberg Editor for WordPress"},"content":{"rendered":"

Readers who are familiar with WordPress<\/a> have gotten used to using the platform’s TinyMCE editor<\/strong>.\u00a0 Some of them love it, and some of them hate it.\u00a0 What all WordPress users have in common when it comes to this editor is that they will have to come to terms with the fact that it is on its way out<\/strong>.\u00a0The Gutenberg editor for WordPress<\/a>, designed to replace the TinyMCE editor, is already stirring up discussion in the forms of both criticism and praise<\/strong>.\u00a0 Regardless of how readers feel about making the switch, though, they will have to get used to the new editor, as it is here to stay.<\/p>\n

Primary Changes<\/h2>\n

The Gutenberg editor will completely change how the platform’s users interact<\/strong> with it by switching the editing process<\/strong> over to a block-based approach<\/strong>.\u00a0 Its long-term implementation goal is to offer full-site customization<\/strong>, where the TinyMCE editor offered only page template editing.
\nUnlike the TinyMCE editor, which featured a single edit field, the Gutenberg editor will feature many individual blocks<\/strong>.\u00a0 These can be composed of text, images, videos, buttons, widgets, tablets, or other features and can be manipulated on an individual basis.\u00a0 Since each of these blocks is separate from the others, users can expect to have far more control over the editing process<\/strong>.<\/p>\n

Using Themes<\/h2>\n

The Gutenberg editor is designed to work with WordPress themes<\/strong> for maximum stylistic control.\u00a0 These themes add built-in styling<\/strong> to its component blocks and are added in real-time<\/a> to the editor itself, making it easier than ever to build custom content<\/strong>.\u00a0 Some themes will offer pre-made templates featuring multiple blocks.<\/p>\n

Building a Layout<\/h2>\n

\"\"Since editing pages in Gutenberg requires the creation of separate blocks<\/strong>, it makes sense to start by learning how to add new blocks.\u00a0 This can be done without much hassle at all thanks to the editor’s user-friendly design<\/strong>. Users can simply click the +Plus icon<\/strong> and select from Common Blocks, Formatting, Layout Elements, Widgets, and Embeds to add a block that meets their needs.<\/p>\n

To create a well-integrated custom page, start with the text blocks<\/strong> and build the layout from there.\u00a0 To add a non-text block to the page, just hover over the area where the new block will be placed and click the +Plus icon again.\u00a0 Check out all of the block options available to determine which will be the best fit for the content being added to the page.<\/p>\n

\"\"Embedding Videos<\/h3>\n

Given that on-site videos are a powerful tool for content creators and marketers alike, it is important that users familiarize themselves with the Embeds blocks as soon as possible. \u00a0Thankfully, Gutenberg makes this process extremely easy.\u00a0 Inserting a YouTube video<\/strong> requires users to simply add a YouTube block from the Embeds tab, enter the video’s URL, and click Embed<\/strong>.<\/p>\n

Creating Different Columns<\/h3>\n

Gutenberg’s experimental columns feature<\/strong> allows users to create multiple columns for further customization.\u00a0 This can be accomplished by clicking on the Columns block in the Layout Elements section.\u00a0 Other blocks can even be inserted into the column blocks, making it easier than ever for page creators to control where their images, videos, quotes, and other elements<\/strong> appear on their pages.<\/p>\n

Customizing Blocks<\/h3>\n

\"\"<\/p>\n

The content of each block can be edited from within the actual body of the Gutenberg editor.\u00a0 Basic text, styling, and alignment<\/strong> can be manipulated from the menu bar that appears when users hover over a particular block<\/strong>.\u00a0 Advanced styling, on the other hand, must be controlled from the Block settings tab<\/strong>.
\nOnce several blocks have been created and customized, their placement can be changed via two different paths.\u00a0 Users can use the Up and Down arrows<\/strong> while hovering over blocks to move them in the correct direction or they can hover over the left or right sides of their blocks and use the editor’s drag-and-drop feature.<\/p>\n

Editing Source Code<\/h3>\n

The Gutenberg editor makes it easy to manipulate source code<\/strong>.\u00a0 Users need only click on the three dots that appear at the top-right corner of the editor and select Code Editor to manipulate source code for their entire posts.<\/p>\n

Using Plugins<\/h2>\n

There are already plenty of pre-made Gutenberg extension plugins<\/a> available online.\u00a0 These can be installed as separate blocks.\u00a0 The use of pre-made plugins makes it even easier for site owners to create user-friendly and aesthetically appealing pages<\/strong>.<\/p>\n

Compatibility Issues<\/h2>\n

The Gutenberg editor’s creators are aware that there are still some compatibility issues with certain plugins<\/strong>.\u00a0 Given that there are literally thousands of these third-party plugins available for use with WordPress, it makes sense that not all of them will be compatible with the new editor right off the bat due to conflicting code or functionality.\u00a0 Those plugins that tend to cause problems are the ones that add functionality changes or alter the way that the classic editor looks.\u00a0Some plugins that add custom styles<\/strong> to pages can also cause compatibility issues.\u00a0 As a general rule, it’s also best to avoid plugins that haven’t been updated in months, as these are more likely to conflict with Gutenberg.<\/p>\n

Checking Compatibility<\/h3>\n

Thankfully, Gutenberg’s creators have made it fairly easy for users to check the compatibility of their individual plugins<\/strong>.\u00a0 There are two ways that they can go about performing this essential task.<\/p>\n

Users can check the Gutenberg Plugin Compatibility database<\/strong>, which contains more than 5,000 popular and obscure WordPress plugins.\u00a0 However, not all plugins are included in the database, which relies on registered users to expand its offerings.\u00a0 If readers are unable to find their plugins in the database, they can also use a staging site to check for any compatibility issues prior to going live<\/strong> with their new content.<\/p>\n

The Take-Away<\/h2>\n

Whether readers are excited about making the switch<\/a> to the Gutenberg editor or slightly concerned, they’ll eventually have to come to terms with the fact that Gutenberg is undeniably the future of WordPress editing<\/strong>.\u00a0 Making the switch may come with some growing pains, but eventually, it will lead to more flexible content creation<\/strong>.\u00a0 Exploring the editor now and learning as much as possible about its functionality and features is the best way to ensure a positive transition when switching to WordPress 5.0<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

Readers who are familiar with WordPress have gotten used to using the platform’s TinyMCE editor.\u00a0 Some of them love it, and some of them hate it.\u00a0 What all WordPress users have in common when it comes to this editor is that they will have to come to terms with the fact that it is on […]<\/p>\n","protected":false},"author":10,"featured_media":7893,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4110],"tags":[4113,4114,4112,298,295],"class_list":["post-7862","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-websites","tag-content","tag-editor","tag-gutenberg-editor","tag-website","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/posts\/7862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/comments?post=7862"}],"version-history":[{"count":0,"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/posts\/7862\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/media\/7893"}],"wp:attachment":[{"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/media?parent=7862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/categories?post=7862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.biteno.com\/en\/wp-json\/wp\/v2\/tags?post=7862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}