{"id":26120,"date":"2021-06-27T15:00:14","date_gmt":"2021-06-27T13:00:14","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=26120"},"modified":"2021-06-23T12:35:20","modified_gmt":"2021-06-23T10:35:20","slug":"tips-for-mastering-wordpress-block-editor","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/tips-for-mastering-wordpress-block-editor\/","title":{"rendered":"20 Tips for Mastering the WordPress Block Editor"},"content":{"rendered":"<div class=\"wpb-content-wrapper\"><p>[vc_row][vc_column][vc_column_text]WordPress block editor is made to be beginner-friendly and intuitive. But, even if you have been using it since its first release, there could still be some useful tricks to discover about it that can significantly <strong>improve your working efficiency<\/strong>. It is in human nature to get used to a certain way of doing things, and we often miss to notice that <strong>there may be a better and faster way to achieve something<\/strong>. That\u2019s why we believe it is worth spending a few minutes of your time to learn about these simple tricks for mastering WordPress block editor that will allow you to focus more on the quality of your content and less on technicalities.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]In this article you will find out:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;22px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#how-the-wordpress-blocks-work\">How the WordPress Blocks Work<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-keyboard-shortcuts\">Using Keyboard Shortcuts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-block-type-shortcuts\">Using Block Type Shortcuts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#finding-and-inserting-a-new-block-quickly\">Finding and Inserting a New Block Quickly<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#moving-the-block-toolbar-to-the-top\">Moving the Block Toolbar to the Top<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#using-multiple-view-options\">Using Multiple View Options<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-columns-to-your-post\">Adding Columns to Your Post<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-images-with-text-to-your-posts\">Adding Images With Text to Your Posts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-cover-images\">Adding Cover Images<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#dragging-and-dropping-images-from-your-pc\">Dragging and Dropping Images from Your PC<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-buttons-to-pages-and-posts\">Adding Buttons to Pages and Posts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-widgets-into-your-posts\">Adding Widgets into Your Posts<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#adding-external-content-using-copy-paste\">Adding External Content Using Copy\/Paste<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#finding-information-about-post-word-count-and-structure\">Finding Information About Post Word Count and Structure<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#changing-paragraph-colors\">Changing Paragraph Colors<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#copying-the-blocks-for-use-across-different-sites\">Copying the Blocks for Use Across Different Sites<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#copying-multiple-blocks\">Copying Multiple Blocks<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#copying-entire-content-from-one-wordpress-website-to-another\">Copying Entire Content from One WordPress Website to Another<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#duplicating-blocks-on-the-same-page\">Duplicating Blocks on the Same Page<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#creating-a-reusable-block-template\">Creating a Reusable Block Template<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;5px&#8221;]<ul class=\"qodef-unordered-list-item qodef-toc\">\n    <li>\n\t        <div class=\"qodef-ul-title-holder\">\n            <span class=\"qodef-ul-title-content\"><a href=\"#switching-between-the-visual-and-the-code-editor\">Switching Between the Visual and the Code Editor<\/a><\/span>        <\/div>\n            <\/li>\n<\/ul>[vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"how-the-wordpress-blocks-work\"><\/a>How the WordPress Blocks Work<\/h2>\n<p>[\/vc_column_text][vc_column_text]The WordPress block editor or Gutenberg was made with the idea of providing the ease of use that is typical of some of the most popular page builders. It <strong>combines features of both an editor and a page builder<\/strong> and surely is one of the greatest innovations in WordPress. It allows users to <strong>manage content more easily and create pages with more flexibility<\/strong> and control in editing and posting.[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]The <a href=\"https:\/\/qodeinteractive.com\/magazine\/introduction-to-wordpress-gutenberg-block-editor\/\">concept of Gutenberg<\/a> is based on blocks. It <strong>includes a wide collection of blocks<\/strong> like Gallery, Columns, File, Code, and similar that you simply add to a page and customize as per your needs. <strong>Blocks are categorized<\/strong> so that you can easily find the type of block that you want to add. In addition to the default blocks, <strong>there are plenty of <a href=\"https:\/\/qodeinteractive.com\/magazine\/best-gutenberg-blocks-plugins-wordpress\/\">Gutenberg block plugins<\/a> that help extend the functionality<\/strong> either as single blocks or as collections. To help you get the best out of it, we collected <strong>20 tips and tricks that will make your Gutenberg experience smoother<\/strong>.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-keyboard-shortcuts\"><\/a>Using Keyboard Shortcuts<\/h2>\n<p>[\/vc_column_text][vc_column_text]It is not always convenient to use the mouse, especially not for very simple commands. Keyboard shortcuts are often a faster way to add a link, make some text italic and similar. Some of the most commonly used shortcuts for WordPress block editor are:<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;28px&#8221;][vc_column_text]Enter &#8211; Add a new block<br \/>\nCtrl + Shift + d &#8211; Duplicate the selected block(s)<br \/>\nAlt + Shift + z &#8211; Remove the selected block(s)<br \/>\nEsc = Clear selection<br \/>\nCtrl + Shift + z &#8211; Redo your last undo<br \/>\nCtrl + Shift + , &#8211; Show or hide the settings bar<br \/>\nAlt + Shift + o &#8211; Open the block navigation menu<br \/>\nAlt + F10 = Navigate to the nearest toolbar<br \/>\nCtrl + Shift + Alt + m &#8211; Switch between Visual Editor and Code Editor<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"651\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Keyboard-Shortcuts.jpg\" class=\"attachment-full size-full\" alt=\"Keyboard Shortcuts\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Keyboard-Shortcuts.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Keyboard-Shortcuts-300x202.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Keyboard-Shortcuts-768x516.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Keyboard-Shortcuts-620x417.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-block-type-shortcuts\"><\/a>Using Block Type Shortcuts<\/h2>\n<p>[\/vc_column_text][vc_column_text]There is a quick way to add all types of headings to the text without having to add a Heading block. Simply enter <strong>#<\/strong> and then hit <em><strong>Space<\/strong> <\/em>for H1, <strong>## + Space<\/strong> for H2, <strong>### + Space<\/strong> for H3 and so on. There\u2019s a similar shortcut for adding quotes &#8211; <strong>&gt; + Space<\/strong>. You can also easily add a bulleted list by entering <strong>\u2013 + Space<\/strong> or start a numeric list with <strong>1. + Space or 1) + Space.<\/strong>[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"finding-and-inserting-a-new-block-quickly\"><\/a>Finding and Inserting a New Block Quickly<\/h2>\n<p>[\/vc_column_text][vc_column_text]The standard way of adding a block to your page is straightforward, but there&#8217;s a way to make it even more simple. When you decide on the block you want to use, instead of browsing the blocks menu, simply enter the name of the block in the search field and click on it when it appears in the search results.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Block.jpg\" class=\"attachment-full size-full\" alt=\"Adding Block\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Block.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Block-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Block-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Adding-Block-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"moving-the-block-toolbar-to-the-top\"><\/a>Moving the Block Toolbar to the Top<\/h2>\n<p>[\/vc_column_text][vc_column_text]The block toolbar usually floats on top of the block while you are editing. Although this is often handy, it may not feel comfortable when the toolbar covers a part of a previous block. If you want to have a neat overview of what you are doing, you have the option to pin the toolbar to the top. Just click on the three dots of <em><strong>Show more tools &amp; options<\/strong><\/em> and choose the <em><strong>Top Toolbar<\/strong><\/em> option.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Top-Toolbar.jpg\" class=\"attachment-full size-full\" alt=\"Top Toolbar\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Top-Toolbar.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Top-Toolbar-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Top-Toolbar-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Top-Toolbar-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"using-multiple-view-options\"><\/a>Using Multiple View Options<\/h2>\n<p>[\/vc_column_text][vc_column_text]In case you want to focus solely on the block you are working on at the moment and you\u2019re finding other content on the page distracting, the <em><strong>Spotlight mode<\/strong><\/em> will allow you to do just that by dimming the rest of the content. If you prefer the clean canvas feel, the<em><strong> Fullscreen mode<\/strong><\/em> will probably suit you better. To change the view, click on the three dots in the top right corner of the page, and you will find view options to select from.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Fullscreen-Mode.jpg\" class=\"attachment-full size-full\" alt=\"Fullscreen Mode\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Fullscreen-Mode.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Fullscreen-Mode-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Fullscreen-Mode-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Fullscreen-Mode-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-columns-to-your-post\"><\/a>Adding Columns to Your Post<\/h2>\n<p>[\/vc_column_text][vc_column_text]Columns are a good way to make a text visually more appealing especially when you want to add a magazine feel to your page. Gutenberg comes with a block for that purpose, it is called the <strong>Columns<\/strong> block and contains a few column styles to choose from. All you need to do to add columns is to select the <em><strong>Columns<\/strong> <\/em>block, set the number of columns you want to have in the block settings and that\u2019s it. You can then customize the columns further by adding other blocks like the Quote block or similar.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-images-with-text-to-your-posts\"><\/a>Adding Images With Text to Your Posts<\/h2>\n<p>[\/vc_column_text][vc_column_text]The Media &amp; Text block lets you add any kind of image or video next to the text with ease. The spacing and width between the two blocks are automatically adjusted, so you don\u2019t have to spend time arranging the image to fit next to the text and vice versa.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"612\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Media-and-Text.jpg\" class=\"attachment-full size-full\" alt=\"Media and Text\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Media-and-Text.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Media-and-Text-300x189.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Media-and-Text-768x485.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Media-and-Text-620x392.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-cover-images\"><\/a>Adding Cover Images<\/h2>\n<p>[\/vc_column_text][vc_column_text]Cover images are a great way to keep a reader&#8217;s eye on the text, especially if the text is very long. Unlike <a href=\"https:\/\/qodeinteractive.com\/magazine\/wordpress-featured-image\/\">featured images<\/a>, cover images are typically placed in the middle of a text. You can enrich them by adding info from the article to them to highlight a part of the article. Adding them is simple &#8211; just use the <em><strong>Cover<\/strong> <\/em>block to upload the image. Bear in mind that the image you choose should be a high-quality one in order to look good on your page.[\/vc_column_text][vc_empty_space height=&#8221;80px&#8221;][vc_widget_sidebar sidebar_id=&#8221;new-top-picks-banner&#8221;][vc_empty_space height=&#8221;80px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"dragging-and-dropping-images-from-your-pc\"><\/a>Dragging and Dropping Images from Your PC<\/h2>\n<p>[\/vc_column_text][vc_column_text]Did you know that you can drag and drop images from any directory in your PC directly to the WordPress Block Editor? Just choose the image, drag it and drop it at the place you want it to appear in the post\/page.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-buttons-to-pages-and-posts\"><\/a>Adding Buttons to Pages and Posts<\/h2>\n<p>[\/vc_column_text][vc_column_text]Strategically placed buttons are great CTAs and come in handy in many types of posts and pages. And you don&#8217;t need some special plugin to add them, since the block editor includes a simple <em><strong>Button<\/strong> <\/em>block that allows you to quickly insert a button anywhere you want. You get to choose the text color, background, alignment and also pick between two styles &#8211; fill and outline. For a more comfortable view of button settings, click on the Button block and then click on the gear icon in the top right corner and all the button settings will be displayed in the right side menu.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"578\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Button.jpg\" class=\"attachment-full size-full\" alt=\"Add Button\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Button.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Button-300x179.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Button-768x458.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Add-Button-620x370.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-widgets-into-your-posts\"><\/a>Adding Widgets Into Your Posts<\/h2>\n<p>[\/vc_column_text][vc_column_text]In WordPress, widgets represent an easy and convenient way of adding content to websites. Typically used for areas such as the sidebar or the footer, <a href=\"https:\/\/qodeinteractive.com\/magazine\/add-widget-to-wordpress\/\">widgets are quite easy to add<\/a>. However, you can also add them to the content area if that makes sense to you, and the block editor can help with that. To access widgets, simply enter <em><strong>Widgets<\/strong> <\/em>in the blocks search field and a menu with available widgets will show up below.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"508\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Widgets.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Widgets\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Widgets.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Widgets-300x157.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Widgets-768x403.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Widgets-620x325.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"adding-external-content-using-copy-paste\"><\/a>Adding External Content Using Copy\/Paste<\/h2>\n<p>[\/vc_column_text][vc_column_text]Although WordPress blocks include the embed blocks that allow you to add Instagram posts, videos, and similar content, there\u2019s one even easier way to add a YouTube video or some other type of content to a page. You can simply copy and paste the URL of the content you want to add to a page anywhere you would like to have it in the post, and it will automatically be inserted without you having to add an embed block.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"finding-information-about-post-word-count-and-structure\"><\/a>Finding Information About Post Word Count and Structure<\/h2>\n<p>[\/vc_column_text][vc_column_text]The length and structure of your article are important not only in terms of quality but also in terms of SEO. As you write, you can easily get carried away and forget about these practical aspects. To stay on the right track, you can always take a look at the stats and check how the article is arranged by clicking a couple of buttons. The <em><strong>Details<\/strong> <\/em>button on the top left side of the editor, with an \u201ci\u201d on it, shows you blocks, word count, paragraphs, and article outline based on the headings in the text.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"517\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Word-Count.jpg\" class=\"attachment-full size-full\" alt=\"Word Count\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Word-Count.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Word-Count-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Word-Count-768x410.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Word-Count-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;38px&#8221;][vc_column_text]Next to it on the right is the block navigation button that provides you with the info about all the blocks you have used in the text. Plus, you can click on a block to jump directly to it.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"518\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Used-Blocks.jpg\" class=\"attachment-full size-full\" alt=\"Used Blocks\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Used-Blocks.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Used-Blocks-300x160.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Used-Blocks-768x411.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Used-Blocks-620x331.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"changing-paragraph-colors\"><\/a>Changing Paragraph Colors<\/h2>\n<p>[\/vc_column_text][vc_column_text]Using colors in an article is a great way to draw the reader\u2019s attention and make specific information stand out. You can achieve this powerful effect by setting the colors in the block editor. You will find the color settings in the Settings menu when you click on the gear icon in the top right corner.. Create your own color combo and make sure that the result is easy to read through.<br \/>\n[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"574\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Colors.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Colors\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Colors.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Colors-300x178.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Colors-768x455.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Colors-620x367.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"copying-the-blocks-for-use-across-different-sites\"><\/a>Copying Blocks from One WordPress Website to Another<\/h2>\n<p>[\/vc_column_text][vc_column_text]Managing content on more than one website? With the WordPress Block editor, you can copy any block to any other WordPress website. Go to the block you want to copy, select it and choose the <em><strong>Copy<\/strong> <\/em>option in the block settings menu. Then go to the other website page and paste it into the shortcode block on the page. The block style will probably differ as it is is automatically adjusted to the target theme.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"593\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Copying-Blocks.jpg\" class=\"attachment-full size-full\" alt=\"Copying Blocks\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Copying-Blocks.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Copying-Blocks-300x184.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Copying-Blocks-768x470.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Copying-Blocks-620x379.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"copying-multiple-blocks\"><\/a>Copying Multiple Blocks<\/h2>\n<p>[\/vc_column_text][vc_column_text]Need to copy multiple blocks at once? No problem &#8211; hold the \u201cShift\u201d key and select the blocks you want to copy, then click on the \u201cChange block style\u201d button. You will now have to group all the blocks into one element &#8211; choose the <em><strong>Group<\/strong><\/em> option in the dropdown menu, and all the selected blocks will be grouped inside a single box. Then click on the <em><strong>More Options &amp; Tools<\/strong><\/em> button (three dots in the top right corner) and choose \u201cCopy\u201d.[\/vc_column_text][vc_empty_space height=&#8221;68px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"copying-entire-content-from-one-wordpress-website-to-another\"><\/a>Copying Entire Content from One WordPress Website to Another<\/h2>\n<p>[\/vc_column_text][vc_column_text]There are a lot of reasons why you may need to copy the entire content from one website to another but you surely don\u2019t need to copy blocks one by one. With the WordPress block editor you can copy all the content in just a few clicks. The option to do this is found in the <strong>More Tools &amp; Options<\/strong> menu in the top right corner. Simply click on the <em>Copy All Content<\/em> and paste to the designated website..[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"591\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Copy-All-Content.jpg\" class=\"attachment-full size-full\" alt=\"Gutenberg Copy All Content\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Copy-All-Content.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Copy-All-Content-300x183.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Copy-All-Content-768x468.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Gutenberg-Copy-All-Content-620x378.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"duplicating-blocks-on-the-same-page\"><\/a>Duplicating Blocks on the Same Page<\/h2>\n<p>[\/vc_column_text][vc_column_text]In case you need to duplicate a block on the same page, use the <em><strong>Duplicate<\/strong> <\/em>option that shows in the menu when you click on the three dots in the top right corner. When the block is duplicated you can continue to edit it independently per your needs.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Duplicate-Blocks.jpg\" class=\"attachment-full size-full\" alt=\"Duplicate Blocks\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Duplicate-Blocks.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Duplicate-Blocks-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Duplicate-Blocks-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Duplicate-Blocks-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"creating-a-reusable-block-template\"><\/a>Creating a Reusable Block Template<\/h2>\n<p>[\/vc_column_text][vc_column_text]Reusable blocks are handy as they can speed up the process of setting up a page without having to start from scratch each time. To create a reusable block template, simply add the block you want to use, click on the three vertical dots, and then choose the <em><strong>Add to Reusable Blocks<\/strong><\/em> option. You will then be prompted to give the block a name, and then the block is ready to be used on any page or post.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"582\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Reusable-Blocks.jpg\" class=\"attachment-full size-full\" alt=\"Reusable Blocks\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Reusable-Blocks.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Reusable-Blocks-300x180.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Reusable-Blocks-768x461.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Reusable-Blocks-620x372.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\"><a id=\"switching-between-the-visual-and-the-code-editor\"><\/a>Switching Between the Visual Editor and the Code Editor<\/h2>\n<p>[\/vc_column_text][vc_column_text]Gutenberg contains two \u201cmodes\u201d for editing your content &#8211; the Visual Editor, based on the \u201cwhat you see is what you get\u201d principles, and the Code Editor, in which you add and edit the content using HTML and CSS. If you are an advanced user and prefer working with code, or you want to add a shortcode to a page, you will probably prefer working with the Code Editor. The WordPress block editor allows you to easily switch between the visual and the code editor. You can use the keyboard shortcut Ctrl + Shift + Alt + M to do it quickly or check the <em><strong>Code editor<\/strong><\/em> option in the menu that opens when you click on the three dots in the top right corner, next to the wheel icon.[\/vc_column_text][vc_empty_space height=&#8221;50px&#8221;]<div class=\"qodef-single-image-holder   qodef-has-border \">\n    <div class=\"qodef-si-inner\" >\n                                    <img loading=\"lazy\" decoding=\"async\" width=\"969\" height=\"491\" src=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Switching-Editors.jpg\" class=\"attachment-full size-full\" alt=\"Switching Editors\" srcset=\"https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Switching-Editors.jpg 969w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Switching-Editors-300x152.jpg 300w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Switching-Editors-768x389.jpg 768w, https:\/\/qodeinteractive.com\/magazine\/wp-content\/uploads\/2021\/06\/Switching-Editors-620x314.jpg 620w\" sizes=\"auto, (max-width: 969px) 100vw, 969px\" \/>                        <\/div>\n<\/div>[vc_empty_space height=&#8221;78px&#8221;][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n<h2 class=\"qodef-h4\">In Conclusion<\/h2>\n<p>[\/vc_column_text][vc_column_text]We hope this article will help you <strong>navigate smoothly through WordPress<\/strong> and create quality content with greater ease. WordPress block editor will surely experience many more updates in the future, but at the moment, we can confidently say <strong>it has everything it needs to stay on the top<\/strong> in the CMS industry.[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Improve your efficiency with the top tips for mastering the WordPress Block Editor all gathered in one place.<\/p>\n","protected":false},"author":42889,"featured_media":26489,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[5],"tags":[14,72,4,13],"class_list":["post-26120","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-resources","tag-core","tag-gutenberg","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26120","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/42889"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=26120"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/26120\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/26489"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=26120"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=26120"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=26120"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}