From 9be61c4fc7da2edb4172fa31f95b99c3e525b930 Mon Sep 17 00:00:00 2001 From: Vrishabh Jasani <71686151+Vrishabhsk@users.noreply.github.com> Date: Tue, 12 Nov 2024 23:45:34 +0400 Subject: [PATCH 01/17] Storybook: Improve component organisation - Actions (#66680) * Move Menu component under Actions container * Add id Co-authored-by: Vrishabhsk Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/src/menu/stories/index.story.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/src/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index ecb4cc3c7593f8..92501c33269580 100644 --- a/packages/components/src/menu/stories/index.story.tsx +++ b/packages/components/src/menu/stories/index.story.tsx @@ -22,7 +22,8 @@ import { createSlotFill, Provider as SlotFillProvider } from '../../slot-fill'; import { ContextSystemProvider } from '../../context'; const meta: Meta< typeof Menu > = { - title: 'Components (Experimental)/Menu', + id: 'components-experimental-menu', + title: 'Components (Experimental)/Actions/Menu', component: Menu, subcomponents: { // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 From 2313836d2062c4ba6d754d51b69df329b25dcd14 Mon Sep 17 00:00:00 2001 From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com> Date: Wed, 13 Nov 2024 01:23:49 +0530 Subject: [PATCH 02/17] Feat: Storybook: Improve component organisation - Overlays Category - Issue #66275 (#66657) * Group the overlay components in storybook * Fix the id for the experimental components * Remove unwanted changes from the PR Co-authored-by: hbhalodia Co-authored-by: tyxla Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/src/confirm-dialog/stories/index.story.tsx | 3 ++- packages/components/src/dropdown/stories/index.story.tsx | 3 ++- packages/components/src/modal/stories/index.story.tsx | 3 ++- packages/components/src/popover/stories/index.story.tsx | 3 ++- packages/components/src/tooltip/stories/index.story.tsx | 3 ++- storybook/preview.js | 3 ++- 6 files changed, 12 insertions(+), 6 deletions(-) diff --git a/packages/components/src/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx index 85636c0ddc81ed..9496d85939edf3 100644 --- a/packages/components/src/confirm-dialog/stories/index.story.tsx +++ b/packages/components/src/confirm-dialog/stories/index.story.tsx @@ -16,7 +16,8 @@ import { ConfirmDialog } from '../component'; const meta: Meta< typeof ConfirmDialog > = { component: ConfirmDialog, - title: 'Components (Experimental)/ConfirmDialog', + title: 'Components (Experimental)/Overlays/ConfirmDialog', + id: 'components-experimental-confirmdialog', argTypes: { isOpen: { control: { type: null }, diff --git a/packages/components/src/dropdown/stories/index.story.tsx b/packages/components/src/dropdown/stories/index.story.tsx index 0f07664787cc33..bfa51a07a97170 100644 --- a/packages/components/src/dropdown/stories/index.story.tsx +++ b/packages/components/src/dropdown/stories/index.story.tsx @@ -13,7 +13,8 @@ import MenuItem from '../../menu-item'; import { DropdownContentWrapper } from '../dropdown-content-wrapper'; const meta: Meta< typeof Dropdown > = { - title: 'Components/Dropdown', + title: 'Components/Overlays/Dropdown', + id: 'components-dropdown', component: Dropdown, // @ts-expect-error - See https://github.com/storybookjs/storybook/issues/23170 subcomponents: { DropdownContentWrapper }, diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx index f180de0dc06a46..92c922bcb8a977 100644 --- a/packages/components/src/modal/stories/index.story.tsx +++ b/packages/components/src/modal/stories/index.story.tsx @@ -19,7 +19,8 @@ import type { ModalProps } from '../types'; const meta: Meta< typeof Modal > = { component: Modal, - title: 'Components/Modal', + title: 'Components/Overlays/Modal', + id: 'components-modal', argTypes: { children: { control: { type: null }, diff --git a/packages/components/src/popover/stories/index.story.tsx b/packages/components/src/popover/stories/index.story.tsx index dfffaefe802a49..3d804f5d24d5c0 100644 --- a/packages/components/src/popover/stories/index.story.tsx +++ b/packages/components/src/popover/stories/index.story.tsx @@ -33,7 +33,8 @@ const AVAILABLE_PLACEMENTS: PopoverProps[ 'placement' ][] = [ ]; const meta: Meta< typeof Popover > = { - title: 'Components/Popover', + title: 'Components/Overlays/Popover', + id: 'components-popover', component: Popover, argTypes: { anchor: { control: { type: null } }, diff --git a/packages/components/src/tooltip/stories/index.story.tsx b/packages/components/src/tooltip/stories/index.story.tsx index b006bc03aced96..4bddba0ff7b666 100644 --- a/packages/components/src/tooltip/stories/index.story.tsx +++ b/packages/components/src/tooltip/stories/index.story.tsx @@ -15,7 +15,8 @@ import Tooltip from '..'; import Button from '../../button'; const meta: Meta< typeof Tooltip > = { - title: 'Components/Tooltip', + title: 'Components/Overlays/Tooltip', + id: 'components-tooltip', component: Tooltip, argTypes: { children: { control: { type: null } }, diff --git a/storybook/preview.js b/storybook/preview.js index 9e9dd587b39c4c..ca90ad99e405de 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -134,10 +134,11 @@ export const parameters = { 'Containers', 'Feedback', 'Navigation', + 'Overlays', 'Utilities', ], 'Components (Experimental)', - [ 'Navigation' ], + [ 'Navigation', 'Overlays' ], 'Icons', ], }, From 2a3e37937499cdc44a93de0a306307ec5f02be5c Mon Sep 17 00:00:00 2001 From: Hit Bhalodia <58802366+hbhalodia@users.noreply.github.com> Date: Wed, 13 Nov 2024 02:03:22 +0530 Subject: [PATCH 03/17] Feat: Storybook: Improve component organisation - Typography - Issue #66275 (#66633) * Group the components in storybook based on sitemap provided * Fix the experimental id for components in storybook * Revert the unwanted changes in PR * Add the missing folder on conflicts resolve --------- Co-authored-by: Lena Morita Co-authored-by: hbhalodia Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: tyxla Co-authored-by: jameskoster --- packages/components/src/heading/stories/index.story.tsx | 3 ++- packages/components/src/text-highlight/stories/index.story.tsx | 3 ++- packages/components/src/text/stories/index.story.tsx | 3 ++- packages/components/src/truncate/stories/index.story.tsx | 3 ++- .../components/src/visually-hidden/stories/index.story.tsx | 2 +- storybook/preview.js | 3 ++- 6 files changed, 11 insertions(+), 6 deletions(-) diff --git a/packages/components/src/heading/stories/index.story.tsx b/packages/components/src/heading/stories/index.story.tsx index d82a59f08c825b..8777fb2c2e6507 100644 --- a/packages/components/src/heading/stories/index.story.tsx +++ b/packages/components/src/heading/stories/index.story.tsx @@ -10,7 +10,8 @@ import { Heading } from '..'; const meta: Meta< typeof Heading > = { component: Heading, - title: 'Components (Experimental)/Heading', + title: 'Components (Experimental)/Typography/Heading', + id: 'components-experimental-heading', argTypes: { as: { control: { type: 'text' } }, color: { control: { type: 'color' } }, diff --git a/packages/components/src/text-highlight/stories/index.story.tsx b/packages/components/src/text-highlight/stories/index.story.tsx index d54149d8e19d3c..f9538b7130095d 100644 --- a/packages/components/src/text-highlight/stories/index.story.tsx +++ b/packages/components/src/text-highlight/stories/index.story.tsx @@ -10,7 +10,8 @@ import TextHighlight from '..'; const meta: Meta< typeof TextHighlight > = { component: TextHighlight, - title: 'Components/TextHighlight', + title: 'Components/Typography/TextHighlight', + id: 'components-texthighlight', parameters: { controls: { expanded: true, diff --git a/packages/components/src/text/stories/index.story.tsx b/packages/components/src/text/stories/index.story.tsx index f762ca3b4e3ff7..92a2c7eb9be3e3 100644 --- a/packages/components/src/text/stories/index.story.tsx +++ b/packages/components/src/text/stories/index.story.tsx @@ -10,7 +10,8 @@ import { Text } from '../component'; const meta: Meta< typeof Text > = { component: Text, - title: 'Components (Experimental)/Text', + title: 'Components (Experimental)/Typography/Text', + id: 'components-experimental-text', argTypes: { as: { control: { type: 'text' } }, color: { control: { type: 'color' } }, diff --git a/packages/components/src/truncate/stories/index.story.tsx b/packages/components/src/truncate/stories/index.story.tsx index 84eaf59edbb3e1..3b06831c59aa07 100644 --- a/packages/components/src/truncate/stories/index.story.tsx +++ b/packages/components/src/truncate/stories/index.story.tsx @@ -10,7 +10,8 @@ import { Truncate } from '..'; const meta: Meta< typeof Truncate > = { component: Truncate, - title: 'Components (Experimental)/Truncate', + title: 'Components (Experimental)/Typography/Truncate', + id: 'components-experimental-truncate', argTypes: { children: { control: { type: 'text' } }, as: { control: { type: 'text' } }, diff --git a/packages/components/src/visually-hidden/stories/index.story.tsx b/packages/components/src/visually-hidden/stories/index.story.tsx index 8abe45a94aab4f..6ebcf9a2e949ce 100644 --- a/packages/components/src/visually-hidden/stories/index.story.tsx +++ b/packages/components/src/visually-hidden/stories/index.story.tsx @@ -10,7 +10,7 @@ import { VisuallyHidden } from '..'; const meta: Meta< typeof VisuallyHidden > = { component: VisuallyHidden, - title: 'Components/Utilities/VisuallyHidden', + title: 'Components/Typography/VisuallyHidden', id: 'components-visuallyhidden', argTypes: { children: { control: { type: null } }, diff --git a/storybook/preview.js b/storybook/preview.js index ca90ad99e405de..a045b0c3303d39 100644 --- a/storybook/preview.js +++ b/storybook/preview.js @@ -135,10 +135,11 @@ export const parameters = { 'Feedback', 'Navigation', 'Overlays', + 'Typography', 'Utilities', ], 'Components (Experimental)', - [ 'Navigation', 'Overlays' ], + [ 'Navigation', 'Overlays', 'Typography' ], 'Icons', ], }, From 074dc52e6b3ac5362392d309e79ebc63eb884a57 Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 13 Nov 2024 09:45:18 +1100 Subject: [PATCH 04/17] Media: add `x-wav` mime type for wav files in Firefox (#66850) Adding x-wav support because Firefox uses that identifier Check if wav does not exist in case some plugins or themes have already filtered it out. Co-authored-by: ramonjd Co-authored-by: Imran92 --- backport-changelog/6.8/7265.md | 3 +++ lib/compat/wordpress-6.8/functions.php | 35 ++++++++++++++++++++++++++ lib/load.php | 1 + 3 files changed, 39 insertions(+) create mode 100644 backport-changelog/6.8/7265.md create mode 100644 lib/compat/wordpress-6.8/functions.php diff --git a/backport-changelog/6.8/7265.md b/backport-changelog/6.8/7265.md new file mode 100644 index 00000000000000..d4c46d62fa3334 --- /dev/null +++ b/backport-changelog/6.8/7265.md @@ -0,0 +1,3 @@ +https://github.com/WordPress/wordpress-develop/pull/7265 + +* https://github.com/WordPress/gutenberg/pull/66850 diff --git a/lib/compat/wordpress-6.8/functions.php b/lib/compat/wordpress-6.8/functions.php new file mode 100644 index 00000000000000..eb57b2bb9890e7 --- /dev/null +++ b/lib/compat/wordpress-6.8/functions.php @@ -0,0 +1,35 @@ + 'audio/wav'` + * + * @since 6.8.0 + * + * @param string[] $mime_types Mime types. + * @return string[] Mime types keyed by the file extension regex corresponding to those types. +*/ +function gutenberg_get_mime_types_6_8( $mime_types ) { + /* + * Only add support if there is existing support for 'wav'. + * Some plugins may have deliberately disabled it. + */ + if ( ! $mime_types['wav'] && ! isset( $mime_types['wav|x-wav'] ) ) { + return $mime_types; + } + /* + * Also, given that other themes or plugins may have already + * tried to add x-wav type support, only + * add the mime type if it doesn't already exist + * to avoid overriding any customizations. + */ + if ( ! isset( $mime_types['x-wav'] ) && ! isset( $mime_types['wav|x-wav'] ) ) { + $mime_types['x-wav'] = 'audio/wav'; + } + return $mime_types; +} +add_filter( 'mime_types', 'gutenberg_get_mime_types_6_8', 99 ); diff --git a/lib/load.php b/lib/load.php index 6236f0eb04b3c6..d7e4a33cd02c92 100644 --- a/lib/load.php +++ b/lib/load.php @@ -119,6 +119,7 @@ function gutenberg_is_experiment_enabled( $name ) { // WordPress 6.8 compat. require __DIR__ . '/compat/wordpress-6.8/preload.php'; require __DIR__ . '/compat/wordpress-6.8/blocks.php'; +require __DIR__ . '/compat/wordpress-6.8/functions.php'; // Experimental features. require __DIR__ . '/experimental/block-editor-settings-mobile.php'; From 0a5e54af715deb3bbb3ce098d345232227544c7a Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 13 Nov 2024 10:39:39 +1100 Subject: [PATCH 05/17] Media: check for `wav` mime type using isset (#66947) * Add missing isset. Sorry! Co-authored-by: ramonjd Co-authored-by: andrewserong --- backport-changelog/6.8/7265.md | 1 + lib/compat/wordpress-6.8/functions.php | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/backport-changelog/6.8/7265.md b/backport-changelog/6.8/7265.md index d4c46d62fa3334..44ba36053aa0d9 100644 --- a/backport-changelog/6.8/7265.md +++ b/backport-changelog/6.8/7265.md @@ -1,3 +1,4 @@ https://github.com/WordPress/wordpress-develop/pull/7265 * https://github.com/WordPress/gutenberg/pull/66850 +* https://github.com/WordPress/gutenberg/pull/66947 diff --git a/lib/compat/wordpress-6.8/functions.php b/lib/compat/wordpress-6.8/functions.php index eb57b2bb9890e7..a4658d1a182c73 100644 --- a/lib/compat/wordpress-6.8/functions.php +++ b/lib/compat/wordpress-6.8/functions.php @@ -18,7 +18,7 @@ function gutenberg_get_mime_types_6_8( $mime_types ) { * Only add support if there is existing support for 'wav'. * Some plugins may have deliberately disabled it. */ - if ( ! $mime_types['wav'] && ! isset( $mime_types['wav|x-wav'] ) ) { + if ( ! isset( $mime_types['wav'] ) && ! isset( $mime_types['wav|x-wav'] ) ) { return $mime_types; } /* From 538f03dbb16ba650319bbe1cef61f46a31043527 Mon Sep 17 00:00:00 2001 From: Matias Benedetto Date: Wed, 13 Nov 2024 03:45:15 -0300 Subject: [PATCH 06/17] Fix uncategorized pattern browsing when pattern has no categories (#66945) Co-authored-by: matiasbenedetto Co-authored-by: ramonjd Co-authored-by: Mamaduka Co-authored-by: getdave --- .../inserter/block-patterns-explorer/pattern-list.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js index 296b432bd685c3..8e5e50500ec72b 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js +++ b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js @@ -85,10 +85,10 @@ function PatternList( { return true; } if ( selectedCategory === 'uncategorized' ) { - const hasKnownCategory = pattern.categories.some( - ( category ) => + const hasKnownCategory = + pattern.categories?.some( ( category ) => registeredPatternCategories.includes( category ) - ); + ) ?? false; return ! pattern.categories?.length || ! hasKnownCategory; } From 74bec71af36491373447ada6f0cd4e053481dc68 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 13 Nov 2024 08:52:13 +0100 Subject: [PATCH 07/17] Edit Site: Refactor to remove usage of edited entity state (#66922) Co-authored-by: youknowriad Co-authored-by: Mamaduka --- .../edit-site/src/components/app/index.js | 2 - .../edit-site/src/components/editor/index.js | 5 +- .../global-styles-renderer/index.js | 14 +- .../hooks/commands/use-edit-mode-commands.js | 173 ------------------ .../editor/src/components/commands/index.js | 153 +++++++++++++++- 5 files changed, 158 insertions(+), 189 deletions(-) delete mode 100644 packages/edit-site/src/hooks/commands/use-edit-mode-commands.js diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js index 133a376c9c246d..0551e6b295fbc0 100644 --- a/packages/edit-site/src/components/app/index.js +++ b/packages/edit-site/src/components/app/index.js @@ -18,7 +18,6 @@ import { privateApis as routerPrivateApis } from '@wordpress/router'; import Layout from '../layout'; import { unlock } from '../../lock-unlock'; import { useCommonCommands } from '../../hooks/commands/use-common-commands'; -import { useEditModeCommands } from '../../hooks/commands/use-edit-mode-commands'; import useInitEditedEntityFromURL from '../sync-state-with-url/use-init-edited-entity-from-url'; import useActiveRoute from '../layout/router'; import useSetCommandContext from '../../hooks/commands/use-set-command-context'; @@ -30,7 +29,6 @@ const { GlobalStylesProvider } = unlock( editorPrivateApis ); function AppLayout() { // This ensures the edited entity id and type are initialized properly. useInitEditedEntityFromURL(); - useEditModeCommands(); useCommonCommands(); useSetCommandContext(); useRegisterSiteEditorRoutes(); diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 94b56a197e1bc1..097a4f5f75ad7f 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -49,6 +49,7 @@ import useEditorIframeProps from '../block-editor/use-editor-iframe-props'; import useEditorTitle from './use-editor-title'; import { useIsSiteEditorLoading } from '../layout/hooks'; import { useAdaptEditorToCanvas } from './use-adapt-editor-to-canvas'; +import { TEMPLATE_POST_TYPE } from '../../utils/constants'; const { Editor, BackButton } = unlock( editorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); @@ -214,7 +215,9 @@ export default function EditSiteEditor( { isPostsList = false } ) { return ( <> - + { isEditMode && } { ! isReady ? : null } diff --git a/packages/edit-site/src/components/global-styles-renderer/index.js b/packages/edit-site/src/components/global-styles-renderer/index.js index 2e840a7acdc375..d3e84ff5390996 100644 --- a/packages/edit-site/src/components/global-styles-renderer/index.js +++ b/packages/edit-site/src/components/global-styles-renderer/index.js @@ -10,17 +10,11 @@ import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor'; */ import { store as editSiteStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; const { useGlobalStylesOutput } = unlock( blockEditorPrivateApis ); -function useGlobalStylesRenderer() { - const postType = useSelect( ( select ) => { - return select( editSiteStore ).getEditedPostType(); - } ); - const [ styles, settings ] = useGlobalStylesOutput( - postType !== TEMPLATE_POST_TYPE - ); +function useGlobalStylesRenderer( disableRootPadding ) { + const [ styles, settings ] = useGlobalStylesOutput( disableRootPadding ); const { getSettings } = useSelect( editSiteStore ); const { updateSettings } = useDispatch( editSiteStore ); @@ -41,8 +35,8 @@ function useGlobalStylesRenderer() { }, [ styles, settings, updateSettings, getSettings ] ); } -export function GlobalStylesRenderer() { - useGlobalStylesRenderer(); +export function GlobalStylesRenderer( { disableRootPadding } ) { + useGlobalStylesRenderer( disableRootPadding ); return null; } diff --git a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js deleted file mode 100644 index da36f32e6c0d51..00000000000000 --- a/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js +++ /dev/null @@ -1,173 +0,0 @@ -/** - * WordPress dependencies - */ -import { useSelect, useDispatch } from '@wordpress/data'; -import { __, sprintf, isRTL } from '@wordpress/i18n'; -import { trash, rotateLeft, rotateRight, layout, page } from '@wordpress/icons'; -import { useCommandLoader } from '@wordpress/commands'; -import { decodeEntities } from '@wordpress/html-entities'; -import { privateApis as routerPrivateApis } from '@wordpress/router'; -import { store as editorStore } from '@wordpress/editor'; - -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../store'; -import useEditedEntityRecord from '../../components/use-edited-entity-record'; -import isTemplateRemovable from '../../utils/is-template-removable'; -import isTemplateRevertable from '../../utils/is-template-revertable'; -import { unlock } from '../../lock-unlock'; -import { TEMPLATE_POST_TYPE } from '../../utils/constants'; -import { useLink } from '../../components/routes/link'; - -const { useHistory, useLocation } = unlock( routerPrivateApis ); - -const getPageContentFocusCommands = () => - function usePageContentFocusCommands() { - const { record: template } = useEditedEntityRecord(); - const { params } = useLocation(); - const { canvas = 'view' } = params; - const { isPage, templateId, currentPostType } = useSelect( - ( select ) => { - const { isPage: _isPage } = unlock( select( editSiteStore ) ); - const { getCurrentPostType, getCurrentTemplateId } = - select( editorStore ); - return { - isPage: _isPage(), - templateId: getCurrentTemplateId(), - currentPostType: getCurrentPostType(), - }; - }, - [] - ); - - const { onClick: editTemplate } = useLink( { - postType: 'wp_template', - postId: templateId, - } ); - - const { setRenderingMode } = useDispatch( editorStore ); - - if ( ! isPage || canvas !== 'edit' ) { - return { isLoading: false, commands: [] }; - } - - const commands = []; - - if ( currentPostType !== 'wp_template' ) { - commands.push( { - name: 'core/switch-to-template-focus', - label: sprintf( - /* translators: %s: template title */ - __( 'Edit template: %s' ), - decodeEntities( template.title ) - ), - icon: layout, - callback: ( { close } ) => { - editTemplate(); - close(); - }, - } ); - } else { - commands.push( { - name: 'core/switch-to-page-focus', - label: __( 'Back to page' ), - icon: page, - callback: ( { close } ) => { - setRenderingMode( 'template-locked' ); - close(); - }, - } ); - } - - return { isLoading: false, commands }; - }; - -const getManipulateDocumentCommands = () => - function useManipulateDocumentCommands() { - const { isLoaded, record: template } = useEditedEntityRecord(); - const { removeTemplate, revertTemplate } = useDispatch( editSiteStore ); - const history = useHistory(); - const isEditingPage = useSelect( - ( select ) => - select( editSiteStore ).isPage() && - select( editorStore ).getCurrentPostType() !== 'wp_template', - [] - ); - - if ( ! isLoaded ) { - return { isLoading: true, commands: [] }; - } - - const commands = []; - - if ( isTemplateRevertable( template ) && ! isEditingPage ) { - const label = - template.type === TEMPLATE_POST_TYPE - ? sprintf( - /* translators: %s: template title */ - __( 'Reset template: %s' ), - decodeEntities( template.title ) - ) - : sprintf( - /* translators: %s: template part title */ - __( 'Reset template part: %s' ), - decodeEntities( template.title ) - ); - commands.push( { - name: 'core/reset-template', - label, - icon: isRTL() ? rotateRight : rotateLeft, - callback: ( { close } ) => { - revertTemplate( template ); - close(); - }, - } ); - } - - if ( isTemplateRemovable( template ) && ! isEditingPage ) { - const label = - template.type === TEMPLATE_POST_TYPE - ? sprintf( - /* translators: %s: template title */ - __( 'Delete template: %s' ), - decodeEntities( template.title ) - ) - : sprintf( - /* translators: %s: template part title */ - __( 'Delete template part: %s' ), - decodeEntities( template.title ) - ); - commands.push( { - name: 'core/remove-template', - label, - icon: trash, - callback: ( { close } ) => { - removeTemplate( template ); - // Navigate to the template list - history.push( { - postType: template.type, - } ); - close(); - }, - } ); - } - - return { - isLoading: ! isLoaded, - commands, - }; - }; - -export function useEditModeCommands() { - useCommandLoader( { - name: 'core/edit-site/page-content-focus', - hook: getPageContentFocusCommands(), - context: 'entity-edit', - } ); - - useCommandLoader( { - name: 'core/edit-site/manipulate-document', - hook: getManipulateDocumentCommands(), - } ); -} diff --git a/packages/editor/src/components/commands/index.js b/packages/editor/src/components/commands/index.js index 16260bed3978fd..0040a09fbdc07d 100644 --- a/packages/editor/src/components/commands/index.js +++ b/packages/editor/src/components/commands/index.js @@ -2,7 +2,7 @@ * WordPress dependencies */ import { useSelect, useDispatch } from '@wordpress/data'; -import { __, isRTL } from '@wordpress/i18n'; +import { __, isRTL, sprintf } from '@wordpress/i18n'; import { blockDefault, code, @@ -14,21 +14,32 @@ import { external, keyboard, symbol, + page, + layout, + rotateRight, + rotateLeft, } from '@wordpress/icons'; import { useCommandLoader } from '@wordpress/commands'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as noticesStore } from '@wordpress/notices'; import { store as blockEditorStore } from '@wordpress/block-editor'; -import { store as coreStore } from '@wordpress/core-data'; +import { store as coreStore, useEntityRecord } from '@wordpress/core-data'; import { store as interfaceStore } from '@wordpress/interface'; +import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies */ +import { unlock } from '../../lock-unlock'; import { store as editorStore } from '../../store'; -import { PATTERN_POST_TYPE } from '../../store/constants'; +import { + PATTERN_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + TEMPLATE_POST_TYPE, +} from '../../store/constants'; import { modalName as patternRenameModalName } from '../pattern-rename-modal'; import { modalName as patternDuplicateModalName } from '../pattern-duplicate-modal'; +import isTemplateRevertable from '../../store/utils/is-template-revertable'; const getEditorCommandLoader = () => function useEditorCommandLoader() { @@ -302,6 +313,131 @@ const getEditedEntityContextualCommands = () => return { isLoading: false, commands }; }; +const getPageContentFocusCommands = () => + function usePageContentFocusCommands() { + const { onNavigateToEntityRecord, goBack, templateId, isPreviewMode } = + useSelect( ( select ) => { + const { + getRenderingMode, + getEditorSettings: _getEditorSettings, + getCurrentTemplateId, + } = unlock( select( editorStore ) ); + const editorSettings = _getEditorSettings(); + return { + isTemplateHidden: getRenderingMode() === 'post-only', + onNavigateToEntityRecord: + editorSettings.onNavigateToEntityRecord, + getEditorSettings: _getEditorSettings, + goBack: editorSettings.onNavigateToPreviousEntityRecord, + templateId: getCurrentTemplateId(), + isPreviewMode: editorSettings.isPreviewMode, + }; + }, [] ); + const { editedRecord: template, hasResolved } = useEntityRecord( + 'postType', + 'wp_template', + templateId + ); + + if ( isPreviewMode ) { + return { isLoading: false, commands: [] }; + } + + const commands = []; + + if ( templateId && hasResolved ) { + commands.push( { + name: 'core/switch-to-template-focus', + label: sprintf( + /* translators: %s: template title */ + __( 'Edit template: %s' ), + decodeEntities( template.title ) + ), + icon: layout, + callback: ( { close } ) => { + onNavigateToEntityRecord( { + postId: templateId, + postType: 'wp_template', + } ); + close(); + }, + } ); + } + + if ( !! goBack ) { + commands.push( { + name: 'core/switch-to-previous-entity', + label: __( 'Go back' ), + icon: page, + callback: ( { close } ) => { + goBack(); + close(); + }, + } ); + } + + return { isLoading: false, commands }; + }; + +const getManipulateDocumentCommands = () => + function useManipulateDocumentCommands() { + const { postType, postId } = useSelect( ( select ) => { + const { getCurrentPostId, getCurrentPostType } = + select( editorStore ); + return { + postType: getCurrentPostType(), + postId: getCurrentPostId(), + }; + }, [] ); + const { editedRecord: template, hasResolved } = useEntityRecord( + 'postType', + postType, + postId + ); + // eslint-disable-next-line @wordpress/no-unused-vars-before-return + const { revertTemplate } = unlock( useDispatch( editorStore ) ); + + if ( + ! hasResolved || + ! [ TEMPLATE_PART_POST_TYPE, TEMPLATE_POST_TYPE ].includes( + postType + ) + ) { + return { isLoading: true, commands: [] }; + } + + const commands = []; + + if ( isTemplateRevertable( template ) ) { + const label = + template.type === TEMPLATE_POST_TYPE + ? sprintf( + /* translators: %s: template title */ + __( 'Reset template: %s' ), + decodeEntities( template.title ) + ) + : sprintf( + /* translators: %s: template part title */ + __( 'Reset template part: %s' ), + decodeEntities( template.title ) + ); + commands.push( { + name: 'core/reset-template', + label, + icon: isRTL() ? rotateRight : rotateLeft, + callback: ( { close } ) => { + revertTemplate( template ); + close(); + }, + } ); + } + + return { + isLoading: ! hasResolved, + commands, + }; + }; + export default function useCommands() { useCommandLoader( { name: 'core/editor/edit-ui', @@ -313,4 +449,15 @@ export default function useCommands() { hook: getEditedEntityContextualCommands(), context: 'entity-edit', } ); + + useCommandLoader( { + name: 'core/editor/page-content-focus', + hook: getPageContentFocusCommands(), + context: 'entity-edit', + } ); + + useCommandLoader( { + name: 'core/edit-site/manipulate-document', + hook: getManipulateDocumentCommands(), + } ); } From 5f29581507b51dc6505494795b275b41ad09be69 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Nov 2024 10:17:29 +0100 Subject: [PATCH 08/17] Post fields: extract `title` from `edit-site` to `fields` package (#66940) Co-authored-by: oandregal Co-authored-by: youknowriad --- .../core-data/src/entity-types/settings.ts | 4 ++ .../src/components/post-fields/index.js | 59 +----------------- packages/fields/src/actions/utils.ts | 4 +- packages/fields/src/fields/title/index.ts | 3 + .../fields/src/fields/title/title-view.tsx | 62 +++++++++++++++++++ 5 files changed, 74 insertions(+), 58 deletions(-) create mode 100644 packages/fields/src/fields/title/title-view.tsx diff --git a/packages/core-data/src/entity-types/settings.ts b/packages/core-data/src/entity-types/settings.ts index 2ce7eff89d8889..27e803bc030293 100644 --- a/packages/core-data/src/entity-types/settings.ts +++ b/packages/core-data/src/entity-types/settings.ts @@ -22,6 +22,10 @@ declare module './base-entity-records' { * The ID of the page that should be displayed on the front page */ page_on_front: number; + /** + * The ID of the page that should display the latest posts + */ + page_for_posts: number; /** * Site title. */ diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 083d971d102eb3..097459ea110039 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -7,7 +7,6 @@ import clsx from 'clsx'; * WordPress dependencies */ import { __, sprintf } from '@wordpress/i18n'; -import { decodeEntities } from '@wordpress/html-entities'; import { featuredImageField, slugField, @@ -15,6 +14,7 @@ import { passwordField, statusField, commentStatusField, + titleField, } from '@wordpress/fields'; import { createInterpolateElement, @@ -75,63 +75,10 @@ function usePostFields() { const { records: authors, isResolving: isLoadingAuthors } = useEntityRecords( 'root', 'user', { per_page: -1 } ); - const { frontPageId, postsPageId } = useSelect( ( select ) => { - const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( 'root', 'site' ); - return { - frontPageId: siteSettings?.page_on_front, - postsPageId: siteSettings?.page_for_posts, - }; - }, [] ); - const fields = useMemo( () => [ featuredImageField, - { - label: __( 'Title' ), - id: 'title', - type: 'text', - getValue: ( { item } ) => - typeof item.title === 'string' - ? item.title - : item.title?.raw, - render: ( { item } ) => { - const renderedTitle = - typeof item.title === 'string' - ? item.title - : item.title?.rendered; - - let suffix = ''; - if ( item.id === frontPageId ) { - suffix = ( - - { __( 'Homepage' ) } - - ); - } else if ( item.id === postsPageId ) { - suffix = ( - - { __( 'Posts Page' ) } - - ); - } - - return ( - - - { decodeEntities( renderedTitle ) || - __( '(no title)' ) } - - { suffix } - - ); - }, - enableHiding: false, - }, + titleField, { label: __( 'Author' ), id: 'author', @@ -234,7 +181,7 @@ function usePostFields() { commentStatusField, passwordField, ], - [ authors, frontPageId, postsPageId ] + [ authors ] ); return { diff --git a/packages/fields/src/actions/utils.ts b/packages/fields/src/actions/utils.ts index 14e8edae4be048..60d3d00e82766a 100644 --- a/packages/fields/src/actions/utils.ts +++ b/packages/fields/src/actions/utils.ts @@ -34,10 +34,10 @@ export function getItemTitle( item: Post ) { if ( typeof item.title === 'string' ) { return decodeEntities( item.title ); } - if ( 'rendered' in item.title ) { + if ( item.title && 'rendered' in item.title ) { return decodeEntities( item.title.rendered ); } - if ( 'raw' in item.title ) { + if ( item.title && 'raw' in item.title ) { return decodeEntities( item.title.raw ); } return ''; diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts index 5332f476f8ff58..d8e6f25276d6b8 100644 --- a/packages/fields/src/fields/title/index.ts +++ b/packages/fields/src/fields/title/index.ts @@ -9,6 +9,7 @@ import { __ } from '@wordpress/i18n'; */ import type { BasePost } from '../../types'; import { getItemTitle } from '../../actions/utils'; +import TitleView from './title-view'; const titleField: Field< BasePost > = { type: 'text', @@ -16,6 +17,8 @@ const titleField: Field< BasePost > = { label: __( 'Title' ), placeholder: __( 'No title' ), getValue: ( { item } ) => getItemTitle( item ), + render: TitleView, + enableHiding: false, }; export default titleField; diff --git a/packages/fields/src/fields/title/title-view.tsx b/packages/fields/src/fields/title/title-view.tsx new file mode 100644 index 00000000000000..c15ed96b89b73b --- /dev/null +++ b/packages/fields/src/fields/title/title-view.tsx @@ -0,0 +1,62 @@ +/** + * WordPress dependencies + */ +import { __experimentalHStack as HStack } from '@wordpress/components'; +import { decodeEntities } from '@wordpress/html-entities'; +import { __ } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import type { Settings } from '@wordpress/core-data'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; +import { getItemTitle } from '../../actions/utils'; + +const TitleView = ( { item }: { item: BasePost } ) => { + const { frontPageId, postsPageId } = useSelect( ( select ) => { + const { getEntityRecord } = select( coreStore ); + const siteSettings: Settings | undefined = getEntityRecord( + 'root', + 'site', + '' + ); + return { + frontPageId: siteSettings?.page_on_front, + postsPageId: siteSettings?.page_for_posts, + }; + }, [] ); + + const renderedTitle = getItemTitle( item ); + + let suffix; + if ( item.id === frontPageId ) { + suffix = ( + + { __( 'Homepage' ) } + + ); + } else if ( item.id === postsPageId ) { + suffix = ( + + { __( 'Posts Page' ) } + + ); + } + + return ( + + + { decodeEntities( renderedTitle ) || __( '(no title)' ) } + + { suffix } + + ); +}; + +export default TitleView; From 1e82c946c80eb4542c5b2aaa0b302ae4cde48f2e Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 13 Nov 2024 10:25:41 +0100 Subject: [PATCH 09/17] Site Editor: Avoid using edited entity state in site editor loading hook (#66924) Co-authored-by: youknowriad Co-authored-by: ntsekouras --- packages/edit-site/src/components/layout/hooks.js | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/packages/edit-site/src/components/layout/hooks.js b/packages/edit-site/src/components/layout/hooks.js index 184e1b44896c5b..490fcf39ea622a 100644 --- a/packages/edit-site/src/components/layout/hooks.js +++ b/packages/edit-site/src/components/layout/hooks.js @@ -5,15 +5,9 @@ import { useEffect, useState } from '@wordpress/element'; import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; -/** - * Internal dependencies - */ -import useEditedEntityRecord from '../use-edited-entity-record'; - const MAX_LOADING_TIME = 10000; // 10 seconds export function useIsSiteEditorLoading() { - const { isLoaded: hasLoadedPost } = useEditedEntityRecord(); const [ loaded, setLoaded ] = useState( false ); const inLoadingPause = useSelect( ( select ) => { @@ -64,5 +58,5 @@ export function useIsSiteEditorLoading() { } }, [ inLoadingPause ] ); - return ! loaded || ! hasLoadedPost; + return ! loaded; } From 0098e9bbc65d9208de7af6c78d255a028892627f Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 13 Nov 2024 12:09:58 +0200 Subject: [PATCH 10/17] ToggleGroupControl: Fix active background for `zero` value (#66855) Co-authored-by: ntsekouras Co-authored-by: mirka <0mirka00@git.wordpress.org> --- packages/components/CHANGELOG.md | 1 + .../src/toggle-group-control/toggle-group-control/component.tsx | 2 +- 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index abd32b37c4c650..2fddf51173e832 100644 --- a/packages/components/CHANGELOG.md +++ b/packages/components/CHANGELOG.md @@ -9,6 +9,7 @@ ### Bug Fixes - `Popover`: Fix missing label of the headerTitle Close button ([#66813](https://github.com/WordPress/gutenberg/pull/66813)). +- `ToggleGroupControl`: Fix active background for `0` value ([#66855](https://github.com/WordPress/gutenberg/pull/66855)). ### Enhancements diff --git a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx index 7f384f70ae1dc5..0c3cadf210d84a 100644 --- a/packages/components/src/toggle-group-control/toggle-group-control/component.tsx +++ b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx @@ -52,7 +52,7 @@ function UnconnectedToggleGroupControl( const [ controlElement, setControlElement ] = useState< HTMLElement >(); const refs = useMergeRefs( [ setControlElement, forwardedRef ] ); const selectedRect = useTrackElementOffsetRect( - value ? selectedElement : undefined + value || value === 0 ? selectedElement : undefined ); useAnimatedOffsetRect( controlElement, selectedRect, { prefix: 'selected', From 8d9b4f4e7379e4eb0581b9a01a41b696b896c9b5 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 13 Nov 2024 19:22:45 +0900 Subject: [PATCH 11/17] Hide metaboxes in Zoom Out (#66886) Co-authored-by: t-hamano Co-authored-by: getdave Co-authored-by: jasmussen Co-authored-by: MaggieCabrera Co-authored-by: draganescu Co-authored-by: ndiego Co-authored-by: arnaudbroes Co-authored-by: richtabor Co-authored-by: stokesman --- packages/edit-post/src/components/layout/index.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index b50e17054fd3ef..225788a15a8e1d 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -424,7 +424,9 @@ function Layout( { !! select( blockEditorStore ).getBlockSelectionStart(), showIconLabels: get( 'core', 'showIconLabels' ), isDistractionFree: get( 'core', 'distractionFree' ), - showMetaBoxes: ! DESIGN_POST_TYPES.includes( currentPostType ), + showMetaBoxes: + ! DESIGN_POST_TYPES.includes( currentPostType ) && + ! isZoomOut(), isWelcomeGuideVisible: isFeatureActive( 'welcomeGuide' ), templateId: supportsTemplateMode && From ea3a85b0daf5b28bdbdb975cdd3582ba6b0f01c0 Mon Sep 17 00:00:00 2001 From: Aki Hamano <54422211+t-hamano@users.noreply.github.com> Date: Wed, 13 Nov 2024 19:46:49 +0900 Subject: [PATCH 12/17] Block Patterns List: Fix visual title and tooltip inconsistencies (#64815) * Block Patterns List: Eliminate visual title and tooltip inconsistencies * Fix storybook Unlinked contributors: isuke01. Co-authored-by: t-hamano Co-authored-by: ntsekouras Co-authored-by: richtabor Co-authored-by: carolinan --- .../components/block-patterns-list/README.md | 8 ++++ .../components/block-patterns-list/index.js | 40 +++++++------------ .../stories/index.story.js | 10 +---- .../components/block-toolbar/change-design.js | 2 +- .../inserter/block-patterns-tab/index.js | 1 - .../src/template-part/edit/index.js | 2 +- 6 files changed, 25 insertions(+), 38 deletions(-) diff --git a/packages/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md index 18e7ead5d1805a..f4c6cc6141de13 100644 --- a/packages/block-editor/src/components/block-patterns-list/README.md +++ b/packages/block-editor/src/components/block-patterns-list/README.md @@ -61,6 +61,14 @@ The aria label for the block patterns list. - Required: No - Default: `Block Patterns` +#### showTitlesAsTooltip + +Whether to render the title of each pattern as a tooltip. User-defined patterns always show their visual title regardless of this prop. + +- Type: `boolean` +- Required: No +- Default: `false` + ## Related components Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [`BlockEditorProvider`](https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/provider/README.md) in the components tree. diff --git a/packages/block-editor/src/components/block-patterns-list/index.js b/packages/block-editor/src/components/block-patterns-list/index.js index 741a92ddf10dfa..8128e89418f45a 100644 --- a/packages/block-editor/src/components/block-patterns-list/index.js +++ b/packages/block-editor/src/components/block-patterns-list/index.js @@ -39,14 +39,14 @@ function BlockPattern( { pattern, onClick, onHover, - showTitle = true, - showTooltip, + showTitlesAsTooltip, category, } ) { const [ isDragging, setIsDragging ] = useState( false ); const { blocks, viewportWidth } = pattern; const instanceId = useInstanceId( BlockPattern ); const descriptionId = `block-editor-block-patterns-list__item-description-${ instanceId }`; + const isUserPattern = pattern.type === INSERTER_PATTERN_TYPES.user; // When we have a selected category and the pattern is draggable, we need to update the // pattern's categories in metadata to only contain the selected category, and pass this to @@ -94,10 +94,7 @@ function BlockPattern( { } } > - - { showTitle && ( + { ( ! showTitlesAsTooltip || isUserPattern ) && ( - { pattern.type === - INSERTER_PATTERN_TYPES.user && - ! pattern.syncStatus && ( -
- -
- ) } - { ( ! showTooltip || - pattern.type === - INSERTER_PATTERN_TYPES.user ) && ( -
- { pattern.title } + { isUserPattern && ! pattern.syncStatus && ( +
+
) } +
+ { pattern.title } +
) } @@ -196,7 +186,6 @@ function BlockPatternsList( orientation, label = __( 'Block patterns' ), category, - showTitle = true, showTitlesAsTooltip, pagingProps, }, @@ -230,8 +219,7 @@ function BlockPatternsList( onClick={ onClickPattern } onHover={ onHover } isDraggable={ isDraggable } - showTitle={ showTitle } - showTooltip={ showTitlesAsTooltip } + showTitlesAsTooltip={ showTitlesAsTooltip } category={ category } /> ) ) } diff --git a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js index 0ebb4520d98fd4..ad9bffab762c23 100644 --- a/packages/block-editor/src/components/block-patterns-list/stories/index.story.js +++ b/packages/block-editor/src/components/block-patterns-list/stories/index.story.js @@ -31,7 +31,6 @@ export const Default = { blockPatterns: patterns, isDraggable: false, label: 'Block patterns story', - showTitle: true, showTitlesAsTooltip: false, }, argTypes: { @@ -40,18 +39,11 @@ export const Default = { description: 'Usually this component is used with `useAsyncList` for performance reasons and you should provide the returned list from that hook. Alternatively it should have the same value with `blockPatterns`.', }, - showTitle: { - description: 'Whether to render the title of each pattern.', - table: { - defaultValue: { summary: true }, - type: { summary: 'boolean' }, - }, - }, onClickPattern: { type: 'function' }, onHover: { type: 'function' }, showTitlesAsTooltip: { description: - 'Whether to render the title of each pattern as a tooltip. If enabled, it takes precedence over `showTitle` prop.', + 'Whether to render the title of each pattern as a tooltip. If enabled', }, orientation: { description: 'Orientation for the underlying composite widget.', diff --git a/packages/block-editor/src/components/block-toolbar/change-design.js b/packages/block-editor/src/components/block-toolbar/change-design.js index 9da1affe4273cc..2d69675218ea48 100644 --- a/packages/block-editor/src/components/block-toolbar/change-design.js +++ b/packages/block-editor/src/components/block-toolbar/change-design.js @@ -118,7 +118,7 @@ export default function ChangeDesign( { clientId } ) { ) } diff --git a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js index 141ebf8cc84016..01e41111b7c890 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/index.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/index.js @@ -79,7 +79,6 @@ function BlockPatternsTab( { onInsert={ onInsert } rootClientId={ rootClientId } category={ category } - showTitlesAsTooltip={ false } />
) } diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index a318fd285cdc33..ba66ffa673ff87 100644 --- a/packages/block-library/src/template-part/edit/index.js +++ b/packages/block-library/src/template-part/edit/index.js @@ -95,7 +95,7 @@ function TemplatesList( { area, clientId, isEntityAvailable, onSelect } ) { label={ __( 'Templates' ) } blockPatterns={ blockPatterns } onClickPattern={ onSelect } - showTitle={ false } + showTitlesAsTooltip /> ); From f992ba752021befdee058f68500607a73fa94673 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Wed, 13 Nov 2024 12:16:28 +0100 Subject: [PATCH 13/17] Post fields: move `date` fields from `edit-site` to `fields` package (#66938) Co-authored-by: oandregal Co-authored-by: youknowriad --- package-lock.json | 1 + packages/date/README.md | 2 +- packages/date/src/index.js | 18 ++-- .../src/components/post-fields/index.js | 94 +------------------ packages/fields/README.md | 4 + packages/fields/package.json | 1 + packages/fields/src/fields/date/date-view.tsx | 92 ++++++++++++++++++ packages/fields/src/fields/date/index.tsx | 23 +++++ packages/fields/src/fields/index.ts | 1 + packages/fields/src/types.ts | 4 +- packages/fields/tsconfig.json | 19 ++-- 11 files changed, 149 insertions(+), 110 deletions(-) create mode 100644 packages/fields/src/fields/date/date-view.tsx create mode 100644 packages/fields/src/fields/date/index.tsx diff --git a/package-lock.json b/package-lock.json index 0bb48c55c5326c..27f01fd681824f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -54685,6 +54685,7 @@ "@wordpress/core-data": "*", "@wordpress/data": "*", "@wordpress/dataviews": "*", + "@wordpress/date": "*", "@wordpress/element": "*", "@wordpress/hooks": "*", "@wordpress/html-entities": "*", diff --git a/packages/date/README.md b/packages/date/README.md index 8edd4e94a8538f..ed2dfdd4790324 100644 --- a/packages/date/README.md +++ b/packages/date/README.md @@ -50,7 +50,7 @@ _Parameters_ - _dateFormat_ `string`: PHP-style formatting string. See php.net/date. - _dateValue_ `Moment | Date | string | undefined`: Date object or string, parsable by moment.js. -- _timezone_ `string | number | boolean | undefined`: Timezone to output result in or a UTC offset. Defaults to timezone from site. Notice: `boolean` is effectively deprecated, but still supported for backward compatibility reasons. +- _timezone_ `string | number | boolean | undefined=`: Timezone to output result in or a UTC offset. Defaults to timezone from site. Notice: `boolean` is effectively deprecated, but still supported for backward compatibility reasons. _Returns_ diff --git a/packages/date/src/index.js b/packages/date/src/index.js index 90f65f62628dc8..b632de3a7431f6 100644 --- a/packages/date/src/index.js +++ b/packages/date/src/index.js @@ -525,15 +525,15 @@ export function gmdate( dateFormat, dateValue = new Date() ) { * Backward Compatibility Notice: if `timezone` is set to `true`, the function * behaves like `gmdateI18n`. * - * @param {string} dateFormat PHP-style formatting string. - * See php.net/date. - * @param {Moment | Date | string | undefined} dateValue Date object or string, parsable by - * moment.js. - * @param {string | number | boolean | undefined} timezone Timezone to output result in or a - * UTC offset. Defaults to timezone from - * site. Notice: `boolean` is effectively - * deprecated, but still supported for - * backward compatibility reasons. + * @param {string} dateFormat PHP-style formatting string. + * See php.net/date. + * @param {Moment | Date | string | undefined} dateValue Date object or string, parsable by + * moment.js. + * @param {string | number | boolean | undefined=} timezone Timezone to output result in or a + * UTC offset. Defaults to timezone from + * site. Notice: `boolean` is effectively + * deprecated, but still supported for + * backward compatibility reasons. * * @see https://en.wikipedia.org/wiki/List_of_tz_database_time_zones * @see https://en.wikipedia.org/wiki/ISO_8601#Time_offsets_from_UTC diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 097459ea110039..e151c5a048c011 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -6,7 +6,7 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; +import { __ } from '@wordpress/i18n'; import { featuredImageField, slugField, @@ -15,24 +15,14 @@ import { statusField, commentStatusField, titleField, + dateField, } from '@wordpress/fields'; -import { - createInterpolateElement, - useMemo, - useState, -} from '@wordpress/element'; -import { dateI18n, getDate, getSettings } from '@wordpress/date'; +import { useMemo, useState } from '@wordpress/element'; import { commentAuthorAvatar as authorIcon } from '@wordpress/icons'; import { __experimentalHStack as HStack, Icon } from '@wordpress/components'; import { useSelect } from '@wordpress/data'; import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; -const getFormattedDate = ( dateToDisplay ) => - dateI18n( - getSettings().formats.datetimeAbbreviated, - getDate( dateToDisplay ) - ); - function PostAuthorField( { item } ) { const { text, imageUrl } = useSelect( ( select ) => { @@ -99,83 +89,7 @@ function usePostFields() { }, }, statusField, - { - label: __( 'Date' ), - id: 'date', - type: 'datetime', - render: ( { item } ) => { - const isDraftOrPrivate = [ 'draft', 'private' ].includes( - item.status - ); - if ( isDraftOrPrivate ) { - return createInterpolateElement( - sprintf( - /* translators: %s: page creation or modification date. */ - __( 'Modified: ' ), - getFormattedDate( item.date ) - ), - { - span: , - time: