Easily add advanced native AMP blocks to any page or post on your site with the AMP Publisher Blocks plugin. The Blocks plugin adds several custom blocks to the Gutenberg editor for easy integration into pages and posts.
- Login into wp-admin and open Plugins.
- Select “Add New”
- Select “Upload Plugin”
- Drag into or browse for the zip file you downloaded from the site.
- Click “Install Now”
- When the plugin is finished installing, click the “Activate” link.
Using our blocks is no different than any other block with one major exception… our blocks are “dynamic”, meaning they can be generated by PHP upon page loaing rather than being saved static HTML. This allows for a much more robust group of options, better programming techniqus, and most importantly the ability to update a block without causing YOU to jump through the “deprecated block” hoops (thanks WP).
In addition to their base functionality, our blocks each have many styling options packed into every level of their DOM: margins, padding, borders, shadows… and more. This gives you the option of creating two entirely different looks from the same block. There is too much to detail, I suggest you dive in.
Just like any othe block, you start by clicking on the little plus-circle button that falls between or next to other blocks on your page. This little button is sometimes difficult to find (thanks WP), if you cannot get a cursor lock on it, I suggest clicking on other blocks or areas of the page to open up the mouse-over effect used for displaying them.
We have our own section within the block chooser interface. Click on the accordion node labeled “AMP Publisher Blocks” and choose a block.
Each of our blocks starts out in a similar fashion. You have a few text fields (each optional) you may use to label your block. Each of these fields has a full set of options for styling them, thus allowing you to turn any field into an individually styled entity of it’s own.
You have an area for content that allows other blocks such as the Paragraph block to be nested within the block. Most have a “Read More/Link” button you can edit and style as well. The button can be navigate the user to a URL, or be used to open one of our PopUp blocks.
You are probably familiar with the inspector, just click on a block and it opens up in the sidebar. Nested blocks may require you to click on an area of the blcok that does not allow nesting such as the title or button. Each block has one or more sections that pertain to it’s core functionality. Each node or entity within also has it’s own section with all of it’s styling options. You only need to have the block editor/inspector open to change settings for all sections.
Each block has a purpose, even though they all look a little similar at the start. For example, with the Media Split block you may choose/upload an image, choose it’s size and mobile respinsivity… as well as it’s styling using borders and shadows. Or you may use the Media Split to embed a YouTube video, or perhaps a Facebook social module.
Each block has section of settings that pertain to it as a whole (Block Settings). This allows you to set the margins above and below to separate them from other blocks, choose some super-level options for the entire block, and some styling options that ecapsulate the tentire block.
As mentioned above, each node also has styling options. You should play around a bit with these features to see what you can create. Once you are done editing your block (or while you work on it) do not forget to click the Update button to save your hard work.
You can create any number of pop-up blocks that can be toggled by clicking on any of our blocks link/buttons. Give the PopUp block a unique ID, then enter that id in the opening block’s link/button URL field. PopUp blocks can be styled just like any other one of our blocks, although it opens as a full-page overlay.