From ec681ff31bce36aca02cc6a9128fa7ebdcae92ca Mon Sep 17 00:00:00 2001 From: Juan Aldasoro Date: Thu, 19 Dec 2024 16:13:21 +0100 Subject: [PATCH 1/5] Use Badge component in page markers (#68103) * Use Badge component in page markers * Remove redundant prop. * Remove import. * Fix the title alignment. Co-authored-by: juanfra Co-authored-by: tyxla Co-authored-by: jameskoster --- .../src/components/post-card-panel/index.js | 10 ++++++---- .../src/components/post-card-panel/style.scss | 17 ++++------------- .../fields/src/fields/page-title/style.scss | 10 ---------- packages/fields/src/fields/page-title/view.tsx | 7 +++++-- packages/fields/src/style.scss | 1 - 5 files changed, 15 insertions(+), 30 deletions(-) delete mode 100644 packages/fields/src/fields/page-title/style.scss diff --git a/packages/editor/src/components/post-card-panel/index.js b/packages/editor/src/components/post-card-panel/index.js index 7849f014ab49c..78f9522ba5f44 100644 --- a/packages/editor/src/components/post-card-panel/index.js +++ b/packages/editor/src/components/post-card-panel/index.js @@ -6,6 +6,7 @@ import { __experimentalHStack as HStack, __experimentalVStack as VStack, __experimentalText as Text, + privateApis as componentsPrivateApis, } from '@wordpress/components'; import { store as coreStore } from '@wordpress/core-data'; import { useSelect } from '@wordpress/data'; @@ -25,6 +26,7 @@ import { unlock } from '../../lock-unlock'; import PostActions from '../post-actions'; import usePageTypeBadge from '../../utils/pageTypeBadge'; import { getTemplateInfo } from '../../utils/get-template-info'; +const { Badge } = unlock( componentsPrivateApis ); /** * Renders a title of the post type and the available quick actions available within a 3-dot dropdown. @@ -109,11 +111,11 @@ export default function PostCardPanel( { className="editor-post-card-panel__title" as="h2" > - { title } + + { title } + { pageTypeBadge && postIds.length === 1 && ( - - { pageTypeBadge } - + { pageTypeBadge } ) } { @@ -27,11 +30,11 @@ export default function PageTitleView( { item }: { item: CommonPost } ) { return ( { [ frontPageId, postsPageId ].includes( item.id as number ) && ( - + { item.id === frontPageId ? __( 'Homepage' ) : __( 'Posts Page' ) } - + ) } ); diff --git a/packages/fields/src/style.scss b/packages/fields/src/style.scss index d9a571270fbb6..96b1f816de5b6 100644 --- a/packages/fields/src/style.scss +++ b/packages/fields/src/style.scss @@ -3,5 +3,4 @@ @import "./fields/featured-image/style.scss"; @import "./fields/template/style.scss"; @import "./fields/title/style.scss"; -@import "./fields/page-title/style.scss"; @import "./fields/pattern-title/style.scss"; From 505bbc8d285014ab3562e33f0a3919cff55e3f30 Mon Sep 17 00:00:00 2001 From: James Koster Date: Thu, 19 Dec 2024 15:37:30 +0000 Subject: [PATCH 2/5] Update active menu item appearance (#68147) Co-authored-by: jameskoster Co-authored-by: jasmussen --- .../edit-site/src/components/sidebar-navigation-item/style.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/edit-site/src/components/sidebar-navigation-item/style.scss b/packages/edit-site/src/components/sidebar-navigation-item/style.scss index 230967c4c7e0e..57b7e84bd57a8 100644 --- a/packages/edit-site/src/components/sidebar-navigation-item/style.scss +++ b/packages/edit-site/src/components/sidebar-navigation-item/style.scss @@ -18,6 +18,7 @@ &[aria-current="true"] { background: $gray-800; color: $white; + font-weight: $font-weight-medium; } // Make sure the focus style is drawn on top of the current item background. From afca7b5e11cbe3808c4333e18d522c5ea1b56ad2 Mon Sep 17 00:00:00 2001 From: Rinkal Pagdar <92097119+rinkalpagdar@users.noreply.github.com> Date: Thu, 19 Dec 2024 21:46:25 +0530 Subject: [PATCH 3/5] Refactor "Settings" panel of Navigation Item block to use ToolsPanel instead of PanelBody (#67973) Co-authored-by: rinkalpagdar Co-authored-by: fabiankaegy Co-authored-by: getdave Co-authored-by: Mamaduka --- .../block-library/src/navigation-link/edit.js | 162 +++++++++++------- 1 file changed, 101 insertions(+), 61 deletions(-) diff --git a/packages/block-library/src/navigation-link/edit.js b/packages/block-library/src/navigation-link/edit.js index 39073b848d3ca..5966739aa61a6 100644 --- a/packages/block-library/src/navigation-link/edit.js +++ b/packages/block-library/src/navigation-link/edit.js @@ -9,7 +9,8 @@ import clsx from 'clsx'; import { createBlock } from '@wordpress/blocks'; import { useSelect, useDispatch } from '@wordpress/data'; import { - PanelBody, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, TextControl, TextareaControl, ToolbarButton, @@ -161,71 +162,110 @@ function getMissingText( type ) { function Controls( { attributes, setAttributes, setIsLabelFieldFocused } ) { const { label, url, description, title, rel } = attributes; return ( - - { - setAttributes( { label: labelValue } ); - } } + + !! label } label={ __( 'Text' ) } - autoComplete="off" - onFocus={ () => setIsLabelFieldFocused( true ) } - onBlur={ () => setIsLabelFieldFocused( false ) } - /> - { - updateAttributes( - { url: urlValue }, - setAttributes, - attributes - ); - } } + onDeselect={ () => setAttributes( { label: '' } ) } + isShownByDefault + > + { + setAttributes( { label: labelValue } ); + } } + autoComplete="off" + onFocus={ () => setIsLabelFieldFocused( true ) } + onBlur={ () => setIsLabelFieldFocused( false ) } + /> + + + !! url } label={ __( 'Link' ) } - autoComplete="off" - /> - { - setAttributes( { description: descriptionValue } ); - } } + onDeselect={ () => setAttributes( { url: '' } ) } + isShownByDefault + > + { + updateAttributes( + { url: urlValue }, + setAttributes, + attributes + ); + } } + autoComplete="off" + /> + + + !! description } label={ __( 'Description' ) } - help={ __( - 'The description will be displayed in the menu if the current theme supports it.' - ) } - /> - { - setAttributes( { title: titleValue } ); - } } + onDeselect={ () => setAttributes( { description: '' } ) } + isShownByDefault + > + { + setAttributes( { description: descriptionValue } ); + } } + help={ __( + 'The description will be displayed in the menu if the current theme supports it.' + ) } + /> + + + !! title } label={ __( 'Title attribute' ) } - autoComplete="off" - help={ __( - 'Additional information to help clarify the purpose of the link.' - ) } - /> - { - setAttributes( { rel: relValue } ); - } } + onDeselect={ () => setAttributes( { title: '' } ) } + isShownByDefault + > + { + setAttributes( { title: titleValue } ); + } } + autoComplete="off" + help={ __( + 'Additional information to help clarify the purpose of the link.' + ) } + /> + + + !! rel } label={ __( 'Rel attribute' ) } - autoComplete="off" - help={ __( - 'The relationship of the linked URL as space-separated link types.' - ) } - /> - + onDeselect={ () => setAttributes( { rel: '' } ) } + isShownByDefault + > + { + setAttributes( { rel: relValue } ); + } } + autoComplete="off" + help={ __( + 'The relationship of the linked URL as space-separated link types.' + ) } + /> + + ); } From 9b3e07f0ac02ad9fd4ea42450591070abef6122c Mon Sep 17 00:00:00 2001 From: Prasad Karmalkar Date: Thu, 19 Dec 2024 21:49:29 +0530 Subject: [PATCH 4/5] Refactor "Settings" panel of Spacer block to use ToolsPanel instead of PanelBody (#67981) Co-authored-by: prasadkarmalkar Co-authored-by: fabiankaegy --- packages/block-library/src/spacer/controls.js | 57 ++++++++++++++----- 1 file changed, 42 insertions(+), 15 deletions(-) diff --git a/packages/block-library/src/spacer/controls.js b/packages/block-library/src/spacer/controls.js index 1e899e15aff0d..fde06d3ee8c33 100644 --- a/packages/block-library/src/spacer/controls.js +++ b/packages/block-library/src/spacer/controls.js @@ -10,10 +10,11 @@ import { privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; import { - PanelBody, __experimentalUseCustomUnits as useCustomUnits, __experimentalUnitControl as UnitControl, __experimentalParseQuantityAndUnitFromRawValue as parseQuantityAndUnitFromRawValue, + __experimentalToolsPanel as ToolsPanel, + __experimentalToolsPanelItem as ToolsPanelItem, } from '@wordpress/components'; import { useInstanceId } from '@wordpress/compose'; import { View } from '@wordpress/primitives'; @@ -94,28 +95,54 @@ export default function SpacerControls( { } ) { return ( - + { + setAttributes( { + width: undefined, + height: '100px', + } ); + } } + > { orientation === 'horizontal' && ( - - setAttributes( { width: nextWidth } ) + isShownByDefault + hasValue={ () => width !== undefined } + onDeselect={ () => + setAttributes( { width: undefined } ) } - isResizing={ isResizing } - /> + > + + setAttributes( { width: nextWidth } ) + } + isResizing={ isResizing } + /> + ) } { orientation !== 'horizontal' && ( - - setAttributes( { height: nextHeight } ) + isShownByDefault + hasValue={ () => height !== '100px' } + onDeselect={ () => + setAttributes( { height: '100px' } ) } - isResizing={ isResizing } - /> + > + + setAttributes( { height: nextHeight } ) + } + isResizing={ isResizing } + /> + ) } - + ); } From dea955c5470d7fba505e40561b64cde9a17d3a46 Mon Sep 17 00:00:00 2001 From: Lena Morita Date: Fri, 20 Dec 2024 04:00:53 +0900 Subject: [PATCH 5/5] Storybook: Make prop sort order consistent (#68152) Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla --- storybook/preview.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/storybook/preview.js b/storybook/preview.js index 8372103cd9944..b74640d9bcfbc 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -108,6 +108,9 @@ export const parameters = { sort: 'requiredFirst', }, docs: { + controls: { + sort: 'requiredFirst', + }, // Flips the order of the description and the primary component story // so the component is always visible before the fold. page: () => (