diff --git a/backport-changelog/6.8/7265.md b/backport-changelog/6.8/7265.md new file mode 100644 index 0000000000000..44ba36053aa0d --- /dev/null +++ b/backport-changelog/6.8/7265.md @@ -0,0 +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 new file mode 100644 index 0000000000000..a4658d1a182c7 --- /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 ( ! isset( $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 6236f0eb04b3c..d7e4a33cd02c9 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'; diff --git a/package-lock.json b/package-lock.json index 0bb48c55c5326..27f01fd681824 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/block-editor/src/components/block-patterns-list/README.md b/packages/block-editor/src/components/block-patterns-list/README.md index 18e7ead5d1805..f4c6cc6141de1 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 741a92ddf10df..8128e89418f45 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 0ebb4520d98fd..ad9bffab762c2 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 9da1affe4273c..2d69675218ea4 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-explorer/pattern-list.js b/packages/block-editor/src/components/inserter/block-patterns-explorer/pattern-list.js index 296b432bd685c..8e5e50500ec72 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; } 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 141ebf8cc8401..01e41111b7c89 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-editor/src/components/inserter/block-patterns-tab/utils.js b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js index 58065ac33ad2b..7e2b71545e796 100644 --- a/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js +++ b/packages/block-editor/src/components/inserter/block-patterns-tab/utils.js @@ -27,7 +27,7 @@ export const myPatternsCategory = { export const starterPatternsCategory = { name: 'core/starter-content', - label: __( 'Starter Content' ), + label: __( 'Starter content' ), }; export function isPatternFiltered( pattern, sourceFilter, syncFilter ) { diff --git a/packages/block-library/src/button/index.js b/packages/block-library/src/button/index.js index 2b05b280028ab..32212afc2eb70 100644 --- a/packages/block-library/src/button/index.js +++ b/packages/block-library/src/button/index.js @@ -22,7 +22,7 @@ export const settings = { example: { attributes: { className: 'is-style-fill', - text: __( 'Call to Action' ), + text: __( 'Call to action' ), }, }, edit, diff --git a/packages/block-library/src/template-part/edit/index.js b/packages/block-library/src/template-part/edit/index.js index a318fd285cdc3..ba66ffa673ff8 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 /> ); diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md index abd32b37c4c65..2fddf51173e83 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/confirm-dialog/stories/index.story.tsx b/packages/components/src/confirm-dialog/stories/index.story.tsx index 85636c0ddc81e..9496d85939edf 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 0f07664787cc3..bfa51a07a9717 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/heading/stories/index.story.tsx b/packages/components/src/heading/stories/index.story.tsx index d82a59f08c825..8777fb2c2e650 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/menu/stories/index.story.tsx b/packages/components/src/menu/stories/index.story.tsx index ecb4cc3c7593f..92501c3326958 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 diff --git a/packages/components/src/modal/stories/index.story.tsx b/packages/components/src/modal/stories/index.story.tsx index f180de0dc06a4..92c922bcb8a97 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 dfffaefe802a4..3d804f5d24d5c 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/text-highlight/stories/index.story.tsx b/packages/components/src/text-highlight/stories/index.story.tsx index d54149d8e19d3..f9538b7130095 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 f762ca3b4e3ff..92a2c7eb9be3e 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/toggle-group-control/toggle-group-control/component.tsx b/packages/components/src/toggle-group-control/toggle-group-control/component.tsx index 7f384f70ae1dc..0c3cadf210d84 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', diff --git a/packages/components/src/tooltip/stories/index.story.tsx b/packages/components/src/tooltip/stories/index.story.tsx index b006bc03aced9..4bddba0ff7b66 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/packages/components/src/truncate/stories/index.story.tsx b/packages/components/src/truncate/stories/index.story.tsx index 84eaf59edbb3e..3b06831c59aa0 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 8abe45a94aab4..6ebcf9a2e949c 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/packages/core-data/src/entity-types/settings.ts b/packages/core-data/src/entity-types/settings.ts index 2ce7eff89d888..27e803bc03029 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/date/README.md b/packages/date/README.md index 8edd4e94a8538..ed2dfdd479032 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 90f65f62628dc..b632de3a7431f 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-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index b50e17054fd3e..225788a15a8e1 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 && diff --git a/packages/edit-site/src/components/app/index.js b/packages/edit-site/src/components/app/index.js index 133a376c9c246..0551e6b295fbc 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 94b56a197e1bc..7eff0da660d27 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 ); @@ -125,12 +126,15 @@ export default function EditSiteEditor( { isPostsList = false } ) { hasSiteIcon: !! siteData?.site_icon_url, }; }, [] ); - useEditorTitle(); + const postWithTemplate = !! contextPostId; + useEditorTitle( + postWithTemplate ? contextPostType : editedPostType, + postWithTemplate ? contextPostId : editedPostId + ); const _isPreviewingTheme = isPreviewingTheme(); const hasDefaultEditorCanvasView = ! useHasEditorCanvasContainer(); const iframeProps = useEditorIframeProps(); const isEditMode = canvas === 'edit'; - const postWithTemplate = !! contextPostId; const loadingProgressId = useInstanceId( CanvasLoader, 'edit-site-editor__loading-progress' @@ -214,7 +218,9 @@ export default function EditSiteEditor( { isPostsList = false } ) { return ( <> - + { isEditMode && } { ! isReady ? : null } diff --git a/packages/edit-site/src/components/editor/use-editor-title.js b/packages/edit-site/src/components/editor/use-editor-title.js index 0645c2031a3af..2ad4e94ccc3e8 100644 --- a/packages/edit-site/src/components/editor/use-editor-title.js +++ b/packages/edit-site/src/components/editor/use-editor-title.js @@ -2,34 +2,58 @@ * WordPress dependencies */ import { _x, sprintf } from '@wordpress/i18n'; +import { useSelect } from '@wordpress/data'; +import { store as coreStore } from '@wordpress/core-data'; +import { store as editorStore } from '@wordpress/editor'; +import { decodeEntities } from '@wordpress/html-entities'; /** * Internal dependencies */ -import useEditedEntityRecord from '../use-edited-entity-record'; import useTitle from '../routes/use-title'; import { POST_TYPE_LABELS, TEMPLATE_POST_TYPE } from '../../utils/constants'; -function useEditorTitle() { - const { - record: editedPost, - getTitle, - isLoaded: hasLoadedPost, - } = useEditedEntityRecord(); - let title; - if ( hasLoadedPost ) { - title = sprintf( +function useEditorTitle( postType, postId ) { + const { title, isLoaded } = useSelect( + ( select ) => { + const { getEditedEntityRecord, hasFinishedResolution } = + select( coreStore ); + const { __experimentalGetTemplateInfo: getTemplateInfo } = + select( editorStore ); + const _record = getEditedEntityRecord( + 'postType', + postType, + postId + ); + const _isLoaded = hasFinishedResolution( 'getEditedEntityRecord', [ + 'postType', + postType, + postId, + ] ); + const templateInfo = getTemplateInfo( _record ); + + return { + title: templateInfo.title, + isLoaded: _isLoaded, + }; + }, + [ postType, postId ] + ); + + let editorTitle; + if ( isLoaded ) { + editorTitle = sprintf( // translators: A breadcrumb trail for the Admin document title. 1: title of template being edited, 2: type of template (Template or Template Part). _x( '%1$s ‹ %2$s', 'breadcrumb trail' ), - getTitle(), - POST_TYPE_LABELS[ editedPost.type ] ?? + decodeEntities( title ), + POST_TYPE_LABELS[ postType ] ?? POST_TYPE_LABELS[ TEMPLATE_POST_TYPE ] ); } // Only announce the title once the editor is ready to prevent "Replace" // action in from double-announcing. - useTitle( hasLoadedPost && title ); + useTitle( isLoaded && editorTitle ); } export default useEditorTitle; 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 2e840a7acdc37..d3e84ff539099 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/components/layout/hooks.js b/packages/edit-site/src/components/layout/hooks.js index 184e1b44896c5..490fcf39ea622 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; } diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 083d971d102eb..e151c5a048c01 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -6,8 +6,7 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { __, sprintf } from '@wordpress/i18n'; -import { decodeEntities } from '@wordpress/html-entities'; +import { __ } from '@wordpress/i18n'; import { featuredImageField, slugField, @@ -15,24 +14,15 @@ import { passwordField, 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 ) => { @@ -75,63 +65,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', @@ -152,89 +89,13 @@ 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: