Blocks

DOM Object Block

by Creator 3

The DOM Object block is the backbone of the DOM blocks. It can be nested into itself as needed to create all levels of any DOM you wish. We will give an example illustrating the benefits of using a DOM Object as a parent of another DOM Object. View the DOM Blocks tutorial for more advanced examples of using this and other DOM blocks.

Settings Overview

  • Flexbox : You may enable “Flexbox” mode on the block to handle it’s contents as flex items. Flexbox handles object widths and layout in a responsive manner across viewport sizes better than all other CSS layout solutions.
    • Display as Flexbox : Apply the CSS Flexbox rule to this block. This allows it’s children (flex items) to be displayed in responsive rows and columns. You may apply various options and styles to this block’s children. All DOM blocks (including this one) have built-in support for applying these styles. When you turn this on all other flex otions will become available.
    • Column Limit / Width % Divisor : In browsers and larger devices the flex items will attempt to fill out a row with this number of items, this creates “columns” in addition to rows. The items will attempt to respect this setting while also honoring Minumim Width settings. When the width of items in a row exceeds the available space, the last item will drop and the remaining items will grow to fill the space. In smaller browsers, flex items will be displayed full width (or centered) in their own row with vertical space honoring the Item Spacing setting.
    • Retain Flex in Mobile : By default flex items will display full-width in mobile mode. Turn this on to let flexbox determine their width.
    • Flex Item Vertical Alignment : Size items to fit their contents and align them vertically to their siblings in their current row. By default flex item height is determined by the tallest item in it’s current row, so all items in a row match in height. Giving them a vertical alignment forces their height to match their contents rather than their siblings.
    • Flex Item Horizontal Alignment : Size items to fit the columns setting and horizontally align items in overflow rows (not full). By default flex item width is determined by the item’s content while growing to fill the current row. Giving them a horizontal alignment forces their width to match the columns as best they can with respect to their own Minimum Width setting.
    • Item Spacing : The space in pixels to insert between rows and the items in rows. In mobile mode this setting is used for the vertical space between items.
    • Item Minimum Height :
    • Item Minimum Width :
    • Rounded Corners by Pixels :
    • Block level styling options can be applied to children from the parent block where they have support for these options. [tutorial]
  • Block Settings : Includes block level layout and and mobile mode options. [tutorial]
  • Block Styling : Includes background, border, shadow and padding options. [tutorial]
  • Text – Font : Includes alignment and styling options available for text. [tutorial]

Object Map (DOM)

  • root object (div) targeted node from Block Settings, Block Styling and Text / Font panels : You may assign style settings that apply to this entire block.
    • 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.

Example – something different

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.

  • Insert a DOM Object block into the page.
  • 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 Settings panel in the block inspector (sidebar).
    • Set the Block Minimum Height to 600px. This way we can create a banner with a text object at the top while keeping most of the image visible on most viewport sizes.
  • Open the Block Styling panel.
    • Choose a Background Image from your Media Library. [tutorial] This example uses a shipyard image that works well with an overlayed text object at the top.
    • Set the Padding Top and Padding Bottom to 15px, just enough to offset the content object from the top of the block.
      • The bottom padding is not necessary unless the text object becomes tall enough to push past the minimum height. In this example with this text and 600px height, that would never happen… but it is something to consider when building your own block.
  • 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.
    • Enter text into the nested content area, this example uses some latin.
    • Open the Block Styling panel.
      • Choose a Border Color, this example uses white.
        • Set the Border Width to 10px,
        • Turn off the Left and Right Border Sides.
        • Set the Border Style to “Double”.
      • Set the Rounded Corners by Pixels to 40px. This in combination with the double border creates a unique looking border for your text object.
      • Choose a Box Shadow Color, this example uses white.
        • Turn on Inset Shadow.
        • Set the Shadow Blur to 30.
        • Set the Shadow Spread to 10.
        • This combination of shadow settings creates a frame-lighting effect.
      • Set the Padding to 15px, this gives a small space between the text and the border. But in this example we want the left and right sides to stand out even more.
      • Set the Padding Left and Padding Right to 100px. This overrides the main Padding setting giving us a 15px vertical and 100px horizontal padding.
    • Open the Text / Font panel.
      • Choose “Center” Text Alignment, this can also be set from the block editor toolbar.
      • Choose a Font Color, this example uses white.
      • Choose a Text Shadow Color, this example uses black. White text with black shadow is the best choice for text over an image.
      • Turn on Double Shadow, this helps the text stand out more.
      • Set the Font Weight to “Bold”, this further helps shadowed text stand out over an image.

Comments are closed.