diff --git a/packages/edit-site/src/components/add-new-pattern/index.js b/packages/edit-site/src/components/add-new-pattern/index.js index bca37df9715004..95823c20748bd0 100644 --- a/packages/edit-site/src/components/add-new-pattern/index.js +++ b/packages/edit-site/src/components/add-new-pattern/index.js @@ -108,7 +108,11 @@ export default function AddNewPattern() { diff --git a/packages/edit-site/src/components/add-new-template/index.js b/packages/edit-site/src/components/add-new-template/index.js index 90d40a013b82ec..75d69f32e823d2 100644 --- a/packages/edit-site/src/components/add-new-template/index.js +++ b/packages/edit-site/src/components/add-new-template/index.js @@ -354,6 +354,7 @@ function NewTemplate() { variant="primary" onClick={ () => setShowModal( true ) } label={ postType.labels.add_new_item } + __next40pxDefaultSize > { postType.labels.add_new_item } diff --git a/packages/edit-site/src/components/page-pages/index.js b/packages/edit-site/src/components/page-pages/index.js index 391db38fbc51b6..c20fff8851c829 100644 --- a/packages/edit-site/src/components/page-pages/index.js +++ b/packages/edit-site/src/components/page-pages/index.js @@ -498,7 +498,11 @@ export default function PagePages() { actions={ addNewLabel && ( <> - { showAddPageModal && ( diff --git a/packages/edit-site/src/components/page-patterns/header.js b/packages/edit-site/src/components/page-patterns/header.js index ebb4a647f28ad9..a128daa6ed58f9 100644 --- a/packages/edit-site/src/components/page-patterns/header.js +++ b/packages/edit-site/src/components/page-patterns/header.js @@ -58,9 +58,12 @@ export default function PatternsHeader( { } return ( - - - + + + { title } @@ -96,7 +99,12 @@ export default function PatternsHeader( { { description ? ( - + { description } ) : null } diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index af708356aa4b3e..6de771389a73d0 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -87,14 +87,22 @@ .edit-site-patterns__section-header { border-bottom: 1px solid #f0f0f0; - min-height: 72px; - padding: $grid-unit-30 $grid-unit-60; + padding: $grid-unit-20 $grid-unit-60; position: sticky; top: 0; z-index: 2; flex-shrink: 0; transition: padding ease-out 0.1s; @include reduce-motion("transition"); + min-height: $grid-unit-50; + + .edit-site-patterns__title { + min-height: $grid-unit-50; + } + + .edit-site-patterns__sub-title { + margin-bottom: $grid-unit-10; + } } .edit-site-patterns__pattern-title { diff --git a/packages/edit-site/src/components/page/header.js b/packages/edit-site/src/components/page/header.js index 274fd395a16f1d..f138fa8fae09d3 100644 --- a/packages/edit-site/src/components/page/header.js +++ b/packages/edit-site/src/components/page/header.js @@ -5,7 +5,7 @@ import { __experimentalHeading as Heading, __experimentalText as Text, __experimentalHStack as HStack, - FlexBlock, + __experimentalVStack as VStack, FlexItem, } from '@wordpress/components'; @@ -15,8 +15,8 @@ import { export default function Header( { title, subTitle, actions } ) { return ( - - + + { title } - { subTitle && ( - - { subTitle } - - ) } - - - { actions } - - + + { actions } + + + { subTitle && ( + + { subTitle } + + ) } + ); } diff --git a/packages/edit-site/src/components/page/style.scss b/packages/edit-site/src/components/page/style.scss index acf3a40d08b174..b2ec2b2f178448 100644 --- a/packages/edit-site/src/components/page/style.scss +++ b/packages/edit-site/src/components/page/style.scss @@ -17,15 +17,17 @@ z-index: z-index(".edit-site-page-header"); transition: padding ease-out 0.1s; @include reduce-motion("transition"); - .components-text { - color: $gray-800; - } + .components-heading { color: $gray-900; } + + .edit-site-page-header__page-title { + min-height: $grid-unit-50; + } + .edit-site-page-header__sub-title { - margin-top: $grid-unit-10; - color: $gray-700; + margin-bottom: $grid-unit-10; } }