From a7beddd10f7c4886cf230291cbbb097e7631f73c Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Aug 2024 03:23:21 +0900 Subject: [PATCH 01/11] Fix in Gallery block --- packages/block-library/src/gallery/edit.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/gallery/edit.js b/packages/block-library/src/gallery/edit.js index f2faa40110dd13..e2809a6730d90c 100644 --- a/packages/block-library/src/gallery/edit.js +++ b/packages/block-library/src/gallery/edit.js @@ -605,7 +605,10 @@ function GalleryEdit( props ) { /> ) } { Platform.isWeb && ! imageSizeOptions && hasImageIds && ( - + { __( 'Resolution' ) } From aa333d53188bf40e027f2dc4b21b8e92a8c4a07d Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Aug 2024 03:32:37 +0900 Subject: [PATCH 02/11] Fix in Latest Posts block --- packages/block-library/src/latest-posts/edit.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/latest-posts/edit.js b/packages/block-library/src/latest-posts/edit.js index 49a24b08f68d77..d42bc0f0669604 100644 --- a/packages/block-library/src/latest-posts/edit.js +++ b/packages/block-library/src/latest-posts/edit.js @@ -303,7 +303,10 @@ export default function LatestPostsEdit( { attributes, setAttributes } ) { } ) } /> - + { __( 'Image alignment' ) } From 4ea9b9f0dd92c1f3a58e5eb25f1d26a65871fe13 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Thu, 8 Aug 2024 06:08:26 +0900 Subject: [PATCH 03/11] Fix in Search block --- packages/block-library/src/search/edit.js | 18 +++++++++--------- packages/block-library/src/search/editor.scss | 7 +++++-- 2 files changed, 14 insertions(+), 11 deletions(-) diff --git a/packages/block-library/src/search/edit.js b/packages/block-library/src/search/edit.js index cfe7b29caf5de0..e2f3bb3999e42c 100644 --- a/packages/block-library/src/search/edit.js +++ b/packages/block-library/src/search/edit.js @@ -28,7 +28,7 @@ import { ToolbarButton, ResizableBox, PanelBody, - BaseControl, + __experimentalVStack as VStack, __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl, } from '@wordpress/components'; @@ -408,12 +408,14 @@ export default function SearchEdit( { - 100 ? 100 : newWidth; - setAttributes( { width: parseInt( filteredWidth, 10 ), } ); @@ -445,9 +446,8 @@ export default function SearchEdit( { value={ `${ width }${ widthUnit }` } units={ units } /> - { [ 25, 50, 75, 100 ].map( ( widthValue ) => { @@ -473,7 +473,7 @@ export default function SearchEdit( { ); } ) } - + diff --git a/packages/block-library/src/search/editor.scss b/packages/block-library/src/search/editor.scss index 35ccfc5e633fc2..ecc244d3341e1e 100644 --- a/packages/block-library/src/search/editor.scss +++ b/packages/block-library/src/search/editor.scss @@ -15,8 +15,11 @@ justify-content: center; text-align: center; } +} - &__components-button-group { - margin-top: 10px; +.wp-block-search__inspector-controls { + .components-base-control { + // Counteract the margin added by the block inspector. + margin-bottom: 0; } } From 58d1297a878d6c7070bd1050559e63f89a442441 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 10 Aug 2024 01:29:53 +0900 Subject: [PATCH 04/11] Fix in Tag Cloud block --- packages/block-library/src/tag-cloud/edit.js | 69 ++++++++++--------- .../block-library/src/tag-cloud/editor.scss | 8 +++ 2 files changed, 44 insertions(+), 33 deletions(-) diff --git a/packages/block-library/src/tag-cloud/edit.js b/packages/block-library/src/tag-cloud/edit.js index 9a2b531b30f8ab..d708cdaa6a9679 100644 --- a/packages/block-library/src/tag-cloud/edit.js +++ b/packages/block-library/src/tag-cloud/edit.js @@ -11,8 +11,8 @@ import { __experimentalUnitControl as UnitControl, __experimentalUseCustomUnits as useCustomUnits, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, + __experimentalVStack as VStack, Disabled, - BaseControl, } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; @@ -110,17 +110,20 @@ function TagCloudEdit( { attributes, setAttributes } ) { const inspectorControls = ( - - setAttributes( { taxonomy: selectedTaxonomy } ) - } - /> - + + + setAttributes( { taxonomy: selectedTaxonomy } ) + } + /> - - - setAttributes( { numberOfTags: value } ) - } - min={ MIN_TAGS } - max={ MAX_TAGS } - required - /> - - setAttributes( { showTagCounts: ! showTagCounts } ) - } - /> + + setAttributes( { numberOfTags: value } ) + } + min={ MIN_TAGS } + max={ MAX_TAGS } + required + /> + + setAttributes( { showTagCounts: ! showTagCounts } ) + } + /> + ); diff --git a/packages/block-library/src/tag-cloud/editor.scss b/packages/block-library/src/tag-cloud/editor.scss index de2a95a386fa85..b8f421532f760c 100644 --- a/packages/block-library/src/tag-cloud/editor.scss +++ b/packages/block-library/src/tag-cloud/editor.scss @@ -7,3 +7,11 @@ margin: 0; padding: 0; } + +.wp-block-tag-cloud__inspector-settings { + .components-base-control, + .components-base-control:last-child { + // Cancel out extra margins added by block inspector + margin-bottom: 0; + } +} From 78bbf67d0cf4631108f79a780eac0ce28a7bfb85 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 10 Aug 2024 01:35:58 +0900 Subject: [PATCH 05/11] Fix in Video block --- packages/block-library/src/video/edit-common-settings.js | 1 + packages/block-library/src/video/edit.js | 4 ++-- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/packages/block-library/src/video/edit-common-settings.js b/packages/block-library/src/video/edit-common-settings.js index 5ebf431ade3fc0..9394bfaf5c6145 100644 --- a/packages/block-library/src/video/edit-common-settings.js +++ b/packages/block-library/src/video/edit-common-settings.js @@ -83,6 +83,7 @@ const VideoSettings = ( { setAttributes, attributes } ) => { ) } /> - +
{ __( 'Poster image' ) } @@ -265,7 +265,7 @@ function VideoEdit( { { __( 'Remove' ) } ) } - +
From fd1a731b0f5b9daa707be03f7e54184b19048c60 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 10 Aug 2024 01:46:57 +0900 Subject: [PATCH 06/11] Fix in Global Styles Font Size --- .../src/components/global-styles/size-control/index.js | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/packages/edit-site/src/components/global-styles/size-control/index.js b/packages/edit-site/src/components/global-styles/size-control/index.js index a7e7bd6127a5fb..28fa64c643cbbd 100644 --- a/packages/edit-site/src/components/global-styles/size-control/index.js +++ b/packages/edit-site/src/components/global-styles/size-control/index.js @@ -20,7 +20,11 @@ import { const DEFAULT_UNITS = [ 'px', 'em', 'rem', 'vw', 'vh' ]; -function SizeControl( props ) { +function SizeControl( { + // Do not allow manipulation of margin bottom + __nextHasNoMarginBottom, + ...props +} ) { const { baseControlProps } = useBaseControlProps( props ); const { value, onChange, fallbackValue, disabled } = props; @@ -45,7 +49,7 @@ function SizeControl( props ) { }; return ( - + Date: Sat, 10 Aug 2024 01:53:46 +0900 Subject: [PATCH 07/11] Fix in Global Styles PushChangesToGlobalStylesControl --- .../edit-site/src/hooks/push-changes-to-global-styles/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js index c79ba67a1a7d74..49613c8b4c2822 100644 --- a/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js +++ b/packages/edit-site/src/hooks/push-changes-to-global-styles/index.js @@ -323,6 +323,7 @@ function PushChangesToGlobalStylesControl( { return ( Date: Sat, 10 Aug 2024 02:00:23 +0900 Subject: [PATCH 08/11] Fix in new template part modal --- .../editor/src/components/create-template-part-modal/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/editor/src/components/create-template-part-modal/index.js b/packages/editor/src/components/create-template-part-modal/index.js index a4b6c332cd800c..63e3830295c379 100644 --- a/packages/editor/src/components/create-template-part-modal/index.js +++ b/packages/editor/src/components/create-template-part-modal/index.js @@ -143,6 +143,7 @@ export function CreateTemplatePartModalContents( { required /> Date: Sat, 10 Aug 2024 02:07:07 +0900 Subject: [PATCH 09/11] Fix in pattern overrides block inspector --- packages/patterns/src/components/pattern-overrides-controls.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/patterns/src/components/pattern-overrides-controls.js b/packages/patterns/src/components/pattern-overrides-controls.js index 3a5ff3e0674a6e..9bec88a93471eb 100644 --- a/packages/patterns/src/components/pattern-overrides-controls.js +++ b/packages/patterns/src/components/pattern-overrides-controls.js @@ -92,6 +92,7 @@ function PatternOverridesControls( { <> Date: Sat, 10 Aug 2024 02:09:48 +0900 Subject: [PATCH 10/11] Add lint rule --- .eslintrc.js | 1 + 1 file changed, 1 insertion(+) diff --git a/.eslintrc.js b/.eslintrc.js index cb669fb4177206..6143d62c28bc07 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -290,6 +290,7 @@ module.exports = { ...restrictedSyntax, ...restrictedSyntaxComponents, ...[ + 'BaseControl', 'CheckboxControl', 'ComboboxControl', 'DimensionControl', From a9e31edad54198c86a1b19dc1b6fcfb8a6a96c74 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Sat, 10 Aug 2024 02:20:29 +0900 Subject: [PATCH 11/11] Update docs --- .../components/src/base-control/README.md | 7 +- .../components/src/base-control/index.tsx | 89 ++++++++++--------- 2 files changed, 53 insertions(+), 43 deletions(-) diff --git a/packages/components/src/base-control/README.md b/packages/components/src/base-control/README.md index dc3d8c0e29c8e0..d51629de6f7253 100644 --- a/packages/components/src/base-control/README.md +++ b/packages/components/src/base-control/README.md @@ -15,7 +15,7 @@ const MyCustomTextareaControl = ({ children, ...baseProps }) => ( const { baseControlProps, controlProps } = useBaseControlProps( baseProps ); return ( - + @@ -92,7 +92,10 @@ It should only be used in cases where the children being rendered inside BaseCon import { BaseControl } from '@wordpress/components'; const MyBaseControl = () => ( - + Author diff --git a/packages/components/src/base-control/index.tsx b/packages/components/src/base-control/index.tsx index 14ecce1bdd729d..77899b6480daed 100644 --- a/packages/components/src/base-control/index.tsx +++ b/packages/components/src/base-control/index.tsx @@ -26,29 +26,6 @@ import { contextConnectWithoutRef, useContextSystem } from '../context'; export { useBaseControlProps } from './hooks'; -/** - * `BaseControl` is a component used to generate labels and help text for components handling user inputs. - * - * ```jsx - * import { BaseControl, useBaseControlProps } from '@wordpress/components'; - * - * // Render a `BaseControl` for a textarea input - * const MyCustomTextareaControl = ({ children, ...baseProps }) => ( - * // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl` - * // and the inner control itself. Namely, it takes care of generating a unique `id`, - * // properly associating it with the `label` and `help` elements. - * const { baseControlProps, controlProps } = useBaseControlProps( baseProps ); - * - * return ( - * - * - * - * ); - * ); - * ``` - */ const UnconnectedBaseControl = ( props: WordPressComponentProps< BaseControlProps, null > ) => { @@ -105,23 +82,6 @@ const UnconnectedBaseControl = ( ); }; -/** - * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component. - * - * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled, - * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would - * otherwise use if the `label` prop was passed. - * - * @example - * import { BaseControl } from '@wordpress/components'; - * - * const MyBaseControl = () => ( - * - * Author - * - * - * ); - */ const UnforwardedVisualLabel = ( props: WordPressComponentProps< BaseControlVisualLabelProps, 'span' >, ref: ForwardedRef< any > @@ -141,9 +101,56 @@ const UnforwardedVisualLabel = ( export const VisualLabel = forwardRef( UnforwardedVisualLabel ); +/** + * `BaseControl` is a component used to generate labels and help text for components handling user inputs. + * + * ```jsx + * import { BaseControl, useBaseControlProps } from '@wordpress/components'; + * + * // Render a `BaseControl` for a textarea input + * const MyCustomTextareaControl = ({ children, ...baseProps }) => ( + * // `useBaseControlProps` is a convenience hook to get the props for the `BaseControl` + * // and the inner control itself. Namely, it takes care of generating a unique `id`, + * // properly associating it with the `label` and `help` elements. + * const { baseControlProps, controlProps } = useBaseControlProps( baseProps ); + * + * return ( + * + * + * + * ); + * ); + * ``` + */ export const BaseControl = Object.assign( contextConnectWithoutRef( UnconnectedBaseControl, 'BaseControl' ), - { VisualLabel } + + { + /** + * `BaseControl.VisualLabel` is used to render a purely visual label inside a `BaseControl` component. + * + * It should only be used in cases where the children being rendered inside `BaseControl` are already accessibly labeled, + * e.g., a button, but we want an additional visual label for that section equivalent to the labels `BaseControl` would + * otherwise use if the `label` prop was passed. + * + * ```jsx + * import { BaseControl } from '@wordpress/components'; + * + * const MyBaseControl = () => ( + * + * Author + * + * + * ); + * ``` + */ + VisualLabel, + } ); export default BaseControl;