From 200304819e488cb4c5a209f9fc11c8cbc31756ae Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 27 Jan 2023 15:34:45 -0800 Subject: [PATCH 1/8] TreeSelect: remove margin overrides and add new opt-in prop --- .../src/query-controls/author-select.tsx | 1 + .../src/query-controls/category-select.tsx | 1 + .../hierarchical-term-selector.js | 47 ++++++++++--------- .../src/components/post-taxonomies/style.scss | 22 +++------ 4 files changed, 34 insertions(+), 37 deletions(-) diff --git a/packages/components/src/query-controls/author-select.tsx b/packages/components/src/query-controls/author-select.tsx index cd4c6fd816c4c..fb5f575108230 100644 --- a/packages/components/src/query-controls/author-select.tsx +++ b/packages/components/src/query-controls/author-select.tsx @@ -27,6 +27,7 @@ export default function AuthorSelect( { ? String( selectedAuthorId ) : undefined } + __nextHasNoMarginBottom /> ); } diff --git a/packages/components/src/query-controls/category-select.tsx b/packages/components/src/query-controls/category-select.tsx index fe12423946f82..9f9c1b3a0f07c 100644 --- a/packages/components/src/query-controls/category-select.tsx +++ b/packages/components/src/query-controls/category-select.tsx @@ -36,6 +36,7 @@ export default function CategorySelect( { : undefined } { ...props } + __nextHasNoMarginBottom /> ); } diff --git a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js index 125cdf9b98c5d..01fbade7d872b 100644 --- a/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js +++ b/packages/editor/src/components/post-taxonomies/hierarchical-term-selector.js @@ -9,7 +9,8 @@ import { TextControl, TreeSelect, withFilters, - __experimentalVStack as VStack, + Flex, + FlexItem, } from '@wordpress/components'; import { useDispatch, useSelect } from '@wordpress/data'; import { useDebounce } from '@wordpress/compose'; @@ -392,11 +393,10 @@ export function HierarchicalTermSelector( { slug } ) { const showFilter = availableTerms.length >= MIN_TERMS_COUNT_FOR_FILTER; return ( - <> + { showFilter && ( { ! loading && hasCreateAction && ( - + + + ) } { showForm && (
- + { !! availableTerms.length && ( ) } - - + + + +
) } - + ); } diff --git a/packages/editor/src/components/post-taxonomies/style.scss b/packages/editor/src/components/post-taxonomies/style.scss index 2d9defe96a6e4..c427185ee3fc6 100644 --- a/packages/editor/src/components/post-taxonomies/style.scss +++ b/packages/editor/src/components/post-taxonomies/style.scss @@ -10,30 +10,20 @@ } .editor-post-taxonomies__hierarchical-terms-choice { - margin-bottom: 8px; + margin-bottom: $grid-unit-10; + &:last-child { + margin-bottom: $grid-unit-05; + } } .editor-post-taxonomies__hierarchical-terms-subchoices { - margin-top: 8px; + margin-top: $grid-unit-10; margin-left: $grid-unit-20; } -.components-button.editor-post-taxonomies__hierarchical-terms-submit, -.components-button.editor-post-taxonomies__hierarchical-terms-add { - margin-top: 12px; -} - .editor-post-taxonomies__hierarchical-terms-label { display: inline-block; - margin-top: 12px; -} - -.editor-post-taxonomies__hierarchical-terms-input { - margin-top: 8px; -} -.editor-post-taxonomies__hierarchical-terms-filter { - margin-bottom: 8px; - width: 100%; + margin-top: $grid-unit-15; } .editor-post-taxonomies__flat-term-most-used { From 6129c92f20d59e70ae4e5cabdc9348d6a151daf0 Mon Sep 17 00:00:00 2001 From: brookewp Date: Fri, 27 Jan 2023 15:54:53 -0800 Subject: [PATCH 2/8] Update changelog --- packages/components/CHANGELOG.md | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index 1ac67cd6d62a4..f1a7b2fecfdc3 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -8,18 +8,19 @@ - `CustomGradientPicker`: Convert to TypeScript ([#48929](https://github.com/WordPress/gutenberg/pull/48929)). - `ColorPicker`: Convert to TypeScript ([#49214](https://github.com/WordPress/gutenberg/pull/49214)). - `GradientPicker`: Convert to TypeScript ([#48316](https://github.com/WordPress/gutenberg/pull/48316)). +- `QueryControls`: Replace bottom margin overrides with `__nextHasNoMarginBottom`([47515](https://github.com/WordPress/gutenberg/pull/47515)). ### Enhancements - `CustomGradientPicker`: improve initial state UI ([#49146](https://github.com/WordPress/gutenberg/pull/49146)). -- `AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout ([#49046](https://github.com/WordPress/gutenberg/pull/49046)). +- `AnglePickerControl`: Style to better fit in narrow contexts and improve RTL layout ([#49046](https://github.com/WordPress/gutenberg/pull/49046)). - `ImageSizeControl`: Use large 40px sizes ([#49113](https://github.com/WordPress/gutenberg/pull/49113)). ### Bug Fix -- `CircularOptionPicker`: force swatches to visually render on top of the rest of the component's content ([#49245](https://github.com/WordPress/gutenberg/pull/49245)). -- `InputControl`: Fix misaligned textarea input control ([#49116](https://github.com/WordPress/gutenberg/pull/49116)). -- `ToolsPanel`: Ensure consistency in menu item order ([#49222](https://github.com/WordPress/gutenberg/pull/49222)). +- `CircularOptionPicker`: force swatches to visually render on top of the rest of the component's content ([#49245](https://github.com/WordPress/gutenberg/pull/49245)). +- `InputControl`: Fix misaligned textarea input control ([#49116](https://github.com/WordPress/gutenberg/pull/49116)). +- `ToolsPanel`: Ensure consistency in menu item order ([#49222](https://github.com/WordPress/gutenberg/pull/49222)). ### Internal From 82a51e5b6f81d28bf7bd980a5562ec0b2ca32dcd Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 8 Feb 2023 15:25:40 -0800 Subject: [PATCH 3/8] Add VStack spacing --- packages/components/src/query-controls/index.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index 91769410b4fa9..2dd11cdf55417 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -11,6 +11,7 @@ import CategorySelect from './category-select'; import FormTokenField from '../form-token-field'; import RangeControl from '../range-control'; import SelectControl from '../select-control'; +import { VStack } from '../v-stack'; import type { QueryControlsProps, QueryControlsWithMultipleCategorySelectionProps, @@ -75,7 +76,7 @@ export function QueryControls( { ...props }: QueryControlsProps ) { return ( - <> + { [ onOrderChange && onOrderByChange && ( ), ] } - + ); } From e184bac66024e7e1d780de5ef066fe6866142a2b Mon Sep 17 00:00:00 2001 From: brookewp Date: Wed, 8 Feb 2023 15:39:28 -0800 Subject: [PATCH 4/8] Add margin override to Latest Posts block to adjust for QueryControls spacing --- .../block-editor/src/components/block-inspector/style.scss | 5 +++++ packages/block-library/src/latest-posts/edit.js | 5 ++++- 2 files changed, 9 insertions(+), 1 deletion(-) diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index 8e114089ad31f..18cb3cd0f5831 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -24,6 +24,11 @@ margin-bottom: 0; } + // Adjust margin-bottom from being applied to the `BaseControl` + .wp-block-latest-posts__sorting-filtering .components-base-control { + margin-bottom: $grid-unit-10; + } + .components-panel__body { border: none; border-top: $border-width solid $gray-200; diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 45266f6ab94c4..39b159e0c3ad2 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -329,7 +329,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { ) } - + Date: Tue, 28 Feb 2023 17:26:19 -0800 Subject: [PATCH 5/8] Update to consistent spacing --- packages/components/src/query-controls/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index 2dd11cdf55417..defb7597a238e 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -76,7 +76,7 @@ export function QueryControls( { ...props }: QueryControlsProps ) { return ( - + { [ onOrderChange && onOrderByChange && ( Date: Tue, 28 Mar 2023 09:08:08 -0700 Subject: [PATCH 6/8] =?UTF-8?q?Add=20Lena=E2=80=99s=20suggestion=20to=20ov?= =?UTF-8?q?erride=20basecontrol=20margin=20for=20query=20control?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/block-inspector/style.scss | 15 ++++++--------- packages/components/src/query-controls/index.tsx | 2 +- 2 files changed, 7 insertions(+), 10 deletions(-) diff --git a/packages/block-editor/src/components/block-inspector/style.scss b/packages/block-editor/src/components/block-inspector/style.scss index 18cb3cd0f5831..07701f2e4b91d 100644 --- a/packages/block-editor/src/components/block-inspector/style.scss +++ b/packages/block-editor/src/components/block-inspector/style.scss @@ -18,15 +18,12 @@ } } - // Reset unexpected margin-bottom from being applied to the `BaseControl` - // component of the `FocalPointPicker` component. - .components-focal-point-picker-control .components-base-control { - margin-bottom: 0; - } - - // Adjust margin-bottom from being applied to the `BaseControl` - .wp-block-latest-posts__sorting-filtering .components-base-control { - margin-bottom: $grid-unit-10; + // Reset unwanted margin-bottom from being applied to BaseControls within certain components. + .components-focal-point-picker-control, + .components-query-controls { + .components-base-control { + margin-bottom: 0; + } } .components-panel__body { diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index defb7597a238e..563f1f14ab0f4 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -76,7 +76,7 @@ export function QueryControls( { ...props }: QueryControlsProps ) { return ( - + { [ onOrderChange && onOrderByChange && ( Date: Wed, 29 Mar 2023 02:40:27 -0700 Subject: [PATCH 7/8] Remove bottom margin from formtokenfield --- packages/components/src/query-controls/index.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/components/src/query-controls/index.tsx b/packages/components/src/query-controls/index.tsx index 563f1f14ab0f4..f325347d10c39 100644 --- a/packages/components/src/query-controls/index.tsx +++ b/packages/components/src/query-controls/index.tsx @@ -143,6 +143,7 @@ export function QueryControls( { props.categorySuggestions && props.onCategoryChange && ( Date: Wed, 29 Mar 2023 23:55:36 -0700 Subject: [PATCH 8/8] Remove unnecessary CSS --- packages/block-library/src/latest-posts/edit.js | 5 +---- packages/editor/src/components/post-taxonomies/style.scss | 5 ----- 2 files changed, 1 insertion(+), 9 deletions(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 39b159e0c3ad2..45266f6ab94c4 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -329,10 +329,7 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { ) } - +