Block vertical centering

[swashbuck]

Subject of the issue

The _componentVerticalAlignment option doesn't work quite as I would expect. When setting a minimum height on the block, using center does not actually center the block's contents vertically.

Wondering if we need a new _blockVerticalAlignment option or if we could modify how _componentVerticalAlignment works?

Your environment

• Framework v5.25.1
• Vanilla theme v9.6.1

Steps to reproduce

1. Create a block with the following properties:

    "_vanilla": {
      "_minimumHeights": {
          "_large": 600,
          "_medium": 600,
          "_small": 0
      },
      "_componentVerticalAlignment": "center"
    },

2. Add a Text component with a small amount of text.

Expected behaviour

Text component should be centered vertically.

Actual behaviour

Text component is top-aligned.

[guywillis]

I think the min height property needs to propagate down a few levels via min-height: inherit; on the block inner / component container elements for the vertical alignment to work with min heights

[github-actions]

🎉 This issue has been resolved in version 9.6.8 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀