AMP Publisher Blocks

Overview

What is a block… and what is an AMP Publisher Block?

Most blocks are “static” blocks, meaning that all of their content and styling are put directly into the block’s HTML by the Gutenberg interface. “Dynamic” blocks are rendered at run-time from a combination of HTML and data allowing for a more “dynamic” approach to generating content and styling as well as allowing for future updates to their technology. The biggest difference comes in how they can be used.

  • Advanced CSS Options : AMP Publisher blocks have advanced style settings applied across their object nodes, allowing for much flexibility in creating the look you want.
  • Block-Sets : Style settings and content can saved to your local block library (database), imported from our API, and/or exported then imported for usage across pages and other sites.
  • DOM Blocks : Our suite of DOM blocks can be used to create truly dynamic nested blocks allowing for almost any layout and style you might need.
  • Independent : They do not rely on WP Core blocks which is an added layer of protection against other plugins causing issue with their “enhancements”.

What is the difference between a “reusable” block and a “Block-Set”?

“Reusable” blocks are useful for displaying a block on multiple pages. It’s content and styling is edited in one place, allowing you to change them across those pages. “Block-Sets” are data packages of content and settings that can be migrated through a number of means… including export/import of image files used within them. One is not a replacement for the other. Any AMP Publisher block can be use as a reusable block on you website.

The Power Core adds an extra feature in the form of the Gutenberg Block widget which allows you to assign any reusable block on your site in any widget location.

What is a DOM block, and how is it different from other AMP Publisher blocks?

Our suite consists of many blocks that provide a variety of features and functions.

  • Side-by-side : These blocks are intended for use at the root level, but they can be nested into DOM blocks )with caution). They have a specific layout and purpose, but allow their content area to be nested other blocks. They are simple to use on the surface, and advanced when you dive in.
  • DOM Blocks : These are a group of blocks intended for nesting into other blocks or into a root level DOM block. They are simple single purpose blocks suited for being used as part of a greater whole. They are simple in function, but advanced in combination.
  • FAQ/Accordion : These two blocks are built specifically to create Q&A bocks or accordions that include Goole’s FAQPage structured data markups, allowing them to become FAQ accordions in Google search results. Unlike most AMP Publisher blocks, these blocks are designed to work with or without AMP.
  • Utility Blocks : Simple purpose built blocks that add functionality and work with or within other AMP Publisher blocks.
    • PopUp Block : Similar to side-by-side blocks with a title and mested content area. These blocks are hidden on the page and opened by buttons/links from other AMP Publisher blocks.
    • Table of Contents : This block is fully automated. It checks the page for WP Heading blocks then creates a hierarchical list of links based on their H2-4 tag assignments, and it add anchors to those headings allowing the links to scroll to the page to them.
    • Post, Category & Spacing : These blocks are provided by our Accelerate themes. The Accelerate Posts Block and Accelerate Categories Block create styled lists of those items based on the parameters you choose. The Accelerate Spacing Block adds space between sections of your page that is controlled by the Accelerate theme spacing setting allowing or uniformity across all pages and updates at any time. The WP core Spacer block is a static size, it must be set every time it is used, and it is not controlled accross the site from one setting.

Utility Blocks

While they are each built for specific purpose, most of them are very flexible. Almost every object and node within the blocks can be modified, styled or excluded.

Table of Contents

Table of Contents block with a browser edge image banner, custom object styling and textual content.

The Table of Contents block automatically generates a table of links to anchors on each heading tag in the page content. It has a nested content are where you can place conent, media or nothing at all. It can be used as a banner, a basic block or child of another block.

Call to Action Box & PopUp Block

Call to Action Box setup with basic style settings using theme colors, as well as a PopUp Block (hidden) triggered by the “ACTION BUTTON”.

Callbox Title
CALLOUT
ACTION BUTTON
Linkable Sub-Text
Call to Action Box

This block has an “ACTION BUTTON” that is set to open a PopUp block on this page, but amy be used to link to any URL. The “Linkable Sub-Text” is linked to the site’s homepage, but it can be used as normal text. The CTA Box text nodes each have a size setting, and the box itself has a full set of styling settings including width and position.

This block can be nested with Core Paragraph, Heading, List and Shortcode blocks… as well as all AMP Publisher blocks designed for nesting.

Testimonial

Testimonial block setup with basic style settings using theme colors.

Who are you?
AMP Publisher Testimonial block

This block has quotation marks (icons) than can be sized and colored, an image location that can be rounded from sqaure to circle, and a full set of styling settings for each node. This block can only be nested with the Core Paragraph blocks to create the testimonial text that falls between the quptation marks.

Media Split

The Media Split block is the most useful and is quite flexible.

Media Split block using a variety of block style settings at each node level

Title
Subtitle ~ Fusce dignissim lacus erat, gravida lobortis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum.

Media Split block without media used to create a custom call to action box.

CALL TO ACTION

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti.

ACTION BUTTON

Media Split block setup as a full-width banner with aligned content.

SUB/PRE-TITLE
YOUR HEADLINE GOES HERE

Quo ea et Perferendis eaque nihil sunt molestias quae Qui itaque corporis corporis perferendis. Nulla sit voluptas expedita. voluptas provident delectus Reprehenderit veniam nostrum laboriosam similique aspernatur.

CALL TO ACTION

Image Inset

The Image Inset block lets you overlap a content window over an inset image, with altered overlapping in mobile mode. The image will resize to suit the size of the content window.

ABOUT US

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum. Quisque sed sapien non leo euismod semper vitae sed enim. Quisque commodo, risus ac accumsan viverra, justo ex ultrices augue, ut semper nulla erat vitae metus. Vivamus vehicula lacus a ullamcorper consectetur. Vivamus vel vulputate urna, consectetur ultricies justo. Quisque cursus pharetra vulputate.

MORE ABOUT US

Image Inset with a DOM Media block displaying an overlapping video.

Advanced Blocks

“DOM” blocks and most of the other AMP Publisher blocks can be used and nested together to create truly custom and dynamic blocks.

DOM Blocks & Nesting

DOM Object, Media Split and DOM Button blocks used to create a custom mobile-responsive 3-column category card banner that is using the Full Content Aligned Block Layout. (very advanced combination of blocks and settings)

Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Analytics

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

SEO

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

DOM Object, DOM Card, DOM Media, DOM Text and DOM Button blocks used to create a product comparison block with user action buttons.

Accelerate Pro
Accelerate Pro comes packaged with the AMP Publisher Blocks plugin, and allows access to import the demo site blocks from the API .
Demo Site
Learn More
WooCommerce
Accelerate Pro Woo
Accelerate Pro Woo extends Pro by including the AMP Publisher Woo plugin, bridging the gap between AMP and WooCommerce.
Demo Site
Learn More
WooCommerce
CBD Serenity
CBD Serenity includes the same plugins as Pro Woo, but with CBD / Cannabis themed pages, content and blocks.
Demo Site
Learn More

DOM Object, DOM Text and DOM Button blocks used to create an image inset effect that allows the image to reach the viewport edge while keeping the content object aligned to page content by using a background image on the block that only displays in 55% of the block. This advanced combination of blocks and settings also allows you to use a tall image rather than one that is very wide as you would in the Image Inset block.

ABOUT US

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum. Quisque sed sapien non leo euismod semper vitae sed enim. Quisque commodo, risus ac accumsan viverra, justo ex ultrices augue, ut semper nulla erat vitae metus. Vivamus vehicula lacus a ullamcorper consectetur. Vivamus vel vulputate urna, consectetur ultricies justo. Quisque cursus pharetra vulputate.

MORE ABOUT US

Data Blocks

AMP Publisher blocks that are designed for nesting are also designed for use at the root level. We have two in particular that can be used and combined to bridge the gap into the Google/AMP world. The FAQ Structured Data Block lets you include FAQPage data to be used in Google search results. You can use them alone as Q&A blocks throughout your content or nest them into the AMP-Accordion block to create an AMP-friendly FAQ-Accordion block.

FAQ Structured Data Block

FAQ Structured Data Block with modified font styling.

Q:
Is this an FAQ Structured Data Block?
A:

Yes, you enter a question and answer and it is included in the page header/body as FAQ Schema data markups. You can add styling to your Q&A using modifiable “Q” & “A” labels and font styling settings. Or you can choose to hide this block for inclusion of the Schema markups without visible display on the page.

AMP-Accordion

AMP-Accordion block nested with Heading, Paragraph and FAQ blocks.

This is a heading block used as an accordion button bar.

This is a Paragraph block. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tristique tincidunt augue ullamcorper ultricies. Curabitur lectus felis, dapibus non vulputate id, imperdiet a tellus. Sed id cursus ex, quis aliquam tellus. Aenean imperdiet, dolor nec tincidunt sagittis, nisl lectus elementum velit, in molestie lacus nibh et neque. Integer sollicitudin dolor dolor. Duis ultricies a orci non feugiat. Vivamus tempus tempor euismod. Suspendisse potenti. Sed ac augue quis arcu mattis rutrum. Quisque sed sapien non leo euismod semper vitae sed enim. Quisque commodo, risus ac accumsan viverra, justo ex ultrices augue, ut semper nulla erat vitae metus. Vivamus vehicula lacus a ullamcorper consectetur. Vivamus vel vulputate urna, consectetur ultricies justo. Quisque cursus pharetra vulputate.

This is another Heading block as a button bar.

This is a paragraph block.

This is another paragraph block in succession after a heading tag. Each block found between Heading blocks is turned into the “bellow” content for the previous heading/button bar.

  • This is a list block in succession
  • with multiple list items
    • and indented/treated as any normal list

Is this an FAQ Structured Data Block nested within an Accordion block?

Yes, this is an FAQ block. The Accordion block converts FAQ blocks into questions/button bars and answers/belolow content. In addition to this conversion, it of course also includes the FAQ Schema markups in the page header/body.

Infographic Code Block

Infographic Code Block using the “Preview Mode” layout with an image and default suggested title and labels.

Infographic Preview

Please include attribution to ampwptools.com with this graphic.
Copy/paste this HTML into your site.
<p><div><strong>Please include attribution to ampwptools.com with this graphic.</strong></div><a href="https://ampwptools.com/amp-publisher-blocks/"><img src="https://ampwptools.com/wp-content/uploads/2019/04/accelerate.jpg"  border="0" /></a></p>

Theme Blocks

The Accelerate theme comes with it’s own blocks. The Accelerate Heading block gives you advanced styling optoins with the ability to apply the block styles to all other Accelerate Heading blocks that share it’s H-Tag. The Accelerate Spacing Block has it’s height controlled by Customizer settings allowing for sitewide uniform spacing. It also includes the Accelerate Posts and Accelerate Categories blocks with custom display modes, styling and query options.

Accelerate Spacing

Accelerate Spacing block uses the theme customizer Standard Padding setting to determine it’s height, allowing for all Accelerate Spacing blocks across the site to be adjusted after implementation. It also supports choosing a fixed height for the block instance.

Accelerate Categories

Accelerate Categories block using the “Image Grid” Display Mode

Accelerate Posts

Accelerate Posts block using the “Image Grid” Display Mode

AMPWPTools News to Know Round-Up: June 2021

We've combed through the previous month's batch of news to highlight the top developments, insights, and commentary items you should know about. In this round-up, we'll be featuring the top news items related to AMP, Core Web Vitals, WordPress, and more from June 2021. The Importance of AMP In the…

Accelerate Heading Block

The Accelerate Heading block is an upgrade to WordPress Heading blocks, but it also works with them. It has a number of style and layout settings that can be applied to all other Accelerate and WordPress Heading blocks on the site that share it's H-Tag value. The Accelerate Heading block…

AMPWPTools News to Know Round-Up: May 2021

We've combed through the previous month's batch of news to highlight the top developments, insights, and commentary items you should know about. In this round-up, we'll be featuring the top news items related to AMP, Core Web Vitals, and WordPress from May 2021. 7 Local SEO Best Practices for WordPress…

Accelerate Posts block using the “Article” Display Mode

AMPWPTools News to Know Round-Up: June 2021

We've combed through the previous month's batch of news to highlight the top developments, insights, and commentary items you should know about. In this round-up, we'll be featuring the top news items related to AMP, Core Web Vitals, WordPress, and more from June 2021. The Importance of AMP In the…

Accelerate Heading Block

The Accelerate Heading block is an upgrade to WordPress Heading blocks, but it also works with them. It has a number of style and layout settings that can be applied to all other Accelerate and WordPress Heading blocks on the site that share it's H-Tag value. The Accelerate Heading block…

AMPWPTools News to Know Round-Up: May 2021

We've combed through the previous month's batch of news to highlight the top developments, insights, and commentary items you should know about. In this round-up, we'll be featuring the top news items related to AMP, Core Web Vitals, and WordPress from May 2021. 7 Local SEO Best Practices for WordPress…