We’re thrilled to announce the release of Advanced Block Controls version 1.9.0! This release marks the end of Phase Two of our roadmap, a major step forward in delivering on our promise to bring advanced, developer-grade styling capabilities to Gutenberg. With this update, we’re introducing a set of new set of controls: Sizing, Position, and Layout, designed to give you a control over the structure and placement of your blocks.

1. The Sizing Control: Precision in Every Dimension

Take full control over block dimensions with the new Sizing control. Key features include:

• Standard & Advanced Dimensions: Set width and height, along with min-width, min-height, max-width, and max-height.
• Aspect Ratio: Easily maintain a block’s proportions by setting a specific aspect ratio, perfect for images and video containers.
• Keyword-Based Sizing: For any dimension, you can switch from numeric inputs to keyword-based values like auto, fit-content, or max-content for more dynamic sizing.

2. The Position Control: Master Your Block’s Placement

The Position control unlocks the ability to manage block placement with the full power of CSS positioning, from simple adjustments to complex layered designs. Key features include:

• Full Position Properties: Set a block’s position to relative, absolute, fixed, sticky, or static.
• Intuitive Offset Picker: Use the visual 9-point alignment picker to instantly set offsets or fine-tune them with precise numerical inputs for top, right, bottom, and left.
• Z-Index & Overflow Control: Easily manage the stacking order of overlapping blocks with z-index and control content visibility with overflow-x and overflow-y settings.

3. The Layout Control: Define Your Block’s Foundation

The new Layout control is a game-changer for how you structure content. It gives you full access to the CSS display property, allowing you to instantly transform any block into a flex or grid container. Key features include:

• Complete Display Options: Switch between block, inline, flex, grid, and more to fundamentally change how a block behaves.
• Advanced Flexbox Settings: When using flex, you can control flex-direction, justify-content, align-items, flex-wrap, and column/row gaps.
• Powerful Grid Settings: For grid layouts, you can define grid-template-columns, grid-template-rows, grid-auto-flow, and gaps.
• Child Element Configuration: Fine-tune the alignment and order of elements within a layout container.

A Note on Usage

It’s important to understand that the Layout control is a styling tool, Its usage will largely depend on the block markup, it is not intended to turn core blocks like Columns into complex, nested grids. It applies CSS styling to existing blocks, giving you a new layer of flexibility right where you need it.

What This Means for You

With version 1.9.0, you can take your existing core or third-party blocks further than ever. These new controls unlock advanced design possibilities, no extra blocks needed. Update now and start exploring what’s newly possible inside the editor.