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
Table of Contents block with a browser edge image banner, custom object styling and textual content.
Table of Contents
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 & 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
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.
Close
PopUp Block
This block is hidden on page load. It can be triggered from buttons and link locations found in a number of AMP Publisher blocks. It has a full set of style settings for each node.
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
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
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.
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.
Image Inset
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.
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 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 .
WooCommerce
Accelerate Pro Woo
Accelerate Pro Woo extends Pro by including the AMP Publisher Woo plugin, bridging the gap between AMP and WooCommerce.
WooCommerce
CBD Serenity
CBD Serenity includes the same plugins as Pro Woo, but with CBD / Cannabis themed pages, content and blocks.
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.
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
FAQ Structured Data Block with modified font styling.
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
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
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
Infographic Code Block using the “Preview Mode” layout with an image and default suggested title and labels.
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
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
Accelerate Categories block using the “Image Grid” Display Mode
Accelerate Posts
Accelerate Posts
Accelerate Posts block using the “Image Grid” Display Mode
News
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…
Blocks
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…
News
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
NewsAMPWPTools 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…
BlocksAccelerate 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…
News