From 11c3fe52fbbf7f5ef133d124966538afefdc19a1 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Jan 2023 12:20:19 -0800 Subject: [PATCH 1/4] TextControl: remove margin overrides and add new opt-in prop --- packages/block-editor/src/components/link-control/index.js | 1 + .../block-editor/src/components/link-control/style.scss | 1 - packages/block-editor/src/hooks/anchor.js | 1 + packages/block-editor/src/hooks/custom-class-name.js | 1 + packages/block-library/src/block/edit.js | 1 + packages/block-library/src/button/edit.js | 1 + packages/block-library/src/image/image.js | 1 + packages/block-library/src/list/ordered-list-settings.js | 1 + packages/block-library/src/navigation-link/edit.js | 4 ++++ packages/block-library/src/navigation-submenu/edit.js | 4 ++++ .../src/navigation/edit/navigation-menu-name-control.js | 1 + packages/block-library/src/post-featured-image/edit.js | 1 + packages/block-library/src/post-terms/edit.js | 1 + packages/block-library/src/post-title/edit.js | 1 + .../src/query/edit/inspector-controls/index.js | 1 + packages/block-library/src/table/edit.js | 2 ++ packages/block-library/src/table/editor.scss | 6 ------ .../src/template-part/edit/advanced-controls.js | 1 + .../components/header/template-title/edit-template-title.js | 1 + .../src/components/header/template-title/style.scss | 5 +---- .../editor/src/components/post-publish-panel/postpublish.js | 1 + .../editor/src/components/post-publish-panel/style.scss | 6 +----- packages/editor/src/components/post-slug/index.js | 1 + packages/editor/src/components/post-url/index.js | 1 + 24 files changed, 29 insertions(+), 16 deletions(-) diff --git a/packages/block-editor/src/components/link-control/index.js b/packages/block-editor/src/components/link-control/index.js index f08a8534bebed..2d0f0078a9e76 100644 --- a/packages/block-editor/src/components/link-control/index.js +++ b/packages/block-editor/src/components/link-control/index.js @@ -271,6 +271,7 @@ function LinkControl( { > { showTextControl && ( .components-base-control__field { display: flex; align-items: center; - margin: 0; } .components-base-control__label { diff --git a/packages/block-editor/src/hooks/anchor.js b/packages/block-editor/src/hooks/anchor.js index 804375da6e2d0..027b17d0c243e 100644 --- a/packages/block-editor/src/hooks/anchor.js +++ b/packages/block-editor/src/hooks/anchor.js @@ -68,6 +68,7 @@ export const withInspectorControl = createHigherOrderComponent( const isWeb = Platform.OS === 'web'; const textControl = ( setAttributes( { rel: newRel } ) } diff --git a/packages/block-library/src/image/image.js b/packages/block-library/src/image/image.js index a0ba755a1ef10..bdb40bea62e5d 100644 --- a/packages/block-library/src/image/image.js +++ b/packages/block-library/src/image/image.js @@ -438,6 +438,7 @@ export default function Image( { ( { diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index afdd7446a5cf0..87e9cc38afc7c 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -432,6 +432,7 @@ export default function NavigationLinkEdit( { { setAttributes( { label: labelValue } ); @@ -440,6 +441,7 @@ export default function NavigationLinkEdit( { autoComplete="off" /> { updateAttributes( @@ -463,6 +465,7 @@ export default function NavigationLinkEdit( { ) } /> { setAttributes( { title: titleValue } ); @@ -471,6 +474,7 @@ export default function NavigationLinkEdit( { autoComplete="off" /> { setAttributes( { rel: relValue } ); diff --git a/packages/block-library/src/navigation-submenu/edit.js b/packages/block-library/src/navigation-submenu/edit.js index 3255f4ac812ec..bfb830a9caed2 100644 --- a/packages/block-library/src/navigation-submenu/edit.js +++ b/packages/block-library/src/navigation-submenu/edit.js @@ -393,6 +393,7 @@ export default function NavigationSubmenuEdit( { { setAttributes( { label: labelValue } ); @@ -401,6 +402,7 @@ export default function NavigationSubmenuEdit( { autoComplete="off" /> { setAttributes( { url: urlValue } ); @@ -422,6 +424,7 @@ export default function NavigationSubmenuEdit( { ) } /> { setAttributes( { title: titleValue } ); @@ -430,6 +433,7 @@ export default function NavigationSubmenuEdit( { autoComplete="off" /> { setAttributes( { rel: relValue } ); diff --git a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js index fc32da79dc091..fe1075f004407 100644 --- a/packages/block-library/src/navigation/edit/navigation-menu-name-control.js +++ b/packages/block-library/src/navigation/edit/navigation-menu-name-control.js @@ -14,6 +14,7 @@ export default function NavigationMenuNameControl() { return ( diff --git a/packages/block-library/src/post-terms/edit.js b/packages/block-library/src/post-terms/edit.js index a85e32ff4a9df..f73467782742d 100644 --- a/packages/block-library/src/post-terms/edit.js +++ b/packages/block-library/src/post-terms/edit.js @@ -85,6 +85,7 @@ export default function PostTermsEdit( { diff --git a/packages/block-library/src/query/edit/inspector-controls/index.js b/packages/block-library/src/query/edit/inspector-controls/index.js index 567bcc84f0a0b..9d99e5ad79301 100644 --- a/packages/block-library/src/query/edit/inspector-controls/index.js +++ b/packages/block-library/src/query/edit/inspector-controls/index.js @@ -247,6 +247,7 @@ export default function QueryInspectorControls( { onDeselect={ () => setQuerySearch( '' ) } > style. margin: 0; @@ -82,9 +81,4 @@ input { height: $button-size; } - - - .components-base-control__field { - margin-bottom: 0; - } } diff --git a/packages/block-library/src/template-part/edit/advanced-controls.js b/packages/block-library/src/template-part/edit/advanced-controls.js index 7683615738daf..1c1b83d1a07a7 100644 --- a/packages/block-library/src/template-part/edit/advanced-controls.js +++ b/packages/block-library/src/template-part/edit/advanced-controls.js @@ -75,6 +75,7 @@ export function TemplatePartAdvancedControls( { { isEntityAvailable && ( <> { diff --git a/packages/edit-post/src/components/header/template-title/edit-template-title.js b/packages/edit-post/src/components/header/template-title/edit-template-title.js index 5ad4c58d544e4..4e81fb4d9ee13 100644 --- a/packages/edit-post/src/components/header/template-title/edit-template-title.js +++ b/packages/edit-post/src/components/header/template-title/edit-template-title.js @@ -46,6 +46,7 @@ export default function EditTemplateTitle() { return (
div { - padding: 0; - } + padding: 0; } .edit-site-template-details__group { diff --git a/packages/editor/src/components/post-publish-panel/postpublish.js b/packages/editor/src/components/post-publish-panel/postpublish.js index 3036acdb9d7bb..78b14e6b448e9 100644 --- a/packages/editor/src/components/post-publish-panel/postpublish.js +++ b/packages/editor/src/components/post-publish-panel/postpublish.js @@ -122,6 +122,7 @@ class PostPublishPanelPostpublish extends Component {

{ isEditable && ( Date: Thu, 12 Jan 2023 16:27:25 -0800 Subject: [PATCH 2/4] Remove margin / CSS overrides and replace Flex with VStack & HStack --- .../sidebar/post-template/create-modal.js | 41 +++++++--------- .../add-custom-generic-template-modal.js | 47 ++++++++----------- .../list/actions/rename-menu-item.js | 36 ++++++-------- .../edit-site/src/components/list/style.scss | 4 -- .../reusable-block-convert-button.js | 29 +++++------- .../reusable-blocks-menu-items/style.scss | 4 -- 6 files changed, 65 insertions(+), 96 deletions(-) diff --git a/packages/edit-post/src/components/sidebar/post-template/create-modal.js b/packages/edit-post/src/components/sidebar/post-template/create-modal.js index 259c64ba0b735..5064305d2b585 100644 --- a/packages/edit-post/src/components/sidebar/post-template/create-modal.js +++ b/packages/edit-post/src/components/sidebar/post-template/create-modal.js @@ -7,10 +7,10 @@ import { useState } from '@wordpress/element'; import { serialize, createBlock } from '@wordpress/blocks'; import { Modal, - Flex, - FlexItem, TextControl, Button, + __experimentalHStack as HStack, + __experimentalVStack as VStack, } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { cleanForSlug } from '@wordpress/url'; @@ -108,28 +108,23 @@ export default function PostTemplateCreateModal( { onClose } ) { className="edit-post-post-template__create-form" onSubmit={ submit } > - - - - - - - - + + + - - + - - + + ); diff --git a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js index 15d81dc6e7728..22a387e1b8065 100644 --- a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js +++ b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js @@ -10,10 +10,10 @@ import { useState } from '@wordpress/element'; import { __ } from '@wordpress/i18n'; import { Button, - Flex, - FlexItem, Modal, TextControl, + __experimentalHStack as HStack, + __experimentalVStack as VStack, } from '@wordpress/components'; /** @@ -60,27 +60,22 @@ function AddCustomGenericTemplateModal( { > { isCreatingTemplate && }
- - - - - - - - + + + - - - - + +
); diff --git a/packages/edit-site/src/components/list/actions/rename-menu-item.js b/packages/edit-site/src/components/list/actions/rename-menu-item.js index 6de56b2b2a28e..a3517dfee78c0 100644 --- a/packages/edit-site/src/components/list/actions/rename-menu-item.js +++ b/packages/edit-site/src/components/list/actions/rename-menu-item.js @@ -6,11 +6,11 @@ import { useState } from '@wordpress/element'; import { useDispatch } from '@wordpress/data'; import { Button, - Flex, - FlexItem, MenuItem, Modal, TextControl, + __experimentalHStack as HStack, + __experimentalVStack as VStack, } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { store as noticesStore } from '@wordpress/notices'; @@ -82,23 +82,16 @@ export default function RenameMenuItem( { template, onClose } ) { overlayClassName="edit-site-list__rename-modal" >
- - - - - + + - - + - - + - - + +
) } diff --git a/packages/edit-site/src/components/list/style.scss b/packages/edit-site/src/components/list/style.scss index c3359b752fc05..d7c0432aca9d1 100644 --- a/packages/edit-site/src/components/list/style.scss +++ b/packages/edit-site/src/components/list/style.scss @@ -132,10 +132,6 @@ } } -.edit-site-list__rename-modal-actions { - margin-top: $grid-unit-15; -} - .edit-site-template__actions { button:not(:last-child) { margin-right: $grid-unit-10; diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js index 8762729a8f226..34927a4ce0169 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/reusable-block-convert-button.js @@ -12,8 +12,8 @@ import { Modal, Button, TextControl, - Flex, - FlexItem, + __experimentalHStack as HStack, + __experimentalVStack as VStack, } from '@wordpress/components'; import { symbol } from '@wordpress/icons'; import { useDispatch, useSelect } from '@wordpress/data'; @@ -136,16 +136,14 @@ export default function ReusableBlockConvertButton( { onClose(); } } > - - - + + + - - + - - + + ) } diff --git a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/style.scss b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/style.scss index e1e7564e1b93b..b3c922076faf7 100644 --- a/packages/reusable-blocks/src/components/reusable-blocks-menu-items/style.scss +++ b/packages/reusable-blocks/src/components/reusable-blocks-menu-items/style.scss @@ -1,7 +1,3 @@ .reusable-blocks-menu-items__convert-modal { z-index: z-index(".reusable-blocks-menu-items__convert-modal"); } - -.reusable-blocks-menu-items__convert-modal-actions { - padding-top: $grid-unit-15; -} From c4e9f40c7680cc60afea22dfb407b65475ab4e40 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 13 Jan 2023 21:27:45 -0800 Subject: [PATCH 3/4] Update snapshots for failing tests --- .../test/__snapshots__/index.js.snap | 20 ++----------------- 1 file changed, 2 insertions(+), 18 deletions(-) diff --git a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap index bdae729fd6149..9f3037693e1a8 100644 --- a/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap +++ b/packages/editor/src/components/post-publish-panel/test/__snapshots__/index.js.snap @@ -13,10 +13,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu box-sizing: inherit; } -.emotion-2 { - margin-bottom: calc(4px * 2); -} - .components-panel__row .emotion-2 { margin-bottom: inherit; } @@ -31,10 +27,6 @@ exports[`PostPublishPanel should render the post-publish panel if the post is pu padding: 0; } -.components-panel__row .emotion-8 { - margin-bottom: inherit; -} -
Date: Mon, 16 Jan 2023 17:13:47 -0800 Subject: [PATCH 4/4] Remove CSS margin based on feedback --- .../add-new-template/add-custom-generic-template-modal.js | 2 +- packages/edit-site/src/components/add-new-template/style.scss | 4 ---- 2 files changed, 1 insertion(+), 5 deletions(-) diff --git a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js index 22a387e1b8065..470277248a24b 100644 --- a/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js +++ b/packages/edit-site/src/components/add-new-template/add-custom-generic-template-modal.js @@ -60,7 +60,7 @@ function AddCustomGenericTemplateModal( { > { isCreatingTemplate && }
- +