is hand-built in PHP * by the parent field's render method (e.g. radio-field-block.php), so it never * passes through WordPress' layout block support and never receives the per-block * .wp-container-*-is-layout-* style that carries flex-direction. The :where() base * above only sets display + align-items, so on the front end is-vertical had no CSS * backing it and fell back to a flex row. Supply the orientation explicitly here, * mirroring the field-wrapper fallback. The double-class specificity (0,2,0) beats * the :where() base while still letting the editor's .wp-container-* style win. */ .craftforms-options-group.is-layout-flex.is-vertical { flex-direction: column; align-items: flex-start; } .craftforms-options-group.is-layout-flex.is-horizontal { flex-direction: row; align-items: center; } /* --------------------------------------------------------------------------- Core Gutenberg Columns layout (for the embed). Forms use core wp:columns/wp:column to place fields side by side. Inside WordPress the flex layout comes from core's block-library stylesheet (wp-includes/blocks/columns/style.css). The embed never ships that file, so without these rules `.wp-block-columns` falls back to block flow and the columns stack. Replicate the essential subset here — scoped under the custom element so it can never leak onto a third-party host page, and without core's `!important` (the scope makes it unnecessary). Per-column widths ride inline as `style="flex-basis:…"` on each column, so they travel with the embedded HTML; only the base `display` was missing. --------------------------------------------------------------------------- */ :where(craftforms-form) .wp-block-columns { display: flex; box-sizing: border-box; flex-wrap: wrap; align-items: initial; } @media (min-width: 782px) { :where(craftforms-form) .wp-block-columns:not(.is-not-stacked-on-mobile) { flex-wrap: nowrap; } :where(craftforms-form) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 0; flex-grow: 1; } :where(craftforms-form) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column[style*="flex-basis"] { flex-grow: 0; } } @media (max-width: 781px) { :where(craftforms-form) .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column { flex-basis: 100%; } } :where(craftforms-form) .wp-block-columns.is-not-stacked-on-mobile { flex-wrap: nowrap; } :where(craftforms-form) .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column { flex-basis: 0; flex-grow: 1; } :where(craftforms-form) .wp-block-columns.is-not-stacked-on-mobile > .wp-block-column[style*="flex-basis"] { flex-grow: 0; } :where(craftforms-form) .wp-block-columns.are-vertically-aligned-top { align-items: flex-start; } :where(craftforms-form) .wp-block-columns.are-vertically-aligned-center { align-items: center; } :where(craftforms-form) .wp-block-columns.are-vertically-aligned-bottom { align-items: flex-end; } :where(craftforms-form) .wp-block-column { flex-grow: 1; min-width: 0; word-break: break-word; overflow-wrap: break-word; } :where(craftforms-form) .wp-block-column.is-vertically-aligned-top { align-self: flex-start; } :where(craftforms-form) .wp-block-column.is-vertically-aligned-center { align-self: center; } :where(craftforms-form) .wp-block-column.is-vertically-aligned-bottom { align-self: flex-end; } :where(craftforms-form) .wp-block-column.is-vertically-aligned-stretch { align-self: stretch; } /* Generic base layout `display` for core Group blocks that use flex/grid layout. Core supplies this from theme.json global styles, also unshipped by the embed. Only `display` is set here; the per-container .wp-container-* rules (gap, flex-direction, justify, grid columns) still arrive via the inline block-supports