Blocks
PopUp Block
The PopUp block can be used to display content from a button or link in another AMP Publisher block. You can insert any supported block(s) into the pop-up to deliver content on viewer interaction without having to include it in the visual field. The pop-up window will open as an overlay with a semi-transparent background obscuring the page beneath it.
Settings Overview
- PopUp Settings
- PopUp ID : You must enter a unique ID to allow other AMP Publisher Blocks on this page to target/toggle this block. The ID must contain only letters and no spaces or other characters. It must only be unique to this block on this page, the same ID/block can be used on other pages to be targeted from blocks on those pages.
- Window Width by % Percentage : The maximum width of the pop-up window as a percentage of the available area. This overrides the Window Width by Pixels setting, set it to 0 to use pixels instead. This setting only affects the “window” object in viewports wider than 900px, otherwise it fills the screen.
- Window Width by Pixels : The maximum width in pixels of the pop-up window.
- The backdrop is a semi-transparent overlay to the webpage, designating the pop-up’s “open” state in viewports larger than 900px wide.
- Backdrop Color : Backdrop color affected by opacity.
- Backdrop Opacity : Backdrop opacity by % percentage. (0 is invisible, 100 totally opaque)
- Styled Nodes : Object nodes within the block DOM with styling settings. [tutorial]
- window : Block Settings panel
- title : Title panel
- content : Nested Content panel
- window : Block Settings panel
Object Map (DOM)
- root object (div) untargeted nodel : This root level object is the container for the backdrop and window.
- backdrop (div) untargeted node : Full screen by CSS with color and opacity to cover the page content beneath the window. It has a click/tap event that closes the pop-up.
- window (div) targeted node from Block Settings panel :
- close button (div) untargeted node :
- title (div) targeted node from Title panel : Single text field, text is edited in the block not in the panel. Styles targeting this node only apply to the title, and will override the same style applied to the block and/or content wrapper.
- content (div) targeted node from Nested Content panel : This node is where you may enter basic text as paragraph blocks (just type) or insert other blocks. Styles applied to this node are inherited by it’s children and it follow suit with previously explained cascading.
- wp nested wrapper (div) untargeted node : This node is generated by Gutenberg around nested content, we sometimes use it when layout rules need to be applied. Follow suit with the internal wrapper.
- nested blocks (?) untargeted nodes : Anything put into the nested content area. Each block may have it’s own style rules, some core blocks do. Styles applied to a child “should” be able to override the same style cascaded to it from above. I use the word “should” because we only have control over our own blocks and how styles are applied to them, core and outsider blocks have their own methods.
- wp nested wrapper (div) untargeted node : This node is generated by Gutenberg around nested content, we sometimes use it when layout rules need to be applied. Follow suit with the internal wrapper.
Example
You cannot see this example on the front end, unless you toggle it using the button below. It does not matter where on your page you insert a PopUp block because the block is invisible upon page load, then when it is toggled on it is overlayed over the page instead.
The block is actually right here in the DOM, after the button above and before the list below.
Some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, some text in the popup, all work and no play makes Jack a dull boy, some text in the popup, some text in the popup, some text in the popup, some text in the popup.
- Insert a PopUp Block block into your page/post.
- Open the PopUp Settings panel in the block inspector (sidebar).
- Enter “popup” (or the exact ID you entered into the CTA box) in the PopUp ID field.
- In the block editor, click in the Title field in the content object and enter some text. Entering a title is optional, the node will be omitted if left blank.
- Below the title field is the nested content area. By default the text you type here becomes a WP core paragraph block just like in the base editor. When you press Enter it will create a new line as a new paragraph block. You may insert any blocks you like into this nested area (like the base), and they will be treated as a child objects of this Nested Content object.
- This example has a DOM Media block nested into it with a YouTube video as a demonstration. We adjusted the window width to keep the video size reasonable. This step may not suit your needs, but for the sake of learning we’ll walk you through it.
- Open the PopUp Settings panel. Set the Window Width by % Percentage to 0. This tells it to use the Window Width by Pixels setting instead, which defaults to 700 and suits our example video.
- After the text/children you entered into the nested content area, insert a DOM Media block.
- Open the Media Settings panel and and enter a Youtube video URL into the Video/Social Media Embed URL field (or any video or social embed URL from the supproted providers). That’s it, video in a popup.
- This example uses default styling, so there is nothing here to duplicate. You can easily change the overlay Backdrop Color and Backdrop Opacity in the PopUp Settings panel, this is a simple way to customize it to suit your site. We suggest you play around with the various panels and settings to get a feel for what they can do.
Usage Examples with Video in Different Sizes
We have 3 examples using a video in a pop-up with slight differences in how they are setup. This provides a comparision for how the pop-up works with content that is potentially larger than the viewport. The YouTube video player allows for full-screen viewing which solves the display issues, but it is helpful to think about the initial
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.
Include a video, social embed, or any allowed block in a pop up.
PopUp Example
The first example has a title, text and a video. The Window Width by Pixels is set to 700px, this keeps the initial video constrained to a smaller format as part of the pop-up content.
Full Video PopUp
The second example just has a video. The window width is unaffected. (80% by default) This exmaple video is visible in most browsers.
Video nested in a DOM Object allowing a video that isn’t full width while the pop-up window fills the 80% width. This creates a wider window to fit your txt and content while also limiting the height of the video for better viewing.
Partial Video PopUp
The last example has a title and content text. Then we put a DOM Media block inside a DOM Object block and give it’s contents a width of 50% to keep the video width small while the pop-up width stays large.
Comments are closed.