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 Post and Accelerate Categories blocks 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.

Examples

The following are examples of each block using theme linked colors and basic settings. Most of them are available as imports from our API to help you get started using them wuickly and easily.

Side-by-side & Nesting Blocks

Some AMP Publisher blocks are built to be used only at the root level (no nesting), but allow nesting within their content area. Each serves a purpose and has a full set of block node style settings at each node allowing for a variety of uses and styles.

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 BUTTONLinkable Sub-Text
Call to Action Box

This block has an “ACTION BUTTON” that is set to open a PopUp block on this page, but may 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 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 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 setup as a partial-full-width informational banner with a video. Click here to see more uses of the Media Split block with Video.

DOM Blocks

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

DOM Object,Text and Button blocks used to create a custom DOM block with a half image background and styled text window.

TITLE HERE

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.

DOM Object, Text and Button blocks used to create a custom call to action block with a width less than the content.

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.

DOM Object, Media Split and DOM Button blocks used to create a custom mobile-responsive 3-column category card banner that is Full-Width with Constrained Content. (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.

Utility & 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 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 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.

Theme Blocks

The Accelerate theme comes with it’s own blocks and a variety of “styles” added to it’s blocks as well as some core blocks. View the Style Guide to see examples of core blocks using theme styles.

Accelerate Categories block

Accelerate Posts block using the “Image Grid” style

Test Post

We need at least one post to have a blog page.

Accelerate Posts block using the “Default / Article” style

Test Post

We need at least one post to have a blog page.