diff --git a/packages/block-editor/src/components/block-pattern-setup/index.js b/packages/block-editor/src/components/block-pattern-setup/index.js index 74ebd05ae661f..65fee0e550e17 100644 --- a/packages/block-editor/src/components/block-pattern-setup/index.js +++ b/packages/block-editor/src/components/block-pattern-setup/index.js @@ -175,7 +175,7 @@ const BlockPatternSetup = ( { activeSlide={ activeSlide } patterns={ patterns } onBlockPatternSelect={ onPatternSelectCallback } - height={ contentHeight - 2 * 60 } + height={ contentHeight - ( 74 + 60 ) } // Content - ( modal header + modal actions ) /> { openModalCount++; @@ -104,6 +108,19 @@ function Modal( props, forwardedRef ) { } } + const onContentContainerScroll = useCallback( + ( e ) => { + const scrollY = e?.target?.scrollTop ?? -1; + + if ( ! hasScrolledContent && scrollY > 0 ) { + setHasScrolledContent( true ); + } else if ( hasScrolledContent && scrollY <= 0 ) { + setHasScrolledContent( false ); + } + }, + [ hasScrolledContent ] + ); + return createPortal( // eslint-disable-next-line jsx-a11y/no-static-element-interactions
{ ! __experimentalHideHeader && (
@@ -168,7 +187,7 @@ function Modal( props, forwardedRef ) { { isDismissible && ( { isOpen && ( - + +

+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, + sed do eiusmod tempor incididunt ut labore et magna + aliqua. Ut enim ad minim veniam, quis nostrud + exercitation ullamco laboris nisi ut aliquip ex ea ea + commodo consequat. Duis aute irure dolor in + reprehenderit in voluptate velit esse cillum dolore eu + fugiat nulla pariatur. Excepteur sint occaecat cupidatat + non proident, sunt in culpa qui officia deserunt mollit + anim id est laborum. +

+ diff --git a/packages/components/src/modal/style.scss b/packages/components/src/modal/style.scss index 7f96b1ab0c691..0b79c8bc80007 100644 --- a/packages/components/src/modal/style.scss +++ b/packages/components/src/modal/style.scss @@ -8,6 +8,7 @@ background-color: rgba($black, 0.35); z-index: z-index(".components-modal__screen-overlay"); display: flex; + backdrop-filter: blur($grid-unit); // This animates the appearance of the white background. @include edit-post__fade-in-animation(); @@ -63,13 +64,13 @@ // modal screen). .components-modal__header { box-sizing: border-box; - border-bottom: $border-width solid $gray-300; + border-bottom: $border-width solid transparent; padding: 0 $grid-unit-40; display: flex; flex-direction: row; justify-content: space-between; align-items: center; - height: $header-height; + height: $header-height + $grid-unit-20; width: 100%; z-index: z-index(".components-modal__header"); position: absolute; @@ -77,7 +78,7 @@ left: 0; .components-modal__header-heading { - font-size: 1rem; + font-size: 1.2rem; font-weight: 600; } @@ -90,6 +91,10 @@ position: relative; left: $grid-unit-10; } + + .components-modal__content.has-scrolled-content:not(.hide-header) & { + border-bottom-color: $gray-300; + } } .components-modal__header-heading-container { @@ -113,26 +118,12 @@ // Modal contents. .components-modal__content { flex: 1; - margin-top: $header-height; + margin-top: $header-height + $grid-unit-20; padding: 0 $grid-unit-40 $grid-unit-30; overflow: auto; - // Emulate margin-bottom for the header. Uses a pseudo-element since the - // absolutely positioned header’s margins wouldn’t effect siblings and - // padding-top on the content element would effect positioning of any - // sticky elements within. - &::before { - content: ""; - display: block; - margin-bottom: $grid-unit-30; - } - &.hide-header { margin-top: 0; padding-top: $grid-unit-30; - - &::before { - content: none; - } } } diff --git a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss index 4c0ce9a9526cc..c21c5a5fc7db2 100644 --- a/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/edit-post/src/components/keyboard-shortcut-help-modal/style.scss @@ -3,11 +3,6 @@ margin: 0 0 2rem 0; } - &__main-shortcuts .edit-post-keyboard-shortcut-help-modal__shortcut-list { - // Push the shortcut to be flush with top modal header. - margin-top: -$grid-unit-30 -$border-width; - } - &__section-title { font-size: 0.9rem; font-weight: 600; diff --git a/packages/edit-post/src/components/sidebar/post-template/style.scss b/packages/edit-post/src/components/sidebar/post-template/style.scss index b44a8167a4760..0cff4fdd96c22 100644 --- a/packages/edit-post/src/components/sidebar/post-template/style.scss +++ b/packages/edit-post/src/components/sidebar/post-template/style.scss @@ -29,16 +29,6 @@ margin: $grid-unit-10; } -.edit-post-post-template__create-modal { - .components-modal__header { - border-bottom: none; - } - - .components-modal__content::before { - margin-bottom: $grid-unit-05; - } -} - .edit-post-post-template__create-form { @include break-medium() { width: $grid-unit * 40; diff --git a/packages/edit-post/src/components/sidebar/template/style.scss b/packages/edit-post/src/components/sidebar/template/style.scss new file mode 100644 index 0000000000000..38d593f44d76d --- /dev/null +++ b/packages/edit-post/src/components/sidebar/template/style.scss @@ -0,0 +1,35 @@ +.edit-post-template__modal { + .components-base-control { + @include break-medium() { + width: $grid-unit * 40; + } + } +} + +.edit-post-template__modal-actions { + margin-top: $grid-unit-15; +} + +.edit-post-template-modal__tip { + padding: $grid-unit-20 $grid-unit-30; + background: $gray-100; + border-radius: $radius-block-ui; + + @include break-medium() { + width: $grid-unit * 30; + } +} + +.edit-post-template__notice { + margin: 0 0 $grid-unit-10 0; + + .components-notice__content { + margin: 0; + } +} + +.edit-post-template__actions { + button:not(:last-child) { + margin-right: $grid-unit-10; + } +} diff --git a/packages/edit-post/src/components/start-page-options/style.scss b/packages/edit-post/src/components/start-page-options/style.scss index 3039977c69fb3..e3e0c0155ed71 100644 --- a/packages/edit-post/src/components/start-page-options/style.scss +++ b/packages/edit-post/src/components/start-page-options/style.scss @@ -11,15 +11,6 @@ @include break-large() { height: 70%; } - - // @todo: Consider this for a minimal modal prop. - .components-modal__header { - border-bottom: none; - } - - .components-modal__content::before { - content: none; - } } // 2 column masonry layout. diff --git a/packages/edit-site/src/components/keyboard-shortcut-help-modal/style.scss b/packages/edit-site/src/components/keyboard-shortcut-help-modal/style.scss index 39c1b6e3fad59..6d9376f7cc408 100644 --- a/packages/edit-site/src/components/keyboard-shortcut-help-modal/style.scss +++ b/packages/edit-site/src/components/keyboard-shortcut-help-modal/style.scss @@ -3,11 +3,6 @@ margin: 0 0 2rem 0; } - &__main-shortcuts .edit-site-keyboard-shortcut-help-modal__shortcut-list { - // Push the shortcut to be flush with top modal header. - margin-top: -$grid-unit-30 -$border-width; - } - &__section-title { font-size: 0.9rem; font-weight: 600; diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index cf1f20b7c7927..e6cf7220cdf60 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -131,14 +131,6 @@ width: $grid-unit * 40; } } - - .components-modal__header { - border-bottom: none; - } - - .components-modal__content::before { - margin-bottom: $grid-unit-05; - } } .edit-site-list__rename-modal-actions { diff --git a/packages/interface/src/components/preferences-modal/style.scss b/packages/interface/src/components/preferences-modal/style.scss index 007b4b7c4e5e5..4e70f9f817e64 100644 --- a/packages/interface/src/components/preferences-modal/style.scss +++ b/packages/interface/src/components/preferences-modal/style.scss @@ -16,10 +16,6 @@ @media (max-width: #{ ($break-medium - 1) }) { .components-modal__content { padding: 0; - - &::before { - content: none; - } } } }