Mono Hero

A hero block with one content area.

Last modified: September 17, 2024

The Mono Hero is a hero block with a background (image) and one content block.
It implements the design by Erik Ferrier for the Dekode Starter Theme.

This block and the editor UI is based on the t2/layout support.
The background image feature is provided by the t2/background-media support.

The Mono Hero can contain any blocks, but only the default Mono Hero Content
block will work out of the box.

link Block name

t2/mono-hero

link Theme.json settings

The editor UI is controlled by the t2/layout support.
See the t2/layout README file for more details about the layout settings.
Set default.maxContainerWidth to constrain horizontal content alignment.

link Mono Hero settings example

theme.json

{
  "settings": {
    "blocks": {
      "t2/mono-hero": {
        "custom": {
          "t2/layout": {
            "default": {
              "maxBlockWidth": "full",
              "maxContainerWidth": "lg",
              "minContainerHeight": "sm",
              "maxContentWidth": "md"
            },
            "maxBlockWidth": {
              "full": "full-width"
            },
            "boxSizing": 0,
            "maxContainerWidth": {
              "lg": "wide-width"
            },
            "minContainerHeight": {
              "none": "",
              "sm": "24rem",
              "md": "32rem",
              "lg": "48rem"
            },
            "maxContentWidth": {
              "sm": "26.25rem",
              "md": "37.5rem",
              "lg": "56.25rem"
            },
            "horContentAlign": "left, center, right",
            "verContentAlign": "top, center, bottom, space-between",
            "horMobileAlign": 0
          }
        }
      }
    }
  }
}

link Special maxWidth values

There are three special values for maxBlock|Container|ContentWidth settings

content-width Use WordPress Content Size.
wide-width Use WordPress Wide Size, adds alignwide class.
full-width Use WordPress Full Size, adds alignfull class.

link Theme.json styles

The Mono Hero padding is defined in styles.blocks.t2/mono-hero.spacing.padding.
If this object is not defined, no padding is applied.

link Mono Hero styles example

theme.json

{
  "styles": {
    "blocks": {
      "t2/mono-hero": {
        "spacing": {
          "padding": {
            "top": "var:preset|spacing|xl",
            "left": "var:preset|spacing|xl",
            "right": "var:preset|spacing|xl",
            "bottom": "var:preset|spacing|xl"
          }
        }
      }
    }
  }
}