diff --git a/packages/base-styles/_z-index.scss b/packages/base-styles/_z-index.scss index bdc9ed6aa9ba6d..25f83989d37d40 100644 --- a/packages/base-styles/_z-index.scss +++ b/packages/base-styles/_z-index.scss @@ -189,6 +189,9 @@ $z-layers: ( ".edit-site-layout__canvas-container.is-resizing::after": 100, // Title needs to appear above other UI the section content. ".edit-site-sidebar-navigation-screen__title-icon": 1, + + // Ensure modal footer actions appear above modal contents + ".edit-site-start-template-options__modal__actions": 1, ); @function z-index( $key ) { diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 240d896fac6586..c94d4581d6b003 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -11,6 +11,10 @@ - `TreeGrid`: Update docs with `data-expanded` attribute usage ([#50026](https://github.com/WordPress/gutenberg/pull/50026)). +### Enhancements + +- `Modal`: Add css class to children container ([#50099](https://github.com/WordPress/gutenberg/pull/50099)). + ## 23.9.0 (2023-04-26) ### Internal diff --git a/packages/components/src/modal/index.tsx b/packages/components/src/modal/index.tsx index d9c7b602b83920..a22dc2a4ec6713 100644 --- a/packages/components/src/modal/index.tsx +++ b/packages/components/src/modal/index.tsx @@ -252,7 +252,12 @@ function UnforwardedModal( ) } ) } -
{ children }
+
+ { children } +
diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap index 2ad8e457bae303..5311dfa07b5c4e 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/test/__snapshots__/index.js.snap @@ -43,7 +43,9 @@ exports[`KeyboardShortcutHelpModal should match snapshot when the modal is activ -
+
diff --git a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap index c666ab81e0724f..f9a2573352e95c 100644 --- a/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap +++ b/packages/edit-post/src/components/preferences-modal/test/__snapshots__/index.js.snap @@ -102,7 +102,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
-
+
@@ -723,7 +725,9 @@ exports[`EditPostPreferencesModal should match snapshot when the modal is active
-
+
{ const { getEditedPostType, getEditedPostId } = select( editSiteStore ); @@ -72,13 +70,6 @@ function useStartPatterns( fallbackContent ) { .map( ( pattern ) => { return { ...pattern, blocks: parse( pattern.content ) }; } ), - { - name: 'start-blank', - blocks: parse( - '

' - ), - title: START_BLANK_TITLE, - }, ]; }, [ fallbackContent, slug, patterns ] ); } @@ -87,25 +78,15 @@ function PatternSelection( { fallbackContent, onChoosePattern, postType } ) { const [ , , onChange ] = useEntityBlockEditor( 'postType', postType ); const blockPatterns = useStartPatterns( fallbackContent ); const shownBlockPatterns = useAsyncList( blockPatterns ); - return ( -
{ + onChange( blocks, { selection: undefined } ); + onChoosePattern(); } } - > - { - onChange( 'start-blank' === pattern.name ? [] : blocks, { - selection: undefined, - } ); - onChoosePattern(); - } } - /> -
+ /> ); } @@ -134,6 +115,17 @@ function StartModal( { slug, isCustom, onClose, postType } ) { } } />
+ + + + + ); } diff --git a/packages/edit-site/src/components/start-template-options/style.scss b/packages/edit-site/src/components/start-template-options/style.scss index 9537eaf389a619..85eba9315b4a9a 100644 --- a/packages/edit-site/src/components/start-template-options/style.scss +++ b/packages/edit-site/src/components/start-template-options/style.scss @@ -1,3 +1,31 @@ +.edit-site-start-template-options__modal { + .components-modal__content { + padding-bottom: 0; + } + + .components-modal__children-container { + display: flex; + height: 100%; + flex-direction: column; + + .edit-site-start-template-options__modal__actions { + margin-top: auto; + position: sticky; + bottom: 0; + background-color: $white; + margin-left: - $grid-unit-40; + margin-right: - $grid-unit-40; + padding: $grid-unit-30 $grid-unit-40 $grid-unit-40; + border-top: 1px solid $gray-300; + z-index: z-index(".edit-site-start-template-options__modal__actions"); + } + } + + .block-editor-block-patterns-list { + padding-bottom: $grid-unit-40; + } +} + .edit-site-start-template-options__modal-content .block-editor-block-patterns-list { column-count: 2; column-gap: $grid-unit-30; @@ -28,24 +56,4 @@ box-shadow: 0 0 0 1px $gray-300; } } - - // The start blank pattern is the last and we are selecting it. - .block-editor-block-patterns-list__list-item:nth-last-child(2) { - .block-editor-block-preview__container { - position: absolute; - padding: 0; - background: #f0f0f0; - min-height: $grid-unit-50 * 4; - &::after { - width: 100%; - top: 50%; - margin-top: -1em; - content: var(--wp-edit-site-start-template-options-start-blank); - text-align: center; - } - } - iframe { - display: none; - } - } }