Advanced Gutenberg Blocks

Any subjective notes on these block are our opinions and others may not agree. All features for various blocks may not have been tested here.

Notices Block

  • More demos on demo link above
  • A simple block to show: advice / warning / information / avoid notice, each with different color background and icon
  • icon is optional
  • color can be entire box background or just a line along the top

Information

Information for the notice box, icon is optional, background color can be entire box or top line.

Plugin Block

  • Display information from a WordPress plugin
  • not tested here, see demo link

Banner Ad Block

  • Monetize your website by inserting Banner Ads in your content.
  • See demo page, not tested here.

Text + Ad Block

  • Display a text on the left and a rectangle ad on the right
  • not tested here, see demo

Add to Cart Button

  • allows a customer to quickly add a product to cart
  • background and text color options
  • icon options
  • need to choose a product already on your site, then it automatically displays the button

Add Black Dog Coffee Mug to cart • $9.99

Website Card Preview Block

  • Turn a simple url in a pretty card preview
  • requires an API, so not tested here, see demo

Display Product Block

  • Display WooCommerce Product in your post or on your page
  • Type in product and it automatically dispalys
  • Options: button background color and price color

Black Dog Coffee Mug

$9.99

Diner style mug, great for your morning joe with The Black Dog Arts Cafe logo on one side and Tony’s Coffee logo on the other. We proudly serve Tony’s Coffee in our cafe, one of the original roasters in Washington State.

Add to cart

Post Block

  • Display a pretty post link (from any post type), see demo

test of Gutenberg editor for posts

In Test Posts By lizadmin

This post is for testing Gutenberg blocks in blog posts.

View post to subscribe to site newsletter.

Continue reading →

Read more

Testimonial Block

  • A customizable customer testimonial with picture, name and company.
  • Takes up a lot of space

This area is for the testimonial or review, image is optional

Liz Lawrence

Paldom Systems

Google Map

  • Requires API so not tested here, see demo
  • appears to have many options for display

Click to Tweet Block

  • Display a nice click to tweet box so your user can easily share your most meaningful sentences
  • Can add hastags
tweet block, can add hashtags
Click to tweet

Table of Contents Block

  • An auto generated summary for your long posts.
  • Also seems to work for page headings. not much customization
  • If headings are links it puts the entire link in as shown below.
  • Can be minimized accordion list
  • No options except ordered or non ordered list

Table of contents

  1. Advanced Gutenberg Blocks
    1. <a href=”https://advanced-gutenberg-blocks.com/block/notice-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Notices Block (opens in a new tab)”><em><strong>Notices Block</strong></em></a>
      1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/wordpress-plugin-card-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Plugin Block (opens in a new tab)”>Plugin Block</a></em></strong>
        1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/banner-ad-block/”>Banner Ad Block</a></em></strong>
          1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/text-ad-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Text + Ad Block (opens in a new tab)”>Text + Ad Block</a></em></strong>
            1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/woocommerce-add-to-cart-button-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Add to Cart Button (opens in a new tab)”>Add to Cart Button</a></em></strong>
              1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/website-card-preview-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Website Card Preview Block (opens in a new tab)”>Website Card Preview Block</a></em></strong>
                1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/woocommerce-product-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Display Product Block (opens in a new tab)”>Display Product Block</a></em></strong>
                  1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/post-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Post Block (opens in a new tab)”>Post Block</a></em></strong>
                    1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/testimonial-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Testimonial Block (opens in a new tab)”>Testimonial Block</a></em></strong>
                      1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/google-map-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Google Map (opens in a new tab)”>Google Map</a></em></strong>
                        1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/click-to-tweet-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Click to Tweet Block (opens in a new tab)”>Click to Tweet Block</a></em></strong>
                          1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/table-of-contents-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Table of Contents Block (opens in a new tab)”>Table of Contents Block</a></em></strong>
                            1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/intro-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Intro Block (opens in a new tab)”>Intro Block</a></em></strong>
                              1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/giphy-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Giphy Block (opens in a new tab)”>Giphy Block</a></em></strong>
                                1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/unsplash-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Unsplash Block (opens in a new tab)”>Unsplash Block</a></em></strong>
                                  1. <strong><em><a href=”https://advanced-gutenberg-blocks.com/block/code-block/” target=”_blank” rel=”noreferrer noopener” aria-label=”Code Block (opens in a new tab)”>Code Block</a></em></strong>

                                  Intro Block

                                  • Creates a subheading to introduce your post or page
                                  • No options

                                  Intro block–Display a nice introduction text at the beginning of your post

                                  Giphy Block

                                  • Search and display a GIF directly from the WordPress Editor with the Giphy Block
                                  • Requires API so not tested here, see demo

                                  Unsplash Block

                                  • Search and display an image from Unsplash directly in the WordPress Editor. Find beautiful pictures from the best free photos stock
                                  • requires API so not tested here, see demo

                                  Code Block

                                  • Syntax highlighting with custom themes for every language
                                  • Block for displaying html or other code with several options for display
                                  • see demo
                                  • Below is the code for this list as an example
                                  HTML