From f6d947a4b09663089ba0209ff901ab024acfecfb Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Sun, 1 Dec 2024 10:49:51 +0200 Subject: [PATCH 01/11] DataViews: Move template title field --- .../src/components/page-templates/fields.js | 19 +--------- .../src/components/page-templates/index.js | 14 ++++---- packages/fields/README.md | 4 +++ packages/fields/src/fields/index.ts | 1 + .../fields/src/fields/template-title/index.ts | 23 ++++++++++++ packages/fields/src/fields/title/index.ts | 4 +-- .../fields/title/{title-view.tsx => view.tsx} | 35 ++++++++++++------- 7 files changed, 61 insertions(+), 39 deletions(-) create mode 100644 packages/fields/src/fields/template-title/index.ts rename packages/fields/src/fields/title/{title-view.tsx => view.tsx} (68%) diff --git a/packages/edit-site/src/components/page-templates/fields.js b/packages/edit-site/src/components/page-templates/fields.js index 35d7b9714d5be..88c20ff27ebbc 100644 --- a/packages/edit-site/src/components/page-templates/fields.js +++ b/packages/edit-site/src/components/page-templates/fields.js @@ -25,7 +25,7 @@ import { useAddedBy } from './hooks'; import usePatternSettings from '../page-patterns/use-pattern-settings'; import { unlock } from '../../lock-unlock'; -const { useLink, Link } = unlock( routerPrivateApis ); +const { useLink } = unlock( routerPrivateApis ); const { useGlobalStyle } = unlock( blockEditorPrivateApis ); function PreviewField( { item } ) { @@ -75,23 +75,6 @@ export const previewField = { enableSorting: false, }; -function TitleField( { item } ) { - return ( - - { decodeEntities( item.title?.rendered ) || __( '(no title)' ) } - - ); -} - -export const titleField = { - label: __( 'Template' ), - id: 'title', - getValue: ( { item } ) => item.title?.rendered, - render: TitleField, - enableHiding: false, - enableGlobalSearch: true, -}; - export const descriptionField = { label: __( 'Description' ), id: 'description', diff --git a/packages/edit-site/src/components/page-templates/index.js b/packages/edit-site/src/components/page-templates/index.js index 828867e6f283d..934fb0be6784d 100644 --- a/packages/edit-site/src/components/page-templates/index.js +++ b/packages/edit-site/src/components/page-templates/index.js @@ -7,6 +7,7 @@ import { privateApis as corePrivateApis } from '@wordpress/core-data'; import { DataViews, filterSortAndPaginate } from '@wordpress/dataviews'; import { privateApis as routerPrivateApis } from '@wordpress/router'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; +import { templateTitleField } from '@wordpress/fields'; import { addQueryArgs } from '@wordpress/url'; /** @@ -23,12 +24,7 @@ import { } from '../../utils/constants'; import { unlock } from '../../lock-unlock'; import { useEditPostAction } from '../dataviews-actions'; -import { - authorField, - descriptionField, - previewField, - titleField, -} from './fields'; +import { authorField, descriptionField, previewField } from './fields'; const { usePostActions } = unlock( editorPrivateApis ); const { useHistory, useLocation } = unlock( routerPrivateApis ); @@ -172,7 +168,7 @@ export default function PageTemplates() { const fields = useMemo( () => [ previewField, - titleField, + templateTitleField, descriptionField, { ...authorField, @@ -227,6 +223,10 @@ export default function PageTemplates() { view={ view } onChangeView={ onChangeView } onChangeSelection={ onChangeSelection } + isItemClickable={ () => true } + onClickItem={ ( { id } ) => { + history.navigate( `/wp_template/${ id }?canvas=edit` ); + } } selection={ selection } defaultLayouts={ defaultLayouts } /> diff --git a/packages/fields/README.md b/packages/fields/README.md index 144982361be25..6e0261fab3901 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -111,6 +111,10 @@ Status field for BasePost. Template field for BasePost. +### templateTitleField + +Undocumented declaration. + ### titleField Title field for BasePost. diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts index 2cdf89ee13fb0..c7ac42e045c1f 100644 --- a/packages/fields/src/fields/index.ts +++ b/packages/fields/src/fields/index.ts @@ -1,5 +1,6 @@ export { default as slugField } from './slug'; export { default as titleField } from './title'; +export { default as templateTitleField } from './template-title'; export { default as orderField } from './order'; export { default as featuredImageField } from './featured-image'; export { default as templateField } from './template'; diff --git a/packages/fields/src/fields/template-title/index.ts b/packages/fields/src/fields/template-title/index.ts new file mode 100644 index 0000000000000..b45c5007151dc --- /dev/null +++ b/packages/fields/src/fields/template-title/index.ts @@ -0,0 +1,23 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { Template } from '../../types'; +import { getItemTitle } from '../../actions/utils'; +import TitleView from '../title/view'; + +const templateTitleField: Field< Template > = { + label: __( 'Template' ), + id: 'title', + getValue: ( { item } ) => getItemTitle( item ), + render: TitleView, + enableHiding: false, + enableGlobalSearch: true, +}; + +export default templateTitleField; diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts index 111980a1ca2b0..3912ce0670503 100644 --- a/packages/fields/src/fields/title/index.ts +++ b/packages/fields/src/fields/title/index.ts @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; */ import type { BasePost } from '../../types'; import { getItemTitle } from '../../actions/utils'; -import TitleView from './title-view'; +import { PostTitleView } from './view'; const titleField: Field< BasePost > = { type: 'text', @@ -17,7 +17,7 @@ const titleField: Field< BasePost > = { label: __( 'Title' ), placeholder: __( 'No title' ), getValue: ( { item } ) => getItemTitle( item ), - render: TitleView, + render: PostTitleView, enableHiding: false, }; diff --git a/packages/fields/src/fields/title/title-view.tsx b/packages/fields/src/fields/title/view.tsx similarity index 68% rename from packages/fields/src/fields/title/title-view.tsx rename to packages/fields/src/fields/title/view.tsx index f6bf5fb1817d9..581d17b9a2abd 100644 --- a/packages/fields/src/fields/title/title-view.tsx +++ b/packages/fields/src/fields/title/view.tsx @@ -1,8 +1,12 @@ +/** + * External dependencies + */ +import type { ReactNode } from 'react'; + /** * 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'; @@ -11,10 +15,10 @@ import type { Settings } from '@wordpress/core-data'; /** * Internal dependencies */ -import type { BasePost } from '../../types'; +import type { CommonPost } from '../../types'; import { getItemTitle } from '../../actions/utils'; -const TitleView = ( { item }: { item: BasePost } ) => { +export function PostTitleView( { item }: { item: CommonPost } ) { const { frontPageId, postsPageId } = useSelect( ( select ) => { const { getEntityRecord } = select( coreStore ); const siteSettings = getEntityRecord( @@ -26,9 +30,6 @@ const TitleView = ( { item }: { item: BasePost } ) => { postsPageId: siteSettings?.page_for_posts, }; }, [] ); - - const renderedTitle = getItemTitle( item ); - let suffix; if ( item.id === frontPageId ) { suffix = ( @@ -43,19 +44,29 @@ const TitleView = ( { item }: { item: BasePost } ) => { ); } + return { suffix }; +} +export function BaseTitleView( { + item, + children, +}: { + item: CommonPost; + children?: ReactNode; +} ) { + const renderedTitle = getItemTitle( item ); return ( - - { decodeEntities( renderedTitle ) || __( '(no title)' ) } - - { suffix } + { renderedTitle || __( '(no title)' ) } + { children } ); -}; +} -export default TitleView; +export default function TitleView( { item }: { item: CommonPost } ) { + return ; +} From 25b09d373e7f71a3c020fbabb6682755e141f2af Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 2 Dec 2024 17:25:29 +0200 Subject: [PATCH 02/11] patternTitle field and update classNames --- .../src/components/dataviews/style.scss | 10 +++ .../src/components/page-patterns/fields.js | 61 +------------------ .../src/components/page-patterns/index.js | 22 ++++++- .../src/components/page-patterns/style.scss | 28 --------- .../src/components/post-list/style.scss | 36 ----------- .../src/dataviews/store/private-actions.ts | 47 ++++++++------ packages/fields/README.md | 8 +++ packages/fields/src/fields/index.ts | 2 + .../fields/src/fields/page-title/index.ts | 25 ++++++++ .../fields/src/fields/page-title/style.scss | 10 +++ .../fields/src/fields/page-title/view.tsx | 38 ++++++++++++ .../fields/src/fields/pattern-title/index.ts | 25 ++++++++ .../src/fields/pattern-title/style.scss | 3 + .../fields/src/fields/pattern-title/view.tsx | 36 +++++++++++ .../fields/src/fields/template-title/index.ts | 1 + packages/fields/src/fields/title/index.ts | 9 +-- packages/fields/src/fields/title/style.scss | 8 +++ packages/fields/src/fields/title/view.tsx | 34 +---------- packages/fields/src/style.scss | 3 + 19 files changed, 226 insertions(+), 180 deletions(-) create mode 100644 packages/fields/src/fields/page-title/index.ts create mode 100644 packages/fields/src/fields/page-title/style.scss create mode 100644 packages/fields/src/fields/page-title/view.tsx create mode 100644 packages/fields/src/fields/pattern-title/index.ts create mode 100644 packages/fields/src/fields/pattern-title/style.scss create mode 100644 packages/fields/src/fields/pattern-title/view.tsx create mode 100644 packages/fields/src/fields/title/style.scss diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss index bd75a1ff9e2a1..a357679bef1eb 100644 --- a/packages/dataviews/src/components/dataviews/style.scss +++ b/packages/dataviews/src/components/dataviews/style.scss @@ -60,6 +60,16 @@ color: var(--wp-admin-theme-color); } } + + &.dataviews-view-grid__primary-field--clickable span, + > .dataviews-view-table__cell-content--clickable span { + color: $gray-900; + + &:hover { + color: var(--wp-admin-theme-color); + } + @include link-reset(); + } } .dataviews-view-list__primary-field--clickable, diff --git a/packages/edit-site/src/components/page-patterns/fields.js b/packages/edit-site/src/components/page-patterns/fields.js index 60e37844b2edb..f202664389f0f 100644 --- a/packages/edit-site/src/components/page-patterns/fields.js +++ b/packages/edit-site/src/components/page-patterns/fields.js @@ -6,21 +6,15 @@ import clsx from 'clsx'; /** * WordPress dependencies */ -import { - __experimentalHStack as HStack, - Button, - Tooltip, - FlexBlock, -} from '@wordpress/components'; +import { __experimentalHStack as HStack } from '@wordpress/components'; import { __, _x } from '@wordpress/i18n'; import { useState, useMemo, useId } from '@wordpress/element'; import { BlockPreview, privateApis as blockEditorPrivateApis, } from '@wordpress/block-editor'; -import { Icon, lockSmall } from '@wordpress/icons'; +import { Icon } from '@wordpress/icons'; import { parse } from '@wordpress/blocks'; -import { decodeEntities } from '@wordpress/html-entities'; import { privateApis as routerPrivateApis } from '@wordpress/router'; /** @@ -112,57 +106,6 @@ export const previewField = { enableSorting: false, }; -function TitleField( { item } ) { - const isUserPattern = item.type === PATTERN_TYPES.user; - const isTemplatePart = item.type === TEMPLATE_PART_POST_TYPE; - const { onClick } = useLink( - `/${ item.type }/${ - isUserPattern || isTemplatePart ? item.id : item.name - }?canvas=edit` - ); - const title = decodeEntities( defaultGetTitle( item ) ); - return ( - - - { item.type === PATTERN_TYPES.theme ? ( - title - ) : ( - - ) } - - { item.type === PATTERN_TYPES.theme && ( - - - - ) } - - ); -} - -export const titleField = { - label: __( 'Title' ), - id: 'title', - getValue: ( { item } ) => item.title?.raw || item.title, - render: TitleField, - enableHiding: false, -}; - const SYNC_FILTERS = [ { value: PATTERN_SYNC_TYPES.full, diff --git a/packages/edit-site/src/components/page-patterns/index.js b/packages/edit-site/src/components/page-patterns/index.js index b675333488757..9a4dedca09803 100644 --- a/packages/edit-site/src/components/page-patterns/index.js +++ b/packages/edit-site/src/components/page-patterns/index.js @@ -9,6 +9,7 @@ import { usePrevious } from '@wordpress/compose'; import { useEntityRecords } from '@wordpress/core-data'; import { privateApis as editorPrivateApis } from '@wordpress/editor'; import { privateApis as routerPrivateApis } from '@wordpress/router'; +import { patternTitleField } from '@wordpress/fields'; /** * Internal dependencies @@ -29,13 +30,12 @@ import { useEditPostAction } from '../dataviews-actions'; import { patternStatusField, previewField, - titleField, templatePartAuthorField, } from './fields'; const { ExperimentalBlockEditorProvider } = unlock( blockEditorPrivateApis ); const { usePostActions } = unlock( editorPrivateApis ); -const { useLocation } = unlock( routerPrivateApis ); +const { useLocation, useHistory } = unlock( routerPrivateApis ); const EMPTY_ARRAY = []; const defaultLayouts = { @@ -74,6 +74,7 @@ export default function DataviewsPatterns() { const { query: { postType = 'wp_block', categoryId: categoryIdFromURL }, } = useLocation(); + const history = useHistory(); const categoryId = categoryIdFromURL || PATTERN_DEFAULT_CATEGORY; const [ view, setView ] = useState( DEFAULT_VIEW ); const previousCategoryId = usePrevious( categoryId ); @@ -105,7 +106,7 @@ export default function DataviewsPatterns() { }, [ records ] ); const fields = useMemo( () => { - const _fields = [ previewField, titleField ]; + const _fields = [ previewField, patternTitleField ]; if ( postType === PATTERN_TYPES.user ) { _fields.push( patternStatusField ); @@ -183,6 +184,21 @@ export default function DataviewsPatterns() { data={ dataWithPermissions || EMPTY_ARRAY } getItemId={ ( item ) => item.name ?? item.id } isLoading={ isResolving } + isItemClickable={ ( item ) => + item.type !== PATTERN_TYPES.theme + } + onClickItem={ ( item ) => { + history.navigate( + `/${ item.type }/${ + [ + PATTERN_TYPES.user, + TEMPLATE_PART_POST_TYPE, + ].includes( item.type ) + ? item.id + : item.name + }?canvas=edit` + ); + } } view={ view } onChangeView={ setView } defaultLayouts={ defaultLayouts } diff --git a/packages/edit-site/src/components/page-patterns/style.scss b/packages/edit-site/src/components/page-patterns/style.scss index d59cce420202e..72d53c2a721af 100644 --- a/packages/edit-site/src/components/page-patterns/style.scss +++ b/packages/edit-site/src/components/page-patterns/style.scss @@ -71,34 +71,6 @@ } } -.edit-site-patterns__pattern-title { - display: block; - white-space: nowrap; - overflow: hidden; - text-overflow: ellipsis; - color: inherit; - - .is-link { - text-decoration: none; - color: $gray-200; - - &:hover, - &:focus { - color: $white; - } - } - - .edit-site-patterns__pattern-icon { - border-radius: $grid-unit-05; - background: var(--wp-block-synced-color); - fill: $white; - } - - .edit-site-patterns__pattern-lock-icon { - fill: currentcolor; - } -} - .edit-site-page-patterns-dataviews { .dataviews-view-grid__badge-fields { .dataviews-view-grid__field-value:has(.edit-site-patterns__field-sync-status-fully) { diff --git a/packages/edit-site/src/components/post-list/style.scss b/packages/edit-site/src/components/post-list/style.scss index 14bb11b41d445..8ff7e31c79dd6 100644 --- a/packages/edit-site/src/components/post-list/style.scss +++ b/packages/edit-site/src/components/post-list/style.scss @@ -65,42 +65,6 @@ } } -.edit-site-post-list__title span { - text-overflow: ellipsis; - overflow: hidden; -} - -.dataviews-view-grid__primary-field.dataviews-view-grid__primary-field--clickable -.edit-site-post-list__title -span, -.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable -.edit-site-post-list__title -span { - text-decoration: none; - text-overflow: ellipsis; - white-space: nowrap; - overflow: hidden; - display: block; - flex-grow: 0; - color: $gray-900; - - &:hover { - color: var(--wp-admin-theme-color); - } - @include link-reset(); -} - -.edit-site-post-list__title-badge { - background: $gray-100; - color: $gray-800; - padding: 0 $grid-unit-05; - border-radius: $radius-small; - font-size: 12px; - font-weight: 400; - flex-shrink: 0; - line-height: $grid-unit-05 * 5; -} - .edit-site-post-list__status-icon { height: $grid-unit-30; width: $grid-unit-30; diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts index 754a02d317a38..3af525997735c 100644 --- a/packages/editor/src/dataviews/store/private-actions.ts +++ b/packages/editor/src/dataviews/store/private-actions.ts @@ -4,12 +4,6 @@ import { store as coreStore } from '@wordpress/core-data'; import type { Action, Field } from '@wordpress/dataviews'; import { doAction } from '@wordpress/hooks'; - -/** - * Internal dependencies - */ -import { store as editorStore } from '../../store'; -import { unlock } from '../../lock-unlock'; import type { PostType } from '@wordpress/fields'; import { viewPost, @@ -35,8 +29,29 @@ import { authorField, titleField, templateField, + templateTitleField, + pageTitleField, } from '@wordpress/fields'; +/** + * Internal dependencies + */ +import { store as editorStore } from '../../store'; +import { unlock } from '../../lock-unlock'; +import { + NAVIGATION_POST_TYPE, + PATTERN_POST_TYPE, + TEMPLATE_PART_POST_TYPE, + TEMPLATE_POST_TYPE, +} from '../../store/constants'; + +const DESIGN_POST_TYPES = [ + PATTERN_POST_TYPE, + TEMPLATE_POST_TYPE, + NAVIGATION_POST_TYPE, + TEMPLATE_PART_POST_TYPE, +]; + export function registerEntityAction< Item >( kind: string, name: string, @@ -127,6 +142,7 @@ export const registerPostTypeSchema = .resolveSelect( coreStore ) .getCurrentTheme(); + const isDeisgnPostType = DESIGN_POST_TYPES.includes( postType ); const actions = [ postTypeConfig.viewable ? viewPost : undefined, !! postTypeConfig.supports?.revisions @@ -134,25 +150,19 @@ export const registerPostTypeSchema = : undefined, // @ts-ignore globalThis.IS_GUTENBERG_PLUGIN - ? ! [ 'wp_template', 'wp_block', 'wp_template_part' ].includes( - postTypeConfig.slug - ) && - canCreate && - duplicatePost + ? ! isDeisgnPostType && canCreate && duplicatePost : undefined, postTypeConfig.slug === 'wp_template_part' && canCreate && currentTheme?.is_block_theme ? duplicateTemplatePart : undefined, - canCreate && postTypeConfig.slug === 'wp_block' - ? duplicatePattern - : undefined, + canCreate && postType === 'wp_block' ? duplicatePattern : undefined, postTypeConfig.supports?.title ? renamePost : undefined, postTypeConfig.supports?.[ 'page-attributes' ] ? reorderPage : undefined, - postTypeConfig.slug === 'wp_block' ? exportPattern : undefined, + postType === 'wp_block' ? exportPattern : undefined, restorePost, resetPost, deletePost, @@ -164,15 +174,18 @@ export const registerPostTypeSchema = postTypeConfig.supports?.thumbnail && currentTheme?.theme_supports?.[ 'post-thumbnails' ] && featuredImageField, - titleField, + ! isDeisgnPostType && + postTypeConfig.supports?.title && + ( postType === 'page' ? pageTitleField : titleField ), + postType === TEMPLATE_POST_TYPE && templateTitleField, postTypeConfig.supports?.author && authorField, statusField, dateField, slugField, postTypeConfig.supports?.[ 'page-attributes' ] && parentField, postTypeConfig.supports?.comments && commentStatusField, - passwordField, templateField, + ! isDeisgnPostType && passwordField, ].filter( Boolean ); registry.batch( () => { diff --git a/packages/fields/README.md b/packages/fields/README.md index 6e0261fab3901..8b5993b107761 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -67,6 +67,10 @@ Featured Image field for BasePost. Order field for BasePost. +### pageTitleField + +Undocumented declaration. + ### parentField Parent field for BasePost. @@ -75,6 +79,10 @@ Parent field for BasePost. Password field for BasePost. +### patternTitleField + +Undocumented declaration. + ### permanentlyDeletePost Delete action for PostWithPermissions. diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts index c7ac42e045c1f..410b0bf51a223 100644 --- a/packages/fields/src/fields/index.ts +++ b/packages/fields/src/fields/index.ts @@ -1,6 +1,8 @@ export { default as slugField } from './slug'; export { default as titleField } from './title'; +export { default as pageTitleField } from './page-title'; export { default as templateTitleField } from './template-title'; +export { default as patternTitleField } from './pattern-title'; export { default as orderField } from './order'; export { default as featuredImageField } from './featured-image'; export { default as templateField } from './template'; diff --git a/packages/fields/src/fields/page-title/index.ts b/packages/fields/src/fields/page-title/index.ts new file mode 100644 index 0000000000000..533eb8f591dc0 --- /dev/null +++ b/packages/fields/src/fields/page-title/index.ts @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; +import { getItemTitle } from '../../actions/utils'; +import PageTitleView from './view'; + +const pageTitleField: Field< BasePost > = { + type: 'text', + id: 'title', + label: __( 'Title' ), + placeholder: __( 'No title' ), + getValue: ( { item } ) => getItemTitle( item ), + render: PageTitleView, + enableHiding: false, + enableGlobalSearch: true, +}; + +export default pageTitleField; diff --git a/packages/fields/src/fields/page-title/style.scss b/packages/fields/src/fields/page-title/style.scss new file mode 100644 index 0000000000000..5ccb2ccaf9bf3 --- /dev/null +++ b/packages/fields/src/fields/page-title/style.scss @@ -0,0 +1,10 @@ +.fields-title-field__badge { + background: $gray-100; + color: $gray-800; + padding: 0 $grid-unit-05; + border-radius: $radius-small; + font-size: 12px; + font-weight: 400; + flex-shrink: 0; + line-height: $grid-unit-05 * 5; +} diff --git a/packages/fields/src/fields/page-title/view.tsx b/packages/fields/src/fields/page-title/view.tsx new file mode 100644 index 0000000000000..ea517feaf0037 --- /dev/null +++ b/packages/fields/src/fields/page-title/view.tsx @@ -0,0 +1,38 @@ +/** + * WordPress dependencies + */ +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 { CommonPost } from '../../types'; +import { BaseTitleView } from '../title/view'; + +export default function PageTitleView( { item }: { item: CommonPost } ) { + const { frontPageId, postsPageId } = useSelect( ( select ) => { + const { getEntityRecord } = select( coreStore ); + const siteSettings = getEntityRecord( + 'root', + 'site' + ) as Partial< Settings >; + return { + frontPageId: siteSettings?.page_on_front, + postsPageId: siteSettings?.page_for_posts, + }; + }, [] ); + return ( + + { [ frontPageId, postsPageId ].includes( item.id as number ) && ( + + { item.id === frontPageId + ? __( 'Homepage' ) + : __( 'Posts Page' ) } + + ) } + + ); +} diff --git a/packages/fields/src/fields/pattern-title/index.ts b/packages/fields/src/fields/pattern-title/index.ts new file mode 100644 index 0000000000000..ba8e4e2cab590 --- /dev/null +++ b/packages/fields/src/fields/pattern-title/index.ts @@ -0,0 +1,25 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { Pattern } from '../../types'; +import { getItemTitle } from '../../actions/utils'; +import PatternTitleView from './view'; + +const patternTitleField: Field< Pattern > = { + type: 'text', + id: 'title', + label: __( 'Title' ), + placeholder: __( 'No title' ), + getValue: ( { item } ) => getItemTitle( item ), + render: PatternTitleView, + enableHiding: false, + enableGlobalSearch: true, +}; + +export default patternTitleField; diff --git a/packages/fields/src/fields/pattern-title/style.scss b/packages/fields/src/fields/pattern-title/style.scss new file mode 100644 index 0000000000000..cd7944f259294 --- /dev/null +++ b/packages/fields/src/fields/pattern-title/style.scss @@ -0,0 +1,3 @@ +.fields-title-field span:first-child { + flex: 1; +} diff --git a/packages/fields/src/fields/pattern-title/view.tsx b/packages/fields/src/fields/pattern-title/view.tsx new file mode 100644 index 0000000000000..26ee622d00ee5 --- /dev/null +++ b/packages/fields/src/fields/pattern-title/view.tsx @@ -0,0 +1,36 @@ +/** + * WordPress dependencies + */ +import { __ } from '@wordpress/i18n'; +import { Icon, lockSmall } from '@wordpress/icons'; +import { Tooltip } from '@wordpress/components'; +// @ts-ignore +import { privateApis as patternPrivateApis } from '@wordpress/patterns'; + +/** + * Internal dependencies + */ +import type { CommonPost } from '../../types'; +import { BaseTitleView } from '../title/view'; +import { unlock } from '../../lock-unlock'; + +export const { PATTERN_TYPES } = unlock( patternPrivateApis ); + +export default function PatternTitleView( { item }: { item: CommonPost } ) { + return ( + + { item.type === PATTERN_TYPES.theme && ( + + + + ) } + + ); +} diff --git a/packages/fields/src/fields/template-title/index.ts b/packages/fields/src/fields/template-title/index.ts index b45c5007151dc..1854c64b49985 100644 --- a/packages/fields/src/fields/template-title/index.ts +++ b/packages/fields/src/fields/template-title/index.ts @@ -12,6 +12,7 @@ import { getItemTitle } from '../../actions/utils'; import TitleView from '../title/view'; const templateTitleField: Field< Template > = { + type: 'text', label: __( 'Template' ), id: 'title', getValue: ( { item } ) => getItemTitle( item ), diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts index 3912ce0670503..cb7e75f99670a 100644 --- a/packages/fields/src/fields/title/index.ts +++ b/packages/fields/src/fields/title/index.ts @@ -7,18 +7,19 @@ import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ -import type { BasePost } from '../../types'; +import type { CommonPost } from '../../types'; import { getItemTitle } from '../../actions/utils'; -import { PostTitleView } from './view'; +import TitleView from './view'; -const titleField: Field< BasePost > = { +const titleField: Field< CommonPost > = { type: 'text', id: 'title', label: __( 'Title' ), placeholder: __( 'No title' ), getValue: ( { item } ) => getItemTitle( item ), - render: PostTitleView, + render: TitleView, enableHiding: false, + enableGlobalSearch: true, }; /** diff --git a/packages/fields/src/fields/title/style.scss b/packages/fields/src/fields/title/style.scss new file mode 100644 index 0000000000000..764637b190ff6 --- /dev/null +++ b/packages/fields/src/fields/title/style.scss @@ -0,0 +1,8 @@ +.fields-title-field span:first-child { + text-overflow: ellipsis; + overflow: hidden; + text-decoration: none; + white-space: nowrap; + display: block; + flex-grow: 0; +} diff --git a/packages/fields/src/fields/title/view.tsx b/packages/fields/src/fields/title/view.tsx index 581d17b9a2abd..7e73d36f5d2db 100644 --- a/packages/fields/src/fields/title/view.tsx +++ b/packages/fields/src/fields/title/view.tsx @@ -8,9 +8,6 @@ import type { ReactNode } from 'react'; */ import { __experimentalHStack as HStack } from '@wordpress/components'; 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 @@ -18,35 +15,6 @@ import type { Settings } from '@wordpress/core-data'; import type { CommonPost } from '../../types'; import { getItemTitle } from '../../actions/utils'; -export function PostTitleView( { item }: { item: CommonPost } ) { - const { frontPageId, postsPageId } = useSelect( ( select ) => { - const { getEntityRecord } = select( coreStore ); - const siteSettings = getEntityRecord( - 'root', - 'site' - ) as Partial< Settings >; - return { - frontPageId: siteSettings?.page_on_front, - postsPageId: siteSettings?.page_for_posts, - }; - }, [] ); - let suffix; - if ( item.id === frontPageId ) { - suffix = ( - - { __( 'Homepage' ) } - - ); - } else if ( item.id === postsPageId ) { - suffix = ( - - { __( 'Posts Page' ) } - - ); - } - return { suffix }; -} - export function BaseTitleView( { item, children, @@ -57,7 +25,7 @@ export function BaseTitleView( { const renderedTitle = getItemTitle( item ); return ( diff --git a/packages/fields/src/style.scss b/packages/fields/src/style.scss index 582044235aef1..d9a571270fbb6 100644 --- a/packages/fields/src/style.scss +++ b/packages/fields/src/style.scss @@ -2,3 +2,6 @@ @import "./fields/slug/style.scss"; @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 f01982910fe7ad3c3589e79bf8bf6bb6257223fc Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 2 Dec 2024 17:49:15 +0200 Subject: [PATCH 03/11] add classNameto BaseTitleView --- packages/fields/src/fields/pattern-title/style.scss | 2 +- packages/fields/src/fields/pattern-title/view.tsx | 2 +- packages/fields/src/fields/title/view.tsx | 5 ++++- 3 files changed, 6 insertions(+), 3 deletions(-) diff --git a/packages/fields/src/fields/pattern-title/style.scss b/packages/fields/src/fields/pattern-title/style.scss index cd7944f259294..e5d37160d28ff 100644 --- a/packages/fields/src/fields/pattern-title/style.scss +++ b/packages/fields/src/fields/pattern-title/style.scss @@ -1,3 +1,3 @@ -.fields-title-field span:first-child { +.fields-pattern-title-field span:first-child { flex: 1; } diff --git a/packages/fields/src/fields/pattern-title/view.tsx b/packages/fields/src/fields/pattern-title/view.tsx index 26ee622d00ee5..4a8f074e8cbe9 100644 --- a/packages/fields/src/fields/pattern-title/view.tsx +++ b/packages/fields/src/fields/pattern-title/view.tsx @@ -18,7 +18,7 @@ export const { PATTERN_TYPES } = unlock( patternPrivateApis ); export default function PatternTitleView( { item }: { item: CommonPost } ) { return ( - + { item.type === PATTERN_TYPES.theme && ( From 46143aa205271d8a71eb9c3aeec856ab0c2bf821 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Mon, 2 Dec 2024 21:59:41 +0200 Subject: [PATCH 04/11] update e2e tests --- test/e2e/specs/site-editor/browser-history.spec.js | 4 +++- .../e2e/specs/site-editor/new-templates-list.spec.js | 12 ++---------- .../specs/site-editor/template-registration.spec.js | 2 +- 3 files changed, 6 insertions(+), 12 deletions(-) diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js index a2326d10e3cc5..b70674a7605ac 100644 --- a/test/e2e/specs/site-editor/browser-history.spec.js +++ b/test/e2e/specs/site-editor/browser-history.spec.js @@ -19,7 +19,9 @@ test.describe( 'Site editor browser history', () => { // Navigate to a single template await page.click( 'role=button[name="Templates"]' ); - await page.getByRole( 'link', { name: 'Index' } ).click(); + await page + .locator( '.fields-title-field', { hasText: 'Index' } ) + .click(); await expect( page ).toHaveURL( '/wp-admin/site-editor.php?p=%2Fwp_template%2Femptytheme%2F%2Findex&canvas=edit' ); diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index 6faa85a2659cf..cca8847a2333c 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -27,13 +27,7 @@ test.describe( 'Templates', () => { page.locator( '[aria-label="Templates"]' ) ).toBeVisible(); - const firstTitle = page - .getByRole( 'region', { - name: 'Template', - includeHidden: true, - } ) - .getByRole( 'link', { includeHidden: true } ) - .first(); + const firstTitle = page.locator( '.fields-title-field' ).first(); // Descending by title. await page.getByRole( 'button', { name: 'View options' } ).click(); @@ -54,9 +48,7 @@ test.describe( 'Templates', () => { await admin.visitSiteEditor( { postType: 'wp_template' } ); // Global search. await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' ); - const titles = page - .getByRole( 'region', { name: 'Template' } ) - .getByRole( 'link', { includeHidden: true } ); + const titles = page.locator( '.fields-title-field' ); await expect( titles ).toHaveCount( 1 ); await expect( titles.first() ).toHaveText( 'Tag Archives' ); await page diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index 90e56645813c3..86f71bcfebb1c 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -319,7 +319,7 @@ test.describe( 'Block template registration', () => { .getByLabel( 'Dismiss this notice' ) .getByText( `"Author: Admin" reset.` ); await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' ); - await page.getByRole( 'link', { name: 'Author: Admin' } ).click(); + await page.getByRole( 'button', { name: 'Author: Admin' } ).click(); const actions = page.getByLabel( 'Actions' ); await actions.first().click(); await page.getByRole( 'menuitem', { name: 'Reset' } ).click(); From 88c82197380c1368f144ef618bcd144f4552456b Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 3 Dec 2024 10:24:09 +0200 Subject: [PATCH 05/11] fix tests --- test/e2e/specs/site-editor/template-registration.spec.js | 4 +++- test/performance/specs/site-editor.spec.js | 6 +++++- 2 files changed, 8 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index 86f71bcfebb1c..91eabb72801bb 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -319,7 +319,9 @@ test.describe( 'Block template registration', () => { .getByLabel( 'Dismiss this notice' ) .getByText( `"Author: Admin" reset.` ); await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' ); - await page.getByRole( 'button', { name: 'Author: Admin' } ).click(); + await page + .locator( '.fields-title-field', { hasText: 'Author: Admin' } ) + .click(); const actions = page.getByLabel( 'Actions' ); await actions.first().click(); await page.getByRole( 'menuitem', { name: 'Reset' } ).click(); diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index e72d83fa8b3aa..7e8393e8c4b3b 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -237,7 +237,11 @@ test.describe( 'Site Editor Performance', () => { } await metrics.startTracing(); - await page.getByText( 'Single Posts', { exact: true } ).click(); + await page + .locator( '.fields-title-field', { + hasText: 'Single Posts', + } ) + .click(); await metrics.stopTracing(); // Get the durations. From 0902cea9225ac9cc60c23afbbec60110607ae4ec Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Tue, 3 Dec 2024 12:49:54 +0200 Subject: [PATCH 06/11] perf tests --- test/e2e/specs/site-editor/template-registration.spec.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index 91eabb72801bb..86f71bcfebb1c 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -319,9 +319,7 @@ test.describe( 'Block template registration', () => { .getByLabel( 'Dismiss this notice' ) .getByText( `"Author: Admin" reset.` ); await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' ); - await page - .locator( '.fields-title-field', { hasText: 'Author: Admin' } ) - .click(); + await page.getByRole( 'button', { name: 'Author: Admin' } ).click(); const actions = page.getByLabel( 'Actions' ); await actions.first().click(); await page.getByRole( 'menuitem', { name: 'Reset' } ).click(); From ac7de7eaafd73b0c5591c2d9de8f921f3d0f977a Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 4 Dec 2024 08:54:45 +0200 Subject: [PATCH 07/11] update tests --- test/e2e/specs/site-editor/template-registration.spec.js | 4 +++- test/performance/specs/site-editor.spec.js | 6 ++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index 86f71bcfebb1c..91eabb72801bb 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -319,7 +319,9 @@ test.describe( 'Block template registration', () => { .getByLabel( 'Dismiss this notice' ) .getByText( `"Author: Admin" reset.` ); await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' ); - await page.getByRole( 'button', { name: 'Author: Admin' } ).click(); + await page + .locator( '.fields-title-field', { hasText: 'Author: Admin' } ) + .click(); const actions = page.getByLabel( 'Actions' ); await actions.first().click(); await page.getByRole( 'menuitem', { name: 'Reset' } ).click(); diff --git a/test/performance/specs/site-editor.spec.js b/test/performance/specs/site-editor.spec.js index 7e8393e8c4b3b..c09cfe3c67b44 100644 --- a/test/performance/specs/site-editor.spec.js +++ b/test/performance/specs/site-editor.spec.js @@ -238,10 +238,8 @@ test.describe( 'Site Editor Performance', () => { await metrics.startTracing(); await page - .locator( '.fields-title-field', { - hasText: 'Single Posts', - } ) - .click(); + .getByText( 'Single Posts', { exact: true } ) + .click( { force: true } ); await metrics.stopTracing(); // Get the durations. From 2bae755d6fd24de6b5014ca6f77b7c0030b6de23 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 4 Dec 2024 14:39:57 +0200 Subject: [PATCH 08/11] update classNames + description docs for title fields --- packages/fields/README.md | 8 ++++---- packages/fields/src/fields/page-title/index.ts | 3 +++ packages/fields/src/fields/page-title/style.scss | 2 +- packages/fields/src/fields/page-title/view.tsx | 4 ++-- packages/fields/src/fields/pattern-title/index.ts | 3 +++ packages/fields/src/fields/pattern-title/style.scss | 2 +- packages/fields/src/fields/pattern-title/view.tsx | 8 ++------ packages/fields/src/fields/template-title/index.ts | 8 ++++++-- packages/fields/src/fields/template-title/view.tsx | 11 +++++++++++ packages/fields/src/fields/title/index.ts | 4 +++- packages/fields/src/fields/title/style.scss | 2 +- packages/fields/src/fields/title/view.tsx | 2 +- test/e2e/specs/site-editor/browser-history.spec.js | 2 +- test/e2e/specs/site-editor/new-templates-list.spec.js | 4 ++-- .../specs/site-editor/template-registration.spec.js | 2 +- 15 files changed, 42 insertions(+), 23 deletions(-) create mode 100644 packages/fields/src/fields/template-title/view.tsx diff --git a/packages/fields/README.md b/packages/fields/README.md index 8b5993b107761..9ca08991aca51 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -69,7 +69,7 @@ Order field for BasePost. ### pageTitleField -Undocumented declaration. +Title for the page entity. ### parentField @@ -81,7 +81,7 @@ Password field for BasePost. ### patternTitleField -Undocumented declaration. +Title for the pattern entity. ### permanentlyDeletePost @@ -121,11 +121,11 @@ Template field for BasePost. ### templateTitleField -Undocumented declaration. +Title for the template entity. ### titleField -Title field for BasePost. +Title for the any entity with a `title` property. For patterns, pages or templates you should use the respective field because there are some differences in the rendering, labels, etc. ### trashPost diff --git a/packages/fields/src/fields/page-title/index.ts b/packages/fields/src/fields/page-title/index.ts index 533eb8f591dc0..8bbf051f2b583 100644 --- a/packages/fields/src/fields/page-title/index.ts +++ b/packages/fields/src/fields/page-title/index.ts @@ -22,4 +22,7 @@ const pageTitleField: Field< BasePost > = { enableGlobalSearch: true, }; +/** + * Title for the page entity. + */ export default pageTitleField; diff --git a/packages/fields/src/fields/page-title/style.scss b/packages/fields/src/fields/page-title/style.scss index 5ccb2ccaf9bf3..e22c2c1b1187e 100644 --- a/packages/fields/src/fields/page-title/style.scss +++ b/packages/fields/src/fields/page-title/style.scss @@ -1,4 +1,4 @@ -.fields-title-field__badge { +.fields-field-page-title__badge { background: $gray-100; color: $gray-800; padding: 0 $grid-unit-05; diff --git a/packages/fields/src/fields/page-title/view.tsx b/packages/fields/src/fields/page-title/view.tsx index ea517feaf0037..383f7976c9ccc 100644 --- a/packages/fields/src/fields/page-title/view.tsx +++ b/packages/fields/src/fields/page-title/view.tsx @@ -25,9 +25,9 @@ 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/fields/pattern-title/index.ts b/packages/fields/src/fields/pattern-title/index.ts index ba8e4e2cab590..a3e54eea6f28d 100644 --- a/packages/fields/src/fields/pattern-title/index.ts +++ b/packages/fields/src/fields/pattern-title/index.ts @@ -22,4 +22,7 @@ const patternTitleField: Field< Pattern > = { enableGlobalSearch: true, }; +/** + * Title for the pattern entity. + */ export default patternTitleField; diff --git a/packages/fields/src/fields/pattern-title/style.scss b/packages/fields/src/fields/pattern-title/style.scss index e5d37160d28ff..5f1e19ca69445 100644 --- a/packages/fields/src/fields/pattern-title/style.scss +++ b/packages/fields/src/fields/pattern-title/style.scss @@ -1,3 +1,3 @@ -.fields-pattern-title-field span:first-child { +.fields-field-pattern-title span:first-child { flex: 1; } diff --git a/packages/fields/src/fields/pattern-title/view.tsx b/packages/fields/src/fields/pattern-title/view.tsx index 4a8f074e8cbe9..6ffd622e02d7e 100644 --- a/packages/fields/src/fields/pattern-title/view.tsx +++ b/packages/fields/src/fields/pattern-title/view.tsx @@ -18,17 +18,13 @@ export const { PATTERN_TYPES } = unlock( patternPrivateApis ); export default function PatternTitleView( { item }: { item: CommonPost } ) { return ( - + { item.type === PATTERN_TYPES.theme && ( - + ) } diff --git a/packages/fields/src/fields/template-title/index.ts b/packages/fields/src/fields/template-title/index.ts index 1854c64b49985..738082b6ebb21 100644 --- a/packages/fields/src/fields/template-title/index.ts +++ b/packages/fields/src/fields/template-title/index.ts @@ -9,16 +9,20 @@ import { __ } from '@wordpress/i18n'; */ import type { Template } from '../../types'; import { getItemTitle } from '../../actions/utils'; -import TitleView from '../title/view'; +import PageTitleView from './view'; const templateTitleField: Field< Template > = { type: 'text', label: __( 'Template' ), + placeholder: __( 'No title' ), id: 'title', getValue: ( { item } ) => getItemTitle( item ), - render: TitleView, + render: PageTitleView, enableHiding: false, enableGlobalSearch: true, }; +/** + * Title for the template entity. + */ export default templateTitleField; diff --git a/packages/fields/src/fields/template-title/view.tsx b/packages/fields/src/fields/template-title/view.tsx new file mode 100644 index 0000000000000..140d4438022f0 --- /dev/null +++ b/packages/fields/src/fields/template-title/view.tsx @@ -0,0 +1,11 @@ +/** + * Internal dependencies + */ +import type { Template } from '../../types'; +import { BaseTitleView } from '../title/view'; + +export default function PageTitleView( { item }: { item: Template } ) { + return ( + + ); +} diff --git a/packages/fields/src/fields/title/index.ts b/packages/fields/src/fields/title/index.ts index cb7e75f99670a..b4a2399526fdd 100644 --- a/packages/fields/src/fields/title/index.ts +++ b/packages/fields/src/fields/title/index.ts @@ -23,6 +23,8 @@ const titleField: Field< CommonPost > = { }; /** - * Title field for BasePost. + * Title for the any entity with a `title` property. + * For patterns, pages or templates you should use the respective field + * because there are some differences in the rendering, labels, etc. */ export default titleField; diff --git a/packages/fields/src/fields/title/style.scss b/packages/fields/src/fields/title/style.scss index 764637b190ff6..a8ac7169b36c8 100644 --- a/packages/fields/src/fields/title/style.scss +++ b/packages/fields/src/fields/title/style.scss @@ -1,4 +1,4 @@ -.fields-title-field span:first-child { +.fields-field-title span:first-child { text-overflow: ellipsis; overflow: hidden; text-decoration: none; diff --git a/packages/fields/src/fields/title/view.tsx b/packages/fields/src/fields/title/view.tsx index 7bb60eda50fa8..0462ccc6a7ec0 100644 --- a/packages/fields/src/fields/title/view.tsx +++ b/packages/fields/src/fields/title/view.tsx @@ -28,7 +28,7 @@ export function BaseTitleView( { const renderedTitle = getItemTitle( item ); return ( diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js index b70674a7605ac..d2ffc256759ea 100644 --- a/test/e2e/specs/site-editor/browser-history.spec.js +++ b/test/e2e/specs/site-editor/browser-history.spec.js @@ -20,7 +20,7 @@ test.describe( 'Site editor browser history', () => { // Navigate to a single template await page.click( 'role=button[name="Templates"]' ); await page - .locator( '.fields-title-field', { hasText: 'Index' } ) + .locator( '.fields-field-title', { hasText: 'Index' } ) .click(); await expect( page ).toHaveURL( '/wp-admin/site-editor.php?p=%2Fwp_template%2Femptytheme%2F%2Findex&canvas=edit' diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index cca8847a2333c..d08684b3f4efe 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -27,7 +27,7 @@ test.describe( 'Templates', () => { page.locator( '[aria-label="Templates"]' ) ).toBeVisible(); - const firstTitle = page.locator( '.fields-title-field' ).first(); + const firstTitle = page.locator( '.fields-field-title' ).first(); // Descending by title. await page.getByRole( 'button', { name: 'View options' } ).click(); @@ -48,7 +48,7 @@ test.describe( 'Templates', () => { await admin.visitSiteEditor( { postType: 'wp_template' } ); // Global search. await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' ); - const titles = page.locator( '.fields-title-field' ); + const titles = page.locator( '.fields-field-title' ); await expect( titles ).toHaveCount( 1 ); await expect( titles.first() ).toHaveText( 'Tag Archives' ); await page diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index 91eabb72801bb..a3a9a0b6813b5 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -320,7 +320,7 @@ test.describe( 'Block template registration', () => { .getByText( `"Author: Admin" reset.` ); await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' ); await page - .locator( '.fields-title-field', { hasText: 'Author: Admin' } ) + .locator( '.fields-field-title', { hasText: 'Author: Admin' } ) .click(); const actions = page.getByLabel( 'Actions' ); await actions.first().click(); From beed46c4a64c9f22188dc678fef07a363f1d9e41 Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 4 Dec 2024 14:45:26 +0200 Subject: [PATCH 09/11] update class names --- packages/fields/src/fields/page-title/style.scss | 2 +- packages/fields/src/fields/page-title/view.tsx | 4 ++-- packages/fields/src/fields/pattern-title/style.scss | 2 +- packages/fields/src/fields/pattern-title/view.tsx | 2 +- packages/fields/src/fields/template-title/view.tsx | 2 +- packages/fields/src/fields/title/style.scss | 2 +- packages/fields/src/fields/title/view.tsx | 2 +- test/e2e/specs/site-editor/browser-history.spec.js | 2 +- test/e2e/specs/site-editor/new-templates-list.spec.js | 4 ++-- test/e2e/specs/site-editor/template-registration.spec.js | 2 +- 10 files changed, 12 insertions(+), 12 deletions(-) diff --git a/packages/fields/src/fields/page-title/style.scss b/packages/fields/src/fields/page-title/style.scss index e22c2c1b1187e..def56aa466a8a 100644 --- a/packages/fields/src/fields/page-title/style.scss +++ b/packages/fields/src/fields/page-title/style.scss @@ -1,4 +1,4 @@ -.fields-field-page-title__badge { +.fields-field__page-title__badge { background: $gray-100; color: $gray-800; padding: 0 $grid-unit-05; diff --git a/packages/fields/src/fields/page-title/view.tsx b/packages/fields/src/fields/page-title/view.tsx index 383f7976c9ccc..0be4c16d5d29a 100644 --- a/packages/fields/src/fields/page-title/view.tsx +++ b/packages/fields/src/fields/page-title/view.tsx @@ -25,9 +25,9 @@ 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/fields/pattern-title/style.scss b/packages/fields/src/fields/pattern-title/style.scss index 5f1e19ca69445..fa4d03c850bea 100644 --- a/packages/fields/src/fields/pattern-title/style.scss +++ b/packages/fields/src/fields/pattern-title/style.scss @@ -1,3 +1,3 @@ -.fields-field-pattern-title span:first-child { +.fields-field__pattern-title span:first-child { flex: 1; } diff --git a/packages/fields/src/fields/pattern-title/view.tsx b/packages/fields/src/fields/pattern-title/view.tsx index 6ffd622e02d7e..b59360d30e0be 100644 --- a/packages/fields/src/fields/pattern-title/view.tsx +++ b/packages/fields/src/fields/pattern-title/view.tsx @@ -18,7 +18,7 @@ export const { PATTERN_TYPES } = unlock( patternPrivateApis ); export default function PatternTitleView( { item }: { item: CommonPost } ) { return ( - + { item.type === PATTERN_TYPES.theme && ( + ); } diff --git a/packages/fields/src/fields/title/style.scss b/packages/fields/src/fields/title/style.scss index a8ac7169b36c8..5b9977dcaa398 100644 --- a/packages/fields/src/fields/title/style.scss +++ b/packages/fields/src/fields/title/style.scss @@ -1,4 +1,4 @@ -.fields-field-title span:first-child { +.fields-field__title span:first-child { text-overflow: ellipsis; overflow: hidden; text-decoration: none; diff --git a/packages/fields/src/fields/title/view.tsx b/packages/fields/src/fields/title/view.tsx index 0462ccc6a7ec0..b6f39796a57f0 100644 --- a/packages/fields/src/fields/title/view.tsx +++ b/packages/fields/src/fields/title/view.tsx @@ -28,7 +28,7 @@ export function BaseTitleView( { const renderedTitle = getItemTitle( item ); return ( diff --git a/test/e2e/specs/site-editor/browser-history.spec.js b/test/e2e/specs/site-editor/browser-history.spec.js index d2ffc256759ea..c3eb2ac5e3a2f 100644 --- a/test/e2e/specs/site-editor/browser-history.spec.js +++ b/test/e2e/specs/site-editor/browser-history.spec.js @@ -20,7 +20,7 @@ test.describe( 'Site editor browser history', () => { // Navigate to a single template await page.click( 'role=button[name="Templates"]' ); await page - .locator( '.fields-field-title', { hasText: 'Index' } ) + .locator( '.fields-field__title', { hasText: 'Index' } ) .click(); await expect( page ).toHaveURL( '/wp-admin/site-editor.php?p=%2Fwp_template%2Femptytheme%2F%2Findex&canvas=edit' diff --git a/test/e2e/specs/site-editor/new-templates-list.spec.js b/test/e2e/specs/site-editor/new-templates-list.spec.js index d08684b3f4efe..d26306a6c8e3b 100644 --- a/test/e2e/specs/site-editor/new-templates-list.spec.js +++ b/test/e2e/specs/site-editor/new-templates-list.spec.js @@ -27,7 +27,7 @@ test.describe( 'Templates', () => { page.locator( '[aria-label="Templates"]' ) ).toBeVisible(); - const firstTitle = page.locator( '.fields-field-title' ).first(); + const firstTitle = page.locator( '.fields-field__title' ).first(); // Descending by title. await page.getByRole( 'button', { name: 'View options' } ).click(); @@ -48,7 +48,7 @@ test.describe( 'Templates', () => { await admin.visitSiteEditor( { postType: 'wp_template' } ); // Global search. await page.getByRole( 'searchbox', { name: 'Search' } ).fill( 'tag' ); - const titles = page.locator( '.fields-field-title' ); + const titles = page.locator( '.fields-field__title' ); await expect( titles ).toHaveCount( 1 ); await expect( titles.first() ).toHaveText( 'Tag Archives' ); await page diff --git a/test/e2e/specs/site-editor/template-registration.spec.js b/test/e2e/specs/site-editor/template-registration.spec.js index a3a9a0b6813b5..ed89c7d18bf3f 100644 --- a/test/e2e/specs/site-editor/template-registration.spec.js +++ b/test/e2e/specs/site-editor/template-registration.spec.js @@ -320,7 +320,7 @@ test.describe( 'Block template registration', () => { .getByText( `"Author: Admin" reset.` ); await page.getByPlaceholder( 'Search' ).fill( 'Author: admin' ); await page - .locator( '.fields-field-title', { hasText: 'Author: Admin' } ) + .locator( '.fields-field__title', { hasText: 'Author: Admin' } ) .click(); const actions = page.getByLabel( 'Actions' ); await actions.first().click(); From b2a53699a15bcf915a1fc924410c01fa60d7b2cf Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Wed, 4 Dec 2024 15:10:21 +0200 Subject: [PATCH 10/11] update actions --- .../src/dataviews/store/private-actions.ts | 46 ++++++++++--------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/packages/editor/src/dataviews/store/private-actions.ts b/packages/editor/src/dataviews/store/private-actions.ts index 3af525997735c..2119b52756e96 100644 --- a/packages/editor/src/dataviews/store/private-actions.ts +++ b/packages/editor/src/dataviews/store/private-actions.ts @@ -31,6 +31,7 @@ import { templateField, templateTitleField, pageTitleField, + patternTitleField, } from '@wordpress/fields'; /** @@ -38,19 +39,6 @@ import { */ import { store as editorStore } from '../../store'; import { unlock } from '../../lock-unlock'; -import { - NAVIGATION_POST_TYPE, - PATTERN_POST_TYPE, - TEMPLATE_PART_POST_TYPE, - TEMPLATE_POST_TYPE, -} from '../../store/constants'; - -const DESIGN_POST_TYPES = [ - PATTERN_POST_TYPE, - TEMPLATE_POST_TYPE, - NAVIGATION_POST_TYPE, - TEMPLATE_PART_POST_TYPE, -]; export function registerEntityAction< Item >( kind: string, @@ -142,7 +130,6 @@ export const registerPostTypeSchema = .resolveSelect( coreStore ) .getCurrentTheme(); - const isDeisgnPostType = DESIGN_POST_TYPES.includes( postType ); const actions = [ postTypeConfig.viewable ? viewPost : undefined, !! postTypeConfig.supports?.revisions @@ -150,19 +137,25 @@ export const registerPostTypeSchema = : undefined, // @ts-ignore globalThis.IS_GUTENBERG_PLUGIN - ? ! isDeisgnPostType && canCreate && duplicatePost + ? ! [ 'wp_template', 'wp_block', 'wp_template_part' ].includes( + postTypeConfig.slug + ) && + canCreate && + duplicatePost : undefined, postTypeConfig.slug === 'wp_template_part' && canCreate && currentTheme?.is_block_theme ? duplicateTemplatePart : undefined, - canCreate && postType === 'wp_block' ? duplicatePattern : undefined, + canCreate && postTypeConfig.slug === 'wp_block' + ? duplicatePattern + : undefined, postTypeConfig.supports?.title ? renamePost : undefined, postTypeConfig.supports?.[ 'page-attributes' ] ? reorderPage : undefined, - postType === 'wp_block' ? exportPattern : undefined, + postTypeConfig.slug === 'wp_block' ? exportPattern : undefined, restorePost, resetPost, deletePost, @@ -174,10 +167,6 @@ export const registerPostTypeSchema = postTypeConfig.supports?.thumbnail && currentTheme?.theme_supports?.[ 'post-thumbnails' ] && featuredImageField, - ! isDeisgnPostType && - postTypeConfig.supports?.title && - ( postType === 'page' ? pageTitleField : titleField ), - postType === TEMPLATE_POST_TYPE && templateTitleField, postTypeConfig.supports?.author && authorField, statusField, dateField, @@ -185,8 +174,21 @@ export const registerPostTypeSchema = postTypeConfig.supports?.[ 'page-attributes' ] && parentField, postTypeConfig.supports?.comments && commentStatusField, templateField, - ! isDeisgnPostType && passwordField, + passwordField, ].filter( Boolean ); + if ( postTypeConfig.supports?.title ) { + let _titleField; + if ( postType === 'page' ) { + _titleField = pageTitleField; + } else if ( postType === 'wp_template' ) { + _titleField = templateTitleField; + } else if ( postType === 'wp_block' ) { + _titleField = patternTitleField; + } else { + _titleField = titleField; + } + fields.push( _titleField ); + } registry.batch( () => { actions.forEach( ( action ) => { From 1fa1eec1b8f8e06adf69b324fe0839cc24a5060e Mon Sep 17 00:00:00 2001 From: ntsekouras Date: Thu, 5 Dec 2024 08:54:33 +0200 Subject: [PATCH 11/11] use TitleView --- packages/fields/src/fields/template-title/index.ts | 4 ++-- packages/fields/src/fields/template-title/view.tsx | 11 ----------- 2 files changed, 2 insertions(+), 13 deletions(-) delete mode 100644 packages/fields/src/fields/template-title/view.tsx diff --git a/packages/fields/src/fields/template-title/index.ts b/packages/fields/src/fields/template-title/index.ts index 738082b6ebb21..e0d83d6ffda8f 100644 --- a/packages/fields/src/fields/template-title/index.ts +++ b/packages/fields/src/fields/template-title/index.ts @@ -9,7 +9,7 @@ import { __ } from '@wordpress/i18n'; */ import type { Template } from '../../types'; import { getItemTitle } from '../../actions/utils'; -import PageTitleView from './view'; +import TitleView from '../title/view'; const templateTitleField: Field< Template > = { type: 'text', @@ -17,7 +17,7 @@ const templateTitleField: Field< Template > = { placeholder: __( 'No title' ), id: 'title', getValue: ( { item } ) => getItemTitle( item ), - render: PageTitleView, + render: TitleView, enableHiding: false, enableGlobalSearch: true, }; diff --git a/packages/fields/src/fields/template-title/view.tsx b/packages/fields/src/fields/template-title/view.tsx deleted file mode 100644 index fea50e9089061..0000000000000 --- a/packages/fields/src/fields/template-title/view.tsx +++ /dev/null @@ -1,11 +0,0 @@ -/** - * Internal dependencies - */ -import type { Template } from '../../types'; -import { BaseTitleView } from '../title/view'; - -export default function PageTitleView( { item }: { item: Template } ) { - return ( - - ); -}