Blocks

DOM Blocks

by CreatorFeb 4, 2021 3

“The Document Object Model (or DOM) is a cross-platform and language-independent interface that treats an XML or HTML document as a tree structure wherein each node is an object representing a part of the document. The DOM represents a document with a logical tree.” ~ Wikipedia

Most WordPress blocks serve one purpose, and their DOM is non-mutable. Our DOM blocks are specifically designed to be nested with and into one another to create custom blocks that utilize the advanced capabilites of a typical object DOM. You can apply settings and styling to each object node while you build your DOM to suit your needs. DOM blocks can also be used on their own or inserted into any block that allows nested content and our other AMP Publisher blocks can be inserted into the DOM Object block.

• DOM Object : This is the backbone of the DOM block system. It includes advanced options for layout and child object handling using CSS Flexbox tech and parent-to-child styling options.
  • DOM Object : I list it again to demonstrate that it is equally parent and child. When in doubt, put it in a DOM Object block.
  • DOM Text : Text field with styling options.
  • DOM Media : Video or social media embed object.
  • DOM Button : Button or link object with options for inheriting button styles or customizing your own.
  • DOM Card : Stylized card with a tab, title and nested content area.

Example #1 – Image Inset plus

The first example mimics the functionality of the Image Inset block with 2 clear differences. It does not mimic the Image Inset mobile behavior, and it allows the image to reach the browser edges while keeping the content object aligned with the content. You can use a tall image because the image is used as the block background image rather than an image object within the block. You achieve this look with a compbination of settings that limit the background image width while using flexbox to size and align the content object.

• Insert a DOM Object block into the page.
  • Turn on flex mode by clicking the Flex toolbar button. You may also turn on/off flex mode from the Display as Flexbox setting in the Flexbox panel.
    • Typically you would use flexbox to create rows and columns of objects that behave responsively across viewports sizes. In this example you are using it to size and position the content object as to “overlap” the image.
  • Open the Flexbox panel in the block inspector (sidebar).
    • Set the Column Limit / Width % Divisor to 2. This will size the content object width to 50% of the available space outside of mobile mode.
    • Set the Flex Item Horizontal Alignment to “Right”. This will allow us to overlap the image from the right side.
  • Assign “Full Content Aligned” for the Block Layout in the block editor toolbar. [tutorial]
    • This allows the block left and right edges to reach the viewport edges while keeping the block contents (objects) aligned with the page content. You may also assign the Block Layout from the Block Settings panel.
  • Open the Block Styling panel.
    • Choose a Background Image from your Media Library. [tutorial]
    • Set the Background Image Size to 55%. This creates a 5% overlap using a 50% width content object. For example, if you were to set it to 45% the image would have a 5% space between it and the content object.
• Insert a DOM Object block into the nested content area of the current DOM Object block. This will allow us to contain and style the content object.
  • Open the Block Styling panel.
    • Choose a Background Color, this example uses white.
    • Choose a Box Shadow Color, this example sues a medium blue.
    • Set the Padding to 50px.
• Now insert a DOM Text block into the nested content area of the inner DOM Object block.
  • Open the Block Settings panel.
    • Set the Font Size to 40px.
    • Set the Font Weight to “Normal”.
• Enter some text below the DOM Text block, this example uses some latin.
  • 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.
• Insert a DOM Button block into the nested content area below your text.
  • Open the Button Options panel of the DOM Button block and enter a Link or PopUp ID. [tutorial]
  • In this example we enter “MORE ABOUT US” into the button text in the block editor.

Example #2 – Category Boxes

This example uses Media Split blocks as children of a DOM Object block to create mobile-responsive boxes with graphics and links to categories on the site.

Development

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More…

Analytics

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More…

SEO

Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Read More…

• Insert a DOM Object block into the page.
• Assign “Full Content Aligned” for the Block Layout in the block editor toolbar. [tutorial]
• Open the Block Styling panel.
  • Choose a Background Color, this example uses a light blue.
  • Set the Padding Top and Padding Bottom to 30px each. This creates space above and below the boxes while preserving the content edge alignment.
• Turn on flex mode by clicking the Flex toolbar button.
• Open the Flexbox panel.
  • Set the Column Limit / Width % Divisor to 3.
  • Set the Item Spacing to 10px. This creates a 10px space between the flex-items (child blocks) both horizontally and vertically.
  • Set the Item Minimum Width to 350px. This allows flexbox to size the items to suit the available space while keeping them from being squeezed too much before dropping them to the next line. This presumes that the page content width is greater than 3x objects at 350px and 2x gaps of 10px (3×350 + 2×20 = 1090 minimum content width).
  • Set the Rounded Corners by Pixels to 10px.
  • Choose a Box Shadow Color, this example links the color to the Accelerate theme’s Base Color – Medium setting in the Theme Color Palette. [tutorial]
  • Set the Padding to 20px. [tutorial]
• Insert a Media Split block into the nested content area of the current DOM Object block.
  • Choose an image or graphic from the Media Library. [tutorial]
  • Open the Media Settings panel.
    • Set the Image Max-Width by % to 0, this will open another width setting allowing you to size by pixels.
    • Set the Image Max-Width by Pixels to 100px.
  • Enter some text into the Title field in the Media Split block editor. This example uses “Development”.
  • Enter some text into the nested content area. This example uses some latin to fill space.
  • Insert a DOM Button block into the nested content area below your text.
    • Open the Button Options panel of the DOM Button block and enter a Link or PopUp ID. [tutorial] This examples uses a link to the associated category.
    • Open the Button Styling panel and turn off Apply the “button” Class. [tutorial] This will allow the button to act as a normal link, inheriting styles from the stylesheets. You may customize the text or even create your own button look using the available styling settings.
• With the Media Split block selected, click the right-most button on the block editor toolbar and “Duplicate” the block… then do it again.
• You now have 3 identical Media Split blocks that you can simply edit to suit each category, just change the image, title, content text and button link in the new blocks.

Example #3 – Product Comparison Cards

This example uses all five DOM blocks to create a custom product comparison block.

• Insert a DOM Object block into the page.
• Turn on flex mode by clicking the Flex toolbar button.
• Open the Flexbox panel.
  • Set the Column Limit / Width % Divisor to 3.
  • Set the Item Spacing to 15px. This creates a 15px space between the flex-items (child blocks) both horizontally and vertically.
  • Set the Item Minimum Width to 350px. This allows flexbox to size the items to suit the available space while keeping them from being squeezed too much before dropping them to the next line. This presumes that the page content width is greater than 3x objects at 350px and 2x gaps of 10px (3×350 + 2×20 = 1090 minimum content width).
  • Set the Rounded Corners by Pixels to 10px.
  • Choose a Box Shadow Color, this example links the color to the Accelerate theme’s Base Color – Medium setting in the Theme Color Palette. [tutorial]
  • Set the Padding to 20px. [tutorial]
• Insert a DOM Card block into the nested content area of the current DOM Object block.
  • Enter some text into the Title field in the block editor.
  • This example leaves out the tab on the first card and uses the default gray for the card top and border.
  • Insert a DOM Media block into the nested content area of the current DOM Card block.
    • Choose an image or graphic from the Media Library. [tutorial]
  • Insert a DOM Text block after the DOM Media block in the nested content area.
    • You could just type in some text in a paragraph block, but the DOM Text block allows you many more options for styling the text object.
    • Enter some text into the DOM Text block.
    • Open the Block Settings panel.
      • Set the Top Margin to 20px to create space btween the text and the image above it.
      • Choose “Center” Text Alignment. This can also be set from the block toolbar.
  • Insert a DOM Object block after the DOM Text block in the nested content area. We will use this block to create a felxbox for displaying two buttons side-by-side.
    • Turn on flex mode by clicking the Flex toolbar button.
    • Open the Flexbox panel.
      • Set the Column Limit / Width % Divisor to 3.
      • Set the Item Spacing to 10px. This ensures that if the buttons become stacked vertically in small viewports, they will still have some space between them.
    • Insert a DOM Button block in the current DOM Object block’s nested content area.
      • Open the Button Options panel of the DOM Button block and enter a Link or PopUp ID. [tutorial]
      • In this example we enter “DEMO SITE” into the button text in the block editor and link to the associated demo website.
    • With the DOM Button block selected, click the right-most button on the block editor toolbar and “Duplicate” the block.
      • Edit the button text and link to suit your needs, this example uses “Learn More” and links to the associate product page.
• With the DOM Card block selected, click the right-most button on the block editor toolbar and “Duplicate” the block… then do it again.
• You now have 3 identical DOM Card blocks that you can simply edit to suit each product, just change the card colors, image, text, and button links in the new blocks.
  • This example adds tab text to the 2nd and 3rd cards to designate them as supporting “WooCommerce”.
  • This example also uses differnt colors for each card. Select a card and open the Card Style panel.
    • Choose a Card Top Color for each card. If you choose a light color, be sure to choose a complimentary Card Top Font Color.