{"id":11656696,"date":"2019-06-20T12:39:45","date_gmt":"2019-06-20T12:39:45","guid":{"rendered":"https:\/\/wordpress.org\/support\/?post_type=helphub_article&p=11656696"},"modified":"2024-04-23T14:28:57","modified_gmt":"2024-04-23T14:28:57","slug":"adding-a-new-block","status":"publish","type":"helphub_article","link":"https:\/\/wordpress.org\/documentation\/article\/adding-a-new-block\/","title":{"rendered":"Adding a new block"},"content":{"rendered":"\n

Go to the List of Blocks<\/a><\/p>\n\n\n\n

There are several ways to add a block to your post or page from the admin screen of the WordPress block editor<\/a> when you are editing your post or page. <\/p>\n\n\n\n

You can use the Block Inserter +<\/strong> icon to add a block. You can also use a shortcut slash command to quickly add blocks or use the More options on any of the block’s toolbar to add a block. You can also move blocks<\/a> or search for a block in your post or page. <\/p>\n\n\n\n

How to add blocks using the Block Inserter<\/h2>\n\n\n\n

There are three ways to add a block using the +<\/strong> icon (also called the Block Inserter<\/strong>).<\/p>\n\n\n\n

    \n
  1. Block inserter icon in the top toolbar<\/li>\n\n\n\n
  2. Block inserter icon to the right of an empty block<\/li>\n\n\n\n
  3. Block inserter icon in between blocks <\/li>\n<\/ol>\n\n\n\n
    \"Three<\/figure>\n\n\n\n

    Using the Block inserter icon in the top toolbar<\/h3>\n\n\n\n

    Click on the Block Inserter +<\/strong> icon in the top toolbar in the WordPress block editor<\/a>. <\/p>\n\n\n\n

    You can find a list of all the blocks<\/a> available in the WordPress block editor<\/a>. The most frequently used blocks are listed at the top (based on your Preference<\/a> settings). Hovering over each block will show you a brief description and preview of the block.<\/p>\n\n\n\n

    You can scroll down the list to find blocks in categories, like Text, Media, Design, Widgets, Layout, Theme, or Embeds, You also find third-party blocks from installed plugins. <\/p>\n\n\n\n

    Once you find the block, drag and drop it into the block editor.<\/p>\n\n\n\n

    Adding Block Patterns using the top-toolbar inserter<\/h4>\n\n\n\n

    Block Patterns<\/a> are a collection of predefined blocks that you can insert into pages and posts and then customize with your own content. Using a Block Pattern is an easy way to create beautiful layouts that combine different blocks to produce professional designs.<\/p>\n\n\n\n

    You can open the Patterns tab to view collections of patterns within a specific category like Featured<\/strong>, Call to Action<\/strong>, Pages<\/strong>, and so on, or click the Explore<\/strong> all patterns<\/strong> button at the bottom of that section to open the patterns in a new, larger, window.<\/p>\n\n\n\n

    Click on any pattern once and it will be added to your page at the location of your cursor.<\/p>\n\n\n\n

    Adding Media using the top-toolbar inserter<\/h4>\n\n\n\n

    The media tab allows you to view and add to the page images you have used, additionally, you can also view free media content from Openverse<\/a>. You can also open your media library using the button at the bottom of the tab.<\/p>\n\n\n\n

    \"Opening<\/figure>\n\n\n\n

    Adding a synced pattern using the top-toolbar inserter<\/h4>\n\n\n\n

    if you have synced patterns, you will see Synced patterns tab in a form of an icon as shown below.<\/p>\n\n\n\n

    \"Reusable<\/figure>\n\n\n\n

    When you click on the tab you should be able to view and add to the page all the synced patterns you have on the site.<\/p>\n\n\n\n

    Using the Block Inserter icon to the right of an empty block<\/h3>\n\n\n\n

    Click on the Block Inserter +<\/strong> icon to the right of an empty block. If the +<\/strong> icon isn’t displayed first click on the placeholder text.<\/p>\n\n\n\n

    Clicking the Block Inserter +<\/strong> icon will open a modal window with a list of the most frequently used blocks<\/a> you can also search for a block you would like to use. You can click on top of the block to want to use.<\/p>\n\n\n\n

    You can also press the Enter<\/kbd>\/Return<\/kbd> on your keyboard after selecting a block to create a new empty block, and click the + Block Inserter to the right of the empty block.<\/p>\n\n\n\n

    Select a block from the list or click on the “Browse all” button to get a list of all the blocks<\/a> available in the WordPress block editor<\/a>.<\/p>\n\n\n\n

    \"The<\/figure>\n\n\n\n

    When you pick the option to browse all, a larger window of the blocks available will opened. <\/p>\n\n\n\n

    \"The<\/figure>\n\n\n\n

    Using the Block inserter icon in between blocks<\/h3>\n\n\n\n

    When you hover over the gap between two blocks, you will notice a horizontal blue line appear with a Block Inserter<\/strong> +<\/strong> icon. You can click on this icon to open a modal window with a list of the most frequently used blocks<\/a>. <\/p>\n\n\n\n

    How to add blocks using the slash command <\/h2>\n\n\n\n

    You can quickly add a block to your post or page using the slash command. This shortcut will help with your writing flow with fewer interruptions searching for a block.<\/p>\n\n\n\n

    Begin by adding a new paragraph block by pressing Enter<\/kbd> or Return<\/kbd> on your keyboard.<\/p>\n\n\n\n

    Then hit the forward-slash (\u201c\/<\/kbd>\u201d) key followed by the block name. For example: \/image<\/code> or \/heading<\/code>.<\/p>\n\n\n\n

    \"Add
    Add a block using the slash command<\/figcaption><\/figure>\n\n\n\n

    How to add blocks using the More option on a block’s toolbar<\/h2>\n\n\n\n

    Finally, on any selected block’s Block toolbar, click on the three-dot icon and choose “insert before” or “insert after” to add a new block before or after the selected block.<\/p>\n\n\n\n

    \"Add
    Add a block using the More options in a block toolbar<\/figcaption><\/figure>\n\n\n\n

    How to add blocks within nested blocks<\/h2>\n\n\n\n

    You can easily add blocks within blocks that allow nesting such as Group block, Row block, or Stack block. <\/p>\n\n\n\n

    Select the Group block, Row block, or Stack block. You will find the Block Inserter +<\/strong> icon to the bottom right of the group of blocks. Click the Block Inserter +<\/strong> icon to quickly add a new block to the nested group.<\/p>\n\n\n\n