edits based on PR feedback

WordPress · Jan 4, 2023 · 7a1f9d7 · 7a1f9d7 · github-actions · Jan 4, 2023
1 parent 62e356a
commit 7a1f9d7
Show file tree

Hide file tree

Showing 10 changed files with 39 additions and 51 deletions.
diff --git a/packages/block-editor/src/components/font-family/index.js b/packages/block-editor/src/components/font-family/index.js
@@ -40,7 +40,6 @@ export default function FontFamilyControl( {
 	];
 	return (
 		<SelectControl
-			__nextHasNoMarginBottom
 			label={ __( 'Font' ) }
 			options={ options }
 			value={ value }

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Internal
 
 -   `Dashicon`: remove unnecessary type for `className` prop ([46849](https://github.com/WordPress/gutenberg/pull/46849)).
+-   `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
 
 ## 23.1.0 (2023-01-02)
 
@@ -42,7 +43,6 @@
 -   Lighten the border color on control components ([#46252](https://github.com/WordPress/gutenberg/pull/46252)).
 -   `Popover`: Prevent unnecessary paint when scrolling by using transform instead of top/left positionning ([#46187](https://github.com/WordPress/gutenberg/pull/46187)).
 -   `CircularOptionPicker`: Prevent unecessary paint on hover ([#46197](https://github.com/WordPress/gutenberg/pull/46197)).
--   `ColorPicker` & `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom` ([#46448](https://github.com/WordPress/gutenberg/pull/46448)).
 
 ### Experimental
 

diff --git a/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js b/...dit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/navigation-inspector.js
@@ -3,10 +3,7 @@
  */
 import { useSelect } from '@wordpress/data';
 import { useState, useEffect } from '@wordpress/element';
-import {
-	SelectControl,
-	__experimentalVStack as VStack,
-} from '@wordpress/components';
+import { SelectControl } from '@wordpress/components';
 import { store as coreStore, useEntityBlockEditor } from '@wordpress/core-data';
 import {
 	store as blockEditorStore,
@@ -171,7 +168,7 @@ export default function NavigationInspector() {
 	}, [ isLoadingInnerBlocks, hasLoadedInnerBlocks ] );
 
 	return (
-		<VStack>
+		<div className="edit-site-navigation-inspector">
 			{ hasResolvedNavigationMenus && ! hasNavigationMenus && (
 				<p className="edit-site-navigation-inspector__empty-msg">
 					{ __( 'There are no Navigation Menus.' ) }
@@ -184,6 +181,7 @@ export default function NavigationInspector() {
 			{ hasResolvedNavigationMenus && hasMoreThanOneNavigationMenu && (
 				<SelectControl
 					__nextHasNoMarginBottom
+					className="edit-site-navigation-inspector__select-menu"
 					aria-controls={
 						// aria-controls should only apply when referenced element is in DOM
 						hasLoadedInnerBlocks ? navMenuListId : undefined
@@ -220,6 +218,6 @@ export default function NavigationInspector() {
 					{ __( 'Navigation Menu is empty.' ) }
 				</p>
 			) }
-		</VStack>
+		</div>
 	);
 }
diff --git a/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss b/packages/edit-site/src/components/sidebar-edit-mode/navigation-menu-sidebar/style.scss
@@ -22,6 +22,10 @@
 	.block-editor-list-view-block__menu-cell {
 		padding-right: 0;
 	}
+
+	.edit-site-navigation-inspector__select-menu {
+		margin-bottom: $grid-unit-10;
+	}
 }
 
 .edit-site-navigation-inspector__placeholder {

diff --git a/packages/edit-site/src/components/template-details/edit-template-title.js b/packages/edit-site/src/components/template-details/edit-template-title.js
@@ -17,6 +17,7 @@ export default function EditTemplateTitle( { template } ) {
 
 	return (
 		<TextControl
+			__nextHasNoMarginBottom
 			label={ __( 'Title' ) }
 			value={ forceEmpty ? '' : title }
 			help={

diff --git a/packages/edit-site/src/components/template-details/style.scss b/packages/edit-site/src/components/template-details/style.scss
@@ -2,10 +2,6 @@
 	.edit-site-template-details__group {
 		margin: 0;
 		padding: $grid-unit-20;
-
-		.edit-site-template-details__area-select {
-			margin-bottom: $grid-unit-10;
-		}
 	}
 
 	.edit-site-template-details__group + .edit-site-template-details__group {

diff --git a/packages/edit-site/src/components/template-details/template-part-area-selector.js b/packages/edit-site/src/components/template-details/template-part-area-selector.js
@@ -29,7 +29,6 @@ export default function TemplatePartAreaSelector( { id } ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
-			className="edit-site-template-details__area-select"
 			label={ __( 'Area' ) }
 			labelPosition="top"
 			options={ areaOptions }

diff --git a/packages/widgets/src/blocks/legacy-widget/edit/index.js b/packages/widgets/src/blocks/legacy-widget/edit/index.js
@@ -13,7 +13,7 @@ import {
 	BlockIcon,
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
-import { Spinner, Placeholder } from '@wordpress/components';
+import { Flex, FlexBlock, Spinner, Placeholder } from '@wordpress/components';
 import { brush as brushIcon } from '@wordpress/icons';
 import { __ } from '@wordpress/i18n';
 import { useState, useCallback } from '@wordpress/element';
@@ -57,32 +57,34 @@ function Empty( { attributes: { id, idBase }, setAttributes } ) {
 			icon={ <BlockIcon icon={ brushIcon } /> }
 			label={ __( 'Legacy Widget' ) }
 		>
-			<div className="wp-block-legacy-widget__selector-container">
-				<WidgetTypeSelector
-					selectedId={ id ?? idBase }
-					onSelect={ ( { selectedId, isMulti } ) => {
-						if ( ! selectedId ) {
-							setAttributes( {
-								id: null,
-								idBase: null,
-								instance: null,
-							} );
-						} else if ( isMulti ) {
-							setAttributes( {
-								id: null,
-								idBase: selectedId,
-								instance: {},
-							} );
-						} else {
-							setAttributes( {
-								id: selectedId,
-								idBase: null,
-								instance: null,
-							} );
-						}
-					} }
-				/>
-			</div>
+			<Flex>
+				<FlexBlock>
+					<WidgetTypeSelector
+						selectedId={ id ?? idBase }
+						onSelect={ ( { selectedId, isMulti } ) => {
+							if ( ! selectedId ) {
+								setAttributes( {
+									id: null,
+									idBase: null,
+									instance: null,
+								} );
+							} else if ( isMulti ) {
+								setAttributes( {
+									id: null,
+									idBase: selectedId,
+									instance: {},
+								} );
+							} else {
+								setAttributes( {
+									id: selectedId,
+									idBase: null,
+									instance: null,
+								} );
+							}
+						} }
+					/>
+				</FlexBlock>
+			</Flex>
 		</Placeholder>
 	);
 }

diff --git a/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js b/packages/widgets/src/blocks/legacy-widget/edit/widget-type-selector.js
@@ -28,7 +28,6 @@ export default function WidgetTypeSelector( { selectedId, onSelect } ) {
 	return (
 		<SelectControl
 			__nextHasNoMarginBottom
-			className="wp-block-legacy-widget__select-widget"
 			label={ __( 'Select a legacy widget to display:' ) }
 			value={ selectedId ?? '' }
 			options={ [

diff --git a/packages/widgets/src/blocks/legacy-widget/editor.scss b/packages/widgets/src/blocks/legacy-widget/editor.scss
@@ -163,13 +163,3 @@
 	min-width: 400px;
 }
 
-.wp-block-legacy-widget {
-	.wp-block-legacy-widget__selector-container {
-		width: 100%;
-	}
-
-	// Replaces margin on BaseControl
-	.wp-block-legacy-widget__select-widget {
-		margin-bottom: $grid-unit-10;
-	}
-}