From e07351becf8e1628b0234621bb5009df46d0432f Mon Sep 17 00:00:00 2001 From: Luigi Teschio Date: Tue, 12 Nov 2024 12:52:16 +0100 Subject: [PATCH 01/87] DataViews: Implement `isItemClickable` and `onClickItem` props (#66365) Co-authored-by: gigitux Co-authored-by: oandregal Co-authored-by: louwie17 Co-authored-by: youknowriad Co-authored-by: mcsf Co-authored-by: jameskoster --- packages/dataviews/README.md | 8 ++++ .../src/components/dataviews-context/index.ts | 4 ++ .../src/components/dataviews-layout/index.tsx | 4 ++ .../src/components/dataviews/index.tsx | 11 +++++- .../src/components/dataviews/style.scss | 12 ++++-- .../src/dataviews-layouts/grid/index.tsx | 34 ++++++++++++++--- .../src/dataviews-layouts/grid/style.scss | 5 +++ .../src/dataviews-layouts/table/index.tsx | 37 +++++++++++++++++-- .../utils/get-clickable-item-props.ts | 22 +++++++++++ packages/dataviews/src/types.ts | 2 + .../src/components/post-fields/index.js | 36 ++++-------------- .../src/components/post-list/index.js | 12 ++++-- .../src/components/post-list/style.scss | 32 ++++++++++++++-- packages/edit-site/src/style.scss | 4 +- packages/fields/src/style.scss | 2 + packages/fields/src/styles.scss | 1 - 16 files changed, 175 insertions(+), 51 deletions(-) create mode 100644 packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts create mode 100644 packages/fields/src/style.scss delete mode 100644 packages/fields/src/styles.scss diff --git a/packages/dataviews/README.md b/packages/dataviews/README.md index ff20386862929..621e3c7ba71ce 100644 --- a/packages/dataviews/README.md +++ b/packages/dataviews/README.md @@ -358,6 +358,14 @@ Callback that signals the user selected one of more items. It receives the list If `selection` and `onChangeSelection` are provided, the `DataViews` component behaves as a controlled component, otherwise, it behaves like an uncontrolled component. +### `isItemClickable`: `function` + +A function that determines if a media field or a primary field are clickable. It receives an item as an argument and returns a boolean value indicating whether the item can be clicked. + +### `onClickItem`: `function` + +A callback function that is triggered when a user clicks on a media field or primary field. This function is currently implemented only in the `grid` and `list` views. + #### `header`: React component React component to be rendered next to the view config button. diff --git a/packages/dataviews/src/components/dataviews-context/index.ts b/packages/dataviews/src/components/dataviews-context/index.ts index 3936288b3095b..87acade73bc81 100644 --- a/packages/dataviews/src/components/dataviews-context/index.ts +++ b/packages/dataviews/src/components/dataviews-context/index.ts @@ -26,6 +26,8 @@ type DataViewsContextType< Item > = { openedFilter: string | null; setOpenedFilter: ( openedFilter: string | null ) => void; getItemId: ( item: Item ) => string; + onClickItem: ( item: Item ) => void; + isItemClickable: ( item: Item ) => boolean; density: number; }; @@ -43,6 +45,8 @@ const DataViewsContext = createContext< DataViewsContextType< any > >( { setOpenedFilter: () => {}, openedFilter: null, getItemId: ( item ) => item.id, + onClickItem: () => {}, + isItemClickable: () => false, density: 0, } ); diff --git a/packages/dataviews/src/components/dataviews-layout/index.tsx b/packages/dataviews/src/components/dataviews-layout/index.tsx index bae4071fe2f77..4ef0125b1f64b 100644 --- a/packages/dataviews/src/components/dataviews-layout/index.tsx +++ b/packages/dataviews/src/components/dataviews-layout/index.tsx @@ -28,6 +28,8 @@ export default function DataViewsLayout() { onChangeSelection, setOpenedFilter, density, + onClickItem, + isItemClickable, } = useContext( DataViewsContext ); const ViewComponent = VIEW_LAYOUTS.find( ( v ) => v.type === view.type ) @@ -44,6 +46,8 @@ export default function DataViewsLayout() { onChangeSelection={ onChangeSelection } selection={ selection } setOpenedFilter={ setOpenedFilter } + onClickItem={ onClickItem } + isItemClickable={ isItemClickable } view={ view } density={ density } /> diff --git a/packages/dataviews/src/components/dataviews/index.tsx b/packages/dataviews/src/components/dataviews/index.tsx index da60ab15ecade..77a5cb8740f71 100644 --- a/packages/dataviews/src/components/dataviews/index.tsx +++ b/packages/dataviews/src/components/dataviews/index.tsx @@ -44,12 +44,17 @@ type DataViewsProps< Item > = { defaultLayouts: SupportedLayouts; selection?: string[]; onChangeSelection?: ( items: string[] ) => void; + onClickItem?: ( item: Item ) => void; + isItemClickable?: ( item: Item ) => boolean; header?: ReactNode; } & ( Item extends ItemWithId ? { getItemId?: ( item: Item ) => string } : { getItemId: ( item: Item ) => string } ); const defaultGetItemId = ( item: ItemWithId ) => item.id; +const defaultIsItemClickable = () => false; +const defaultOnClickItem = () => {}; +const EMPTY_ARRAY: any[] = []; export default function DataViews< Item >( { view, @@ -57,7 +62,7 @@ export default function DataViews< Item >( { fields, search = true, searchLabel = undefined, - actions = [], + actions = EMPTY_ARRAY, data, getItemId = defaultGetItemId, isLoading = false, @@ -65,6 +70,8 @@ export default function DataViews< Item >( { defaultLayouts, selection: selectionProperty, onChangeSelection, + onClickItem = defaultOnClickItem, + isItemClickable = defaultIsItemClickable, header, }: DataViewsProps< Item > ) { const [ selectionState, setSelectionState ] = useState< string[] >( [] ); @@ -110,6 +117,8 @@ export default function DataViews< Item >( { openedFilter, setOpenedFilter, getItemId, + isItemClickable, + onClickItem, density, } } > diff --git a/packages/dataviews/src/components/dataviews/style.scss b/packages/dataviews/src/components/dataviews/style.scss index aa8fbcfb009c0..bd75a1ff9e2a1 100644 --- a/packages/dataviews/src/components/dataviews/style.scss +++ b/packages/dataviews/src/components/dataviews/style.scss @@ -19,7 +19,7 @@ position: sticky; left: 0; transition: padding ease-out 0.1s; - @include reduce-motion("transition"); + @include reduce-motion( "transition" ); } .dataviews-view-list__primary-field, @@ -62,6 +62,13 @@ } } +.dataviews-view-list__primary-field--clickable, +.dataviews-view-grid__primary-field--clickable, +.dataviews-view-grid__media--clickable, +.dataviews-view-table__primary-field > .dataviews-view-table__cell-content--clickable { + cursor: pointer; +} + .dataviews-no-results, .dataviews-loading { padding: 0 $grid-unit-60; @@ -70,7 +77,7 @@ align-items: center; justify-content: center; transition: padding ease-out 0.1s; - @include reduce-motion("transition"); + @include reduce-motion( "transition" ); } /* stylelint-disable-next-line scss/at-rule-no-unknown -- '@container' not globally permitted */ @@ -86,4 +93,3 @@ padding-right: $grid-unit-30; } } - diff --git a/packages/dataviews/src/dataviews-layouts/grid/index.tsx b/packages/dataviews/src/dataviews-layouts/grid/index.tsx index 230ffe0dc50b5..91cc87ec7b35b 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/grid/index.tsx @@ -24,11 +24,14 @@ import SingleSelectionCheckbox from '../../components/dataviews-selection-checkb import { useHasAPossibleBulkAction } from '../../components/dataviews-bulk-actions'; import type { Action, NormalizedField, ViewGridProps } from '../../types'; import type { SetSelection } from '../../private-types'; +import getClickableItemProps from '../utils/get-clickable-item-props'; interface GridItemProps< Item > { selection: string[]; onChangeSelection: SetSelection; getItemId: ( item: Item ) => string; + onClickItem: ( item: Item ) => void; + isItemClickable: ( item: Item ) => boolean; item: Item; actions: Action< Item >[]; mediaField?: NormalizedField< Item >; @@ -41,6 +44,8 @@ interface GridItemProps< Item > { function GridItem< Item >( { selection, onChangeSelection, + onClickItem, + isItemClickable, getItemId, item, actions, @@ -59,6 +64,21 @@ function GridItem< Item >( { const renderedPrimaryField = primaryField?.render ? ( ) : null; + + const clickableMediaItemProps = getClickableItemProps( + item, + isItemClickable, + onClickItem, + 'dataviews-view-grid__media' + ); + + const clickablePrimaryItemProps = getClickableItemProps( + item, + isItemClickable, + onClickItem, + 'dataviews-view-grid__primary-field' + ); + return ( ( { } } } > -
- { renderedMediaField } -
+
{ renderedMediaField }
( { justify="space-between" className="dataviews-view-grid__title-actions" > - - { renderedPrimaryField } + +
+ { renderedPrimaryField } +
@@ -170,6 +190,8 @@ export default function ViewGrid< Item >( { getItemId, isLoading, onChangeSelection, + onClickItem, + isItemClickable, selection, view, density, @@ -223,6 +245,8 @@ export default function ViewGrid< Item >( { key={ getItemId( item ) } selection={ selection } onChangeSelection={ onChangeSelection } + onClickItem={ onClickItem } + isItemClickable={ isItemClickable } getItemId={ getItemId } item={ item } actions={ actions } diff --git a/packages/dataviews/src/dataviews-layouts/grid/style.scss b/packages/dataviews/src/dataviews-layouts/grid/style.scss index 6286ed94685a0..55768240a1871 100644 --- a/packages/dataviews/src/dataviews-layouts/grid/style.scss +++ b/packages/dataviews/src/dataviews-layouts/grid/style.scss @@ -17,8 +17,13 @@ .dataviews-view-grid__primary-field { min-height: $grid-unit-40; // Preserve layout when there is no ellipsis button + + &--clickable { + width: fit-content; + } } + &.is-selected { .dataviews-view-grid__fields .dataviews-view-grid__field .dataviews-view-grid__field-value { color: $gray-900; diff --git a/packages/dataviews/src/dataviews-layouts/table/index.tsx b/packages/dataviews/src/dataviews-layouts/table/index.tsx index 4e1607b01489c..8ef41db1c3879 100644 --- a/packages/dataviews/src/dataviews-layouts/table/index.tsx +++ b/packages/dataviews/src/dataviews-layouts/table/index.tsx @@ -35,11 +35,14 @@ import type { import type { SetSelection } from '../../private-types'; import ColumnHeaderMenu from './column-header-menu'; import { getVisibleFieldIds } from '../index'; +import getClickableItemProps from '../utils/get-clickable-item-props'; interface TableColumnFieldProps< Item > { primaryField?: NormalizedField< Item >; field: NormalizedField< Item >; item: Item; + isItemClickable: ( item: Item ) => boolean; + onClickItem: ( item: Item ) => void; } interface TableColumnCombinedProps< Item > { @@ -48,6 +51,8 @@ interface TableColumnCombinedProps< Item > { field: CombinedField; item: Item; view: ViewTableType; + isItemClickable: ( item: Item ) => boolean; + onClickItem: ( item: Item ) => void; } interface TableColumnProps< Item > { @@ -56,6 +61,8 @@ interface TableColumnProps< Item > { item: Item; column: string; view: ViewTableType; + isItemClickable: ( item: Item ) => boolean; + onClickItem: ( item: Item ) => void; } interface TableRowProps< Item > { @@ -69,6 +76,8 @@ interface TableRowProps< Item > { selection: string[]; getItemId: ( item: Item ) => string; onChangeSelection: SetSelection; + isItemClickable: ( item: Item ) => boolean; + onClickItem: ( item: Item ) => void; } function TableColumn< Item >( { @@ -102,15 +111,29 @@ function TableColumnField< Item >( { primaryField, item, field, + isItemClickable, + onClickItem, }: TableColumnFieldProps< Item > ) { + const isPrimaryField = primaryField?.id === field.id; + const isItemClickableField = ( i: Item ) => + isItemClickable( i ) && isPrimaryField; + + const clickableProps = getClickableItemProps( + item, + isItemClickableField, + onClickItem, + 'dataviews-view-table__cell-content' + ); + return (
- +
+ +
); } @@ -139,6 +162,8 @@ function TableRow< Item >( { primaryField, selection, getItemId, + isItemClickable, + onClickItem, onChangeSelection, }: TableRowProps< Item > ) { const hasPossibleBulkAction = useHasAPossibleBulkAction( actions, item ); @@ -214,6 +239,8 @@ function TableRow< Item >( { ( { onChangeSelection, selection, setOpenedFilter, + onClickItem, + isItemClickable, view, }: ViewTableProps< Item > ) { const headerMenuRefs = useRef< @@ -392,6 +421,8 @@ function ViewTable< Item >( { selection={ selection } getItemId={ getItemId } onChangeSelection={ onChangeSelection } + onClickItem={ onClickItem } + isItemClickable={ isItemClickable } /> ) ) } diff --git a/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts new file mode 100644 index 0000000000000..e2a6081a68fa3 --- /dev/null +++ b/packages/dataviews/src/dataviews-layouts/utils/get-clickable-item-props.ts @@ -0,0 +1,22 @@ +export default function getClickableItemProps< Item >( + item: Item, + isItemClickable: ( item: Item ) => boolean, + onClickItem: ( item: Item ) => void, + className: string +) { + if ( ! isItemClickable( item ) ) { + return { className }; + } + + return { + className: `${ className } ${ className }--clickable`, + role: 'button', + tabIndex: 0, + onClick: () => onClickItem( item ), + onKeyDown: ( event: React.KeyboardEvent ) => { + if ( event.key === 'Enter' || event.key === '' ) { + onClickItem( item ); + } + }, + }; +} diff --git a/packages/dataviews/src/types.ts b/packages/dataviews/src/types.ts index 0ea0965704d18..71990f72d4eec 100644 --- a/packages/dataviews/src/types.ts +++ b/packages/dataviews/src/types.ts @@ -498,6 +498,8 @@ export interface ViewBaseProps< Item > { onChangeSelection: SetSelection; selection: string[]; setOpenedFilter: ( fieldId: string ) => void; + onClickItem: ( item: Item ) => void; + isItemClickable: ( item: Item ) => boolean; view: View; density: number; } diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index e659a4f96f23f..54f47052b144c 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -36,12 +36,7 @@ import { useEntityRecords, store as coreStore } from '@wordpress/core-data'; /** * Internal dependencies */ -import { - LAYOUT_GRID, - LAYOUT_TABLE, - OPERATOR_IS_ANY, -} from '../../utils/constants'; -import { default as Link } from '../routes/link'; +import { OPERATOR_IS_ANY } from '../../utils/constants'; // See https://github.com/WordPress/gutenberg/issues/55886 // We do not support custom statutes at the moment. @@ -139,7 +134,7 @@ function PostAuthorField( { item } ) { ); } -function usePostFields( viewType ) { +function usePostFields() { const { records: authors, isResolving: isLoadingAuthors } = useEntityRecords( 'root', 'user', { per_page: -1 } ); @@ -164,30 +159,10 @@ function usePostFields( viewType ) { ? item.title : item.title?.raw, render: ( { item } ) => { - const addLink = - [ LAYOUT_TABLE, LAYOUT_GRID ].includes( viewType ) && - item.status !== 'trash'; const renderedTitle = typeof item.title === 'string' ? item.title : item.title?.rendered; - const title = addLink ? ( - - { decodeEntities( renderedTitle ) || - __( '(no title)' ) } - - ) : ( - - { decodeEntities( renderedTitle ) || - __( '(no title)' ) } - - ); let suffix = ''; if ( item.id === frontPageId ) { @@ -210,7 +185,10 @@ function usePostFields( viewType ) { alignment="center" justify="flex-start" > - { title } + + { decodeEntities( renderedTitle ) || + __( '(no title)' ) } + { suffix } ); @@ -355,7 +333,7 @@ function usePostFields( viewType ) { }, passwordField, ], - [ authors, viewType, frontPageId, postsPageId ] + [ authors, frontPageId, postsPageId ] ); return { diff --git a/packages/edit-site/src/components/post-list/index.js b/packages/edit-site/src/components/post-list/index.js index 4985af3050bd8..4639cb3c950b7 100644 --- a/packages/edit-site/src/components/post-list/index.js +++ b/packages/edit-site/src/components/post-list/index.js @@ -208,9 +208,7 @@ export default function PostList( { postType } ) { return found?.filters ?? []; }; - const { isLoading: isLoadingFields, fields: _fields } = usePostFields( - view.type - ); + const { isLoading: isLoadingFields, fields: _fields } = usePostFields(); const fields = useMemo( () => { const activeViewFilters = getActiveViewFilters( defaultViews, @@ -402,6 +400,14 @@ export default function PostList( { postType } ) { onChangeView={ setView } selection={ selection } onChangeSelection={ onChangeSelection } + isItemClickable={ ( item ) => item.status !== 'trash' } + onClickItem={ ( { id } ) => { + history.push( { + postId: id, + postType, + canvas: 'edit', + } ); + } } getItemId={ getItemId } defaultLayouts={ defaultLayouts } header={ diff --git a/packages/edit-site/src/components/post-list/style.scss b/packages/edit-site/src/components/post-list/style.scss index db6a32408c792..14bb11b41d445 100644 --- a/packages/edit-site/src/components/post-list/style.scss +++ b/packages/edit-site/src/components/post-list/style.scss @@ -9,7 +9,9 @@ width: 100%; border-radius: $grid-unit-05; - &.is-layout-table:not(:has(.edit-site-post-list__featured-image-button)), + &.is-layout-table:not( + :has(.edit-site-post-list__featured-image-button) +), &.is-layout-table .edit-site-post-list__featured-image-button { width: $grid-unit-40; height: $grid-unit-40; @@ -46,7 +48,9 @@ border-radius: $grid-unit-05; &:focus-visible { - box-shadow: 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: + 0 0 0 var(--wp-admin-border-width-focus) + var(--wp-admin-theme-color); // Windows High Contrast mode will show this outline, but not the box-shadow. outline: 2px solid transparent; } @@ -54,7 +58,9 @@ .dataviews-view-grid__card.is-selected { .edit-site-post-list__featured-image-button::after { - box-shadow: inset 0 0 0 var(--wp-admin-border-width-focus) var(--wp-admin-theme-color); + box-shadow: + inset 0 0 0 var(--wp-admin-border-width-focus) + var(--wp-admin-theme-color); background: rgba(var(--wp-admin-theme-color--rgb), 0.04); } } @@ -64,6 +70,26 @@ 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; diff --git a/packages/edit-site/src/style.scss b/packages/edit-site/src/style.scss index 03ec43648f120..0e5744fe362e3 100644 --- a/packages/edit-site/src/style.scss +++ b/packages/edit-site/src/style.scss @@ -1,7 +1,5 @@ @import "../../dataviews/src/style.scss"; -@import "../../fields/src/styles.scss"; -@import "../../fields/src/fields/featured-image/style.scss"; - +@import "../../fields/src/style.scss"; @import "./components/add-new-template/style.scss"; @import "./components/block-editor/style.scss"; @import "./components/canvas-loader/style.scss"; diff --git a/packages/fields/src/style.scss b/packages/fields/src/style.scss new file mode 100644 index 0000000000000..1639f455ba093 --- /dev/null +++ b/packages/fields/src/style.scss @@ -0,0 +1,2 @@ +@import "./fields/slug/style.scss"; +@import "./fields/featured-image/style.scss"; diff --git a/packages/fields/src/styles.scss b/packages/fields/src/styles.scss deleted file mode 100644 index cdb130337f1cd..0000000000000 --- a/packages/fields/src/styles.scss +++ /dev/null @@ -1 +0,0 @@ -@import "./fields/slug/style.scss"; From f3e8f4a5c11a8bf2f7b4e8e2ff3c7963c23194f3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Tue, 12 Nov 2024 13:17:30 +0100 Subject: [PATCH 02/87] Site Editor: Avoid using edited post selectors in welcome guide (#66926) Co-authored-by: youknowriad Co-authored-by: ntsekouras --- packages/edit-site/src/components/editor/index.js | 8 +++++++- packages/edit-site/src/components/welcome-guide/index.js | 6 +++--- packages/edit-site/src/components/welcome-guide/page.js | 8 +------- .../edit-site/src/components/welcome-guide/template.js | 9 +-------- 4 files changed, 12 insertions(+), 19 deletions(-) diff --git a/packages/edit-site/src/components/editor/index.js b/packages/edit-site/src/components/editor/index.js index 8f0ca0c5b2971..94b56a197e1bc 100644 --- a/packages/edit-site/src/components/editor/index.js +++ b/packages/edit-site/src/components/editor/index.js @@ -218,7 +218,13 @@ export default function EditSiteEditor( { isPostsList = false } ) { { isEditMode && } { ! isReady ? : null } - { isEditMode && } + { isEditMode && ( + + ) } { isReady && ( - - + { postType === 'page' && } + { postType === 'wp_template' && } ); } diff --git a/packages/edit-site/src/components/welcome-guide/page.js b/packages/edit-site/src/components/welcome-guide/page.js index db89d9b653ad5..41bb80342280c 100644 --- a/packages/edit-site/src/components/welcome-guide/page.js +++ b/packages/edit-site/src/components/welcome-guide/page.js @@ -6,11 +6,6 @@ import { Guide } from '@wordpress/components'; import { __ } from '@wordpress/i18n'; import { store as preferencesStore } from '@wordpress/preferences'; -/** - * Internal dependencies - */ -import { store as editSiteStore } from '../../store'; - export default function WelcomeGuidePage() { const { toggle } = useDispatch( preferencesStore ); @@ -23,8 +18,7 @@ export default function WelcomeGuidePage() { 'core/edit-site', 'welcomeGuide' ); - const { isPage } = select( editSiteStore ); - return isPageActive && ! isEditorActive && isPage(); + return isPageActive && ! isEditorActive; }, [] ); if ( ! isVisible ) { diff --git a/packages/edit-site/src/components/welcome-guide/template.js b/packages/edit-site/src/components/welcome-guide/template.js index e6568a23bb3a3..bf08bc7fa668b 100644 --- a/packages/edit-site/src/components/welcome-guide/template.js +++ b/packages/edit-site/src/components/welcome-guide/template.js @@ -7,16 +7,9 @@ import { __ } from '@wordpress/i18n'; import { store as preferencesStore } from '@wordpress/preferences'; import { store as editorStore } from '@wordpress/editor'; -/** - * Internal dependencies - */ -import useEditedEntityRecord from '../use-edited-entity-record'; - export default function WelcomeGuideTemplate() { const { toggle } = useDispatch( preferencesStore ); - const { isLoaded, record } = useEditedEntityRecord(); - const isPostTypeTemplate = isLoaded && record.type === 'wp_template'; const { isActive, hasPreviousEntity } = useSelect( ( select ) => { const { getEditorSettings } = select( editorStore ); const { get } = select( preferencesStore ); @@ -26,7 +19,7 @@ export default function WelcomeGuideTemplate() { !! getEditorSettings().onNavigateToPreviousEntityRecord, }; }, [] ); - const isVisible = isActive && isPostTypeTemplate && hasPreviousEntity; + const isVisible = isActive && hasPreviousEntity; if ( ! isVisible ) { return null; From 99fd9c71f6fe422b5d43bb65b3b3b36fa28fb507 Mon Sep 17 00:00:00 2001 From: Ankit Kumar Shah Date: Tue, 12 Nov 2024 19:02:14 +0530 Subject: [PATCH 03/87] Media & Text: Set `.wp-block-media-text__media a` display to block (#66915) Ajusted the display property from `inline-block` to `block` to resolve layout issues in the Media & Text block anchor link. Co-authored-by: Infinite-Null Co-authored-by: carolinan Co-authored-by: Mamaduka Co-authored-by: ajmaurya99 --- packages/block-library/src/media-text/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/media-text/style.scss b/packages/block-library/src/media-text/style.scss index 0f7a34f05548c..727380a3759c6 100644 --- a/packages/block-library/src/media-text/style.scss +++ b/packages/block-library/src/media-text/style.scss @@ -69,7 +69,7 @@ } .wp-block-media-text__media a { - display: inline-block; + display: block; } .wp-block-media-text__media img, From d2bc9ea5ef15c5aa56f4db2a1dca6718ce679693 Mon Sep 17 00:00:00 2001 From: David Arenas Date: Tue, 12 Nov 2024 15:12:09 +0100 Subject: [PATCH 04/87] Interactivity API: fix property modification from inherited context two or more levels above (#66872) * Add failing test * Fix code * Add changelog entry * Define "modal" prop in submenu context Co-authored-by: DAreRodz Co-authored-by: sirreal Co-authored-by: michalczaplinski Co-authored-by: danielpost --- .../block-library/src/navigation/index.php | 2 +- packages/interactivity/CHANGELOG.md | 4 ++++ packages/interactivity/src/proxies/context.ts | 3 +++ .../src/proxies/test/context-proxy.ts | 18 ++++++++++++++++++ 4 files changed, 26 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index fa9bb5a56f801..9484ad13ed002 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -813,7 +813,7 @@ function block_core_navigation_add_directives_to_submenu( $tags, $block_attribut ) ) { // Add directives to the parent `
  • `. $tags->set_attribute( 'data-wp-interactive', 'core/navigation' ); - $tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu" }' ); + $tags->set_attribute( 'data-wp-context', '{ "submenuOpenedBy": { "click": false, "hover": false, "focus": false }, "type": "submenu", "modal": null }' ); $tags->set_attribute( 'data-wp-watch', 'callbacks.initMenu' ); $tags->set_attribute( 'data-wp-on--focusout', 'actions.handleMenuFocusout' ); $tags->set_attribute( 'data-wp-on--keydown', 'actions.handleMenuKeydown' ); diff --git a/packages/interactivity/CHANGELOG.md b/packages/interactivity/CHANGELOG.md index 488fcc77d7541..6963ed57a48ae 100644 --- a/packages/interactivity/CHANGELOG.md +++ b/packages/interactivity/CHANGELOG.md @@ -2,6 +2,10 @@ ## Unreleased +### Bug Fixes + +- Fix property modification from inherited context two or more levels above ([#66872](https://github.com/WordPress/gutenberg/pull/66872)). + ## 6.11.0 (2024-10-30) ### Bug Fixes diff --git a/packages/interactivity/src/proxies/context.ts b/packages/interactivity/src/proxies/context.ts index 64517c91a6940..8d5bc54a8b831 100644 --- a/packages/interactivity/src/proxies/context.ts +++ b/packages/interactivity/src/proxies/context.ts @@ -38,6 +38,9 @@ const contextHandlers: ProxyHandler< object > = { getOwnPropertyDescriptor: ( target, key ) => descriptor( target, key ) || descriptor( contextObjectToFallback.get( target ), key ), + has: ( target, key ) => + Reflect.has( target, key ) || + Reflect.has( contextObjectToFallback.get( target ), key ), }; /** diff --git a/packages/interactivity/src/proxies/test/context-proxy.ts b/packages/interactivity/src/proxies/test/context-proxy.ts index 1e4a969d0f9dc..6ae041d34dbc0 100644 --- a/packages/interactivity/src/proxies/test/context-proxy.ts +++ b/packages/interactivity/src/proxies/test/context-proxy.ts @@ -137,6 +137,24 @@ describe( 'Interactivity API', () => { expect( context.a ).toBe( 2 ); expect( state.a ).toBe( 2 ); } ); + + it( "should modify props inherited from fallback's ancestors", () => { + const ancestor: any = proxifyContext( + { ancestorProp: 'ancestor' }, + {} + ); + const fallback: any = proxifyContext( + { fallbackProp: 'fallback' }, + ancestor + ); + const context: any = proxifyContext( {}, fallback ); + + context.ancestorProp = 'modified'; + + expect( context.ancestorProp ).toBe( 'modified' ); + expect( fallback.ancestorProp ).toBe( 'modified' ); + expect( ancestor.ancestorProp ).toBe( 'modified' ); + } ); } ); describe( 'computations', () => { From af6d302df00db44d3c5526972128d3ae65470bed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Nov 2024 18:12:11 +0100 Subject: [PATCH 05/87] Post fields: move `status` from `edit-site` to `fields` package (#66937) Co-authored-by: oandregal Co-authored-by: youknowriad --- .../src/components/post-fields/index.js | 81 +------------------ packages/fields/README.md | 4 + packages/fields/src/fields/index.ts | 1 + packages/fields/src/fields/status/index.tsx | 32 ++++++++ .../src/fields/status/status-elements.tsx | 50 ++++++++++++ .../fields/src/fields/status/status-view.tsx | 28 +++++++ 6 files changed, 118 insertions(+), 78 deletions(-) create mode 100644 packages/fields/src/fields/status/index.tsx create mode 100644 packages/fields/src/fields/status/status-elements.tsx create mode 100644 packages/fields/src/fields/status/status-view.tsx diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 54f47052b144c..3471499c8f21c 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -13,6 +13,7 @@ import { slugField, parentField, passwordField, + statusField, } from '@wordpress/fields'; import { createInterpolateElement, @@ -20,82 +21,17 @@ import { useState, } from '@wordpress/element'; import { dateI18n, getDate, getSettings } from '@wordpress/date'; -import { - trash, - drafts, - published, - scheduled, - pending, - notAllowed, - commentAuthorAvatar as authorIcon, -} from '@wordpress/icons'; +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'; -/** - * Internal dependencies - */ -import { OPERATOR_IS_ANY } from '../../utils/constants'; - -// See https://github.com/WordPress/gutenberg/issues/55886 -// We do not support custom statutes at the moment. -const STATUSES = [ - { - value: 'draft', - label: __( 'Draft' ), - icon: drafts, - description: __( 'Not ready to publish.' ), - }, - { - value: 'future', - label: __( 'Scheduled' ), - icon: scheduled, - description: __( 'Publish automatically on a chosen date.' ), - }, - { - value: 'pending', - label: __( 'Pending Review' ), - icon: pending, - description: __( 'Waiting for review before publishing.' ), - }, - { - value: 'private', - label: __( 'Private' ), - icon: notAllowed, - description: __( 'Only visible to site admins and editors.' ), - }, - { - value: 'publish', - label: __( 'Published' ), - icon: published, - description: __( 'Visible to everyone.' ), - }, - { value: 'trash', label: __( 'Trash' ), icon: trash }, -]; - const getFormattedDate = ( dateToDisplay ) => dateI18n( getSettings().formats.datetimeAbbreviated, getDate( dateToDisplay ) ); -function PostStatusField( { item } ) { - const status = STATUSES.find( ( { value } ) => value === item.status ); - const label = status?.label || item.status; - const icon = status?.icon; - return ( - - { icon && ( -
    - -
    - ) } - { label } -     - ); -} - function PostAuthorField( { item } ) { const { text, imageUrl } = useSelect( ( select ) => { @@ -214,18 +150,7 @@ function usePostFields() { : nameB.localeCompare( nameA ); }, }, - { - label: __( 'Status' ), - id: 'status', - type: 'text', - elements: STATUSES, - render: PostStatusField, - Edit: 'radio', - enableSorting: false, - filterBy: { - operators: [ OPERATOR_IS_ANY ], - }, - }, + statusField, { label: __( 'Date' ), id: 'date', diff --git a/packages/fields/README.md b/packages/fields/README.md index 214f3d6ee3a50..1571dd72e6a79 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -82,6 +82,10 @@ Undocumented declaration. Undocumented declaration. +### statusField + +Status field for BasePost. + ### titleField Undocumented declaration. diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts index 29cbdeb2a4ba6..9a4799f13a0d1 100644 --- a/packages/fields/src/fields/index.ts +++ b/packages/fields/src/fields/index.ts @@ -4,3 +4,4 @@ export { default as orderField } from './order'; export { default as featuredImageField } from './featured-image'; export { default as parentField } from './parent'; export { default as passwordField } from './password'; +export { default as statusField } from './status'; diff --git a/packages/fields/src/fields/status/index.tsx b/packages/fields/src/fields/status/index.tsx new file mode 100644 index 0000000000000..374277bc7260e --- /dev/null +++ b/packages/fields/src/fields/status/index.tsx @@ -0,0 +1,32 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; +import StatusView from './status-view'; +import STATUSES from './status-elements'; + +const OPERATOR_IS_ANY = 'isAny'; + +const statusField: Field< BasePost > = { + label: __( 'Status' ), + id: 'status', + type: 'text', + elements: STATUSES, + render: StatusView, + Edit: 'radio', + enableSorting: false, + filterBy: { + operators: [ OPERATOR_IS_ANY ], + }, +}; + +/** + * Status field for BasePost. + */ +export default statusField; diff --git a/packages/fields/src/fields/status/status-elements.tsx b/packages/fields/src/fields/status/status-elements.tsx new file mode 100644 index 0000000000000..079612270e637 --- /dev/null +++ b/packages/fields/src/fields/status/status-elements.tsx @@ -0,0 +1,50 @@ +/** + * WordPress dependencies + */ +import { + trash, + drafts, + published, + scheduled, + pending, + notAllowed, +} from '@wordpress/icons'; +import { __ } from '@wordpress/i18n'; + +// See https://github.com/WordPress/gutenberg/issues/55886 +// We do not support custom statutes at the moment. +const STATUSES = [ + { + value: 'draft', + label: __( 'Draft' ), + icon: drafts, + description: __( 'Not ready to publish.' ), + }, + { + value: 'future', + label: __( 'Scheduled' ), + icon: scheduled, + description: __( 'Publish automatically on a chosen date.' ), + }, + { + value: 'pending', + label: __( 'Pending Review' ), + icon: pending, + description: __( 'Waiting for review before publishing.' ), + }, + { + value: 'private', + label: __( 'Private' ), + icon: notAllowed, + description: __( 'Only visible to site admins and editors.' ), + }, + { + value: 'publish', + label: __( 'Published' ), + icon: published, + description: __( 'Visible to everyone.' ), + }, + { value: 'trash', label: __( 'Trash' ), icon: trash }, +]; + +export default STATUSES; diff --git a/packages/fields/src/fields/status/status-view.tsx b/packages/fields/src/fields/status/status-view.tsx new file mode 100644 index 0000000000000..4f3c0547431ac --- /dev/null +++ b/packages/fields/src/fields/status/status-view.tsx @@ -0,0 +1,28 @@ +/** + * WordPress dependencies + */ +import { __experimentalHStack as HStack, Icon } from '@wordpress/components'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; +import STATUSES from './status-elements'; + +function StatusView( { item }: { item: BasePost } ) { + const status = STATUSES.find( ( { value } ) => value === item.status ); + const label = status?.label || item.status; + const icon = status?.icon; + return ( + + { icon && ( +
    + +
    + ) } + { label } +     + ); +} + +export default StatusView; From 7a6f7a8d62b17c63e9faff14576b65a3afa4d162 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Nov 2024 18:47:02 +0100 Subject: [PATCH 06/87] Post fields: clean up (#66941) --- .../featured-image/featured-image-edit.tsx | 3 ++- .../featured-image/featured-image-view.tsx | 2 +- .../fields/src/fields/featured-image/index.ts | 3 +-- packages/fields/src/fields/order/index.ts | 3 ++- packages/fields/src/fields/parent/index.ts | 3 +-- .../fields/src/fields/parent/parent-edit.tsx | 18 +++++++++--------- .../fields/src/fields/parent/parent-view.tsx | 4 ++-- packages/fields/src/fields/password/index.tsx | 1 - packages/fields/src/fields/slug/index.ts | 3 +-- 9 files changed, 19 insertions(+), 21 deletions(-) diff --git a/packages/fields/src/fields/featured-image/featured-image-edit.tsx b/packages/fields/src/fields/featured-image/featured-image-edit.tsx index b0dc612cdcfa5..ee51e5c60f13e 100644 --- a/packages/fields/src/fields/featured-image/featured-image-edit.tsx +++ b/packages/fields/src/fields/featured-image/featured-image-edit.tsx @@ -9,11 +9,12 @@ import { MediaUpload } from '@wordpress/media-utils'; import { lineSolid } from '@wordpress/icons'; import { store as coreStore } from '@wordpress/core-data'; import type { DataFormControlProps } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + /** * Internal dependencies */ import type { BasePost } from '../../types'; -import { __ } from '@wordpress/i18n'; export const FeaturedImageEdit = ( { data, diff --git a/packages/fields/src/fields/featured-image/featured-image-view.tsx b/packages/fields/src/fields/featured-image/featured-image-view.tsx index 36793e6f2ff9a..1f4b55183f238 100644 --- a/packages/fields/src/fields/featured-image/featured-image-view.tsx +++ b/packages/fields/src/fields/featured-image/featured-image-view.tsx @@ -3,12 +3,12 @@ */ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; +import type { DataViewRenderFieldProps } from '@wordpress/dataviews'; /** * Internal dependencies */ import type { BasePost } from '../../types'; -import type { DataViewRenderFieldProps } from '@wordpress/dataviews'; export const FeaturedImageView = ( { item, diff --git a/packages/fields/src/fields/featured-image/index.ts b/packages/fields/src/fields/featured-image/index.ts index 44f9a1b406464..62d7e8240aded 100644 --- a/packages/fields/src/fields/featured-image/index.ts +++ b/packages/fields/src/fields/featured-image/index.ts @@ -2,12 +2,12 @@ * WordPress dependencies */ import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import type { BasePost } from '../../types'; -import { __ } from '@wordpress/i18n'; import { FeaturedImageEdit } from './featured-image-edit'; import { FeaturedImageView } from './featured-image-view'; @@ -15,7 +15,6 @@ const featuredImageField: Field< BasePost > = { id: 'featured_media', type: 'text', label: __( 'Featured Image' ), - getValue: ( { item } ) => item.featured_media, Edit: FeaturedImageEdit, render: FeaturedImageView, enableSorting: false, diff --git a/packages/fields/src/fields/order/index.ts b/packages/fields/src/fields/order/index.ts index 2fc0a216dcfa0..984a94c6427fc 100644 --- a/packages/fields/src/fields/order/index.ts +++ b/packages/fields/src/fields/order/index.ts @@ -3,14 +3,15 @@ */ import type { Field } from '@wordpress/dataviews'; import { __ } from '@wordpress/i18n'; + /** * Internal dependencies */ import type { BasePost } from '../../types'; const orderField: Field< BasePost > = { - type: 'integer', id: 'menu_order', + type: 'integer', label: __( 'Order' ), description: __( 'Determines the order of pages.' ), }; diff --git a/packages/fields/src/fields/parent/index.ts b/packages/fields/src/fields/parent/index.ts index 2476d071b8165..8b833e1d9369d 100644 --- a/packages/fields/src/fields/parent/index.ts +++ b/packages/fields/src/fields/parent/index.ts @@ -2,12 +2,12 @@ * WordPress dependencies */ import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import type { BasePost } from '../../types'; -import { __ } from '@wordpress/i18n'; import { ParentEdit } from './parent-edit'; import { ParentView } from './parent-view'; @@ -15,7 +15,6 @@ const parentField: Field< BasePost > = { id: 'parent', type: 'text', label: __( 'Parent' ), - getValue: ( { item } ) => item.parent, Edit: ParentEdit, render: ParentView, enableSorting: true, diff --git a/packages/fields/src/fields/parent/parent-edit.tsx b/packages/fields/src/fields/parent/parent-edit.tsx index 030287b8f8fc5..21cdbee7a365a 100644 --- a/packages/fields/src/fields/parent/parent-edit.tsx +++ b/packages/fields/src/fields/parent/parent-edit.tsx @@ -1,3 +1,8 @@ +/** + * External dependencies + */ +import removeAccents from 'remove-accents'; + /** * WordPress dependencies */ @@ -12,21 +17,16 @@ import { // @ts-ignore import { store as coreStore } from '@wordpress/core-data'; import type { DataFormControlProps } from '@wordpress/dataviews'; - -/** - * External dependencies - */ -import removeAccents from 'remove-accents'; +import { debounce } from '@wordpress/compose'; +import { decodeEntities } from '@wordpress/html-entities'; +import { __, sprintf } from '@wordpress/i18n'; +import { filterURLForDisplay } from '@wordpress/url'; /** * Internal dependencies */ -import { debounce } from '@wordpress/compose'; -import { decodeEntities } from '@wordpress/html-entities'; -import { __, sprintf } from '@wordpress/i18n'; import type { BasePost } from '../../types'; import { getTitleWithFallbackName } from './utils'; -import { filterURLForDisplay } from '@wordpress/url'; type TreeBase = { id: number; diff --git a/packages/fields/src/fields/parent/parent-view.tsx b/packages/fields/src/fields/parent/parent-view.tsx index f0d449db726c3..20c6cb939b4b9 100644 --- a/packages/fields/src/fields/parent/parent-view.tsx +++ b/packages/fields/src/fields/parent/parent-view.tsx @@ -3,14 +3,14 @@ */ import { useSelect } from '@wordpress/data'; import { store as coreStore } from '@wordpress/core-data'; +import type { DataViewRenderFieldProps } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import type { BasePost } from '../../types'; -import type { DataViewRenderFieldProps } from '@wordpress/dataviews'; import { getTitleWithFallbackName } from './utils'; -import { __ } from '@wordpress/i18n'; export const ParentView = ( { item, diff --git a/packages/fields/src/fields/password/index.tsx b/packages/fields/src/fields/password/index.tsx index aa7bc57e3f7ca..dacd0d7435998 100644 --- a/packages/fields/src/fields/password/index.tsx +++ b/packages/fields/src/fields/password/index.tsx @@ -12,7 +12,6 @@ import PasswordEdit from './edit'; const passwordField: Field< BasePost > = { id: 'password', type: 'text', - getValue: ( { item } ) => item.password, Edit: PasswordEdit, enableSorting: false, enableHiding: false, diff --git a/packages/fields/src/fields/slug/index.ts b/packages/fields/src/fields/slug/index.ts index 4e81996ceaa6e..c43fcc679622a 100644 --- a/packages/fields/src/fields/slug/index.ts +++ b/packages/fields/src/fields/slug/index.ts @@ -2,12 +2,12 @@ * WordPress dependencies */ import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; /** * Internal dependencies */ import type { BasePost } from '../../types'; -import { __ } from '@wordpress/i18n'; import SlugEdit from './slug-edit'; import SlugView from './slug-view'; @@ -15,7 +15,6 @@ const slugField: Field< BasePost > = { id: 'slug', type: 'text', label: __( 'Slug' ), - getValue: ( { item } ) => item.slug, Edit: SlugEdit, render: SlugView, }; From a315a904894faf5ca86110f033238510eab19752 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com> Date: Tue, 12 Nov 2024 18:59:09 +0100 Subject: [PATCH 07/87] Post fields: move `comment_status` from `edit-site` to `fields` package (#66934) Co-authored-by: oandregal Co-authored-by: youknowriad --- .../src/components/post-fields/index.js | 28 +------------ packages/fields/README.md | 4 ++ .../src/fields/comment-status/index.tsx | 40 +++++++++++++++++++ packages/fields/src/fields/index.ts | 1 + 4 files changed, 47 insertions(+), 26 deletions(-) create mode 100644 packages/fields/src/fields/comment-status/index.tsx diff --git a/packages/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 3471499c8f21c..083d971d102eb 100644 --- a/packages/edit-site/src/components/post-fields/index.js +++ b/packages/edit-site/src/components/post-fields/index.js @@ -14,6 +14,7 @@ import { parentField, passwordField, statusField, + commentStatusField, } from '@wordpress/fields'; import { createInterpolateElement, @@ -230,32 +231,7 @@ function usePostFields() { }, slugField, parentField, - { - id: 'comment_status', - label: __( 'Discussion' ), - type: 'text', - Edit: 'radio', - enableSorting: false, - filterBy: { - operators: [], - }, - elements: [ - { - value: 'open', - label: __( 'Open' ), - description: __( - 'Visitors can add new comments and replies.' - ), - }, - { - value: 'closed', - label: __( 'Closed' ), - description: __( - 'Visitors cannot add new comments or replies. Existing comments remain visible.' - ), - }, - ], - }, + commentStatusField, passwordField, ], [ authors, frontPageId, postsPageId ] diff --git a/packages/fields/README.md b/packages/fields/README.md index 1571dd72e6a79..1d673c4d46c7b 100644 --- a/packages/fields/README.md +++ b/packages/fields/README.md @@ -14,6 +14,10 @@ npm install @wordpress/fields --save +### commentStatusField + +Comment status field for BasePost. + ### deletePost Undocumented declaration. diff --git a/packages/fields/src/fields/comment-status/index.tsx b/packages/fields/src/fields/comment-status/index.tsx new file mode 100644 index 0000000000000..7f373bc14e210 --- /dev/null +++ b/packages/fields/src/fields/comment-status/index.tsx @@ -0,0 +1,40 @@ +/** + * WordPress dependencies + */ +import type { Field } from '@wordpress/dataviews'; +import { __ } from '@wordpress/i18n'; + +/** + * Internal dependencies + */ +import type { BasePost } from '../../types'; + +const commentStatusField: Field< BasePost > = { + id: 'comment_status', + label: __( 'Discussion' ), + type: 'text', + Edit: 'radio', + enableSorting: false, + filterBy: { + operators: [], + }, + elements: [ + { + value: 'open', + label: __( 'Open' ), + description: __( 'Visitors can add new comments and replies.' ), + }, + { + value: 'closed', + label: __( 'Closed' ), + description: __( + 'Visitors cannot add new comments or replies. Existing comments remain visible.' + ), + }, + ], +}; + +/** + * Comment status field for BasePost. + */ +export default commentStatusField; diff --git a/packages/fields/src/fields/index.ts b/packages/fields/src/fields/index.ts index 9a4799f13a0d1..fba34eb2388a3 100644 --- a/packages/fields/src/fields/index.ts +++ b/packages/fields/src/fields/index.ts @@ -5,3 +5,4 @@ export { default as featuredImageField } from './featured-image'; export { default as parentField } from './parent'; export { default as passwordField } from './password'; export { default as statusField } from './status'; +export { default as commentStatusField } from './comment-status'; 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 08/87] 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 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 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 09/87] 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 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/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/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/storybook/preview.js b/storybook/preview.js index 9e9dd587b39c4..ca90ad99e405d 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 10/87] 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 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/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/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/storybook/preview.js b/storybook/preview.js index ca90ad99e405d..a045b0c3303d3 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 11/87] 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 0000000000000..d4c46d62fa333 --- /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 0000000000000..eb57b2bb9890e --- /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 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'; From 0a5e54af715deb3bbb3ce098d345232227544c7a Mon Sep 17 00:00:00 2001 From: Ramon Date: Wed, 13 Nov 2024 10:39:39 +1100 Subject: [PATCH 12/87] 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 d4c46d62fa333..44ba36053aa0d 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 eb57b2bb9890e..a4658d1a182c7 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 13/87] 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 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; } From 74bec71af36491373447ada6f0cd4e053481dc68 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 13 Nov 2024 08:52:13 +0100 Subject: [PATCH 14/87] 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 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..097a4f5f75ad7 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 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/hooks/commands/use-edit-mode-commands.js b/packages/edit-site/src/hooks/commands/use-edit-mode-commands.js deleted file mode 100644 index da36f32e6c0d5..0000000000000 --- 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 16260bed3978f..0040a09fbdc07 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 15/87] 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 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/edit-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 083d971d102eb..097459ea11003 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 14e8edae4be04..60d3d00e82766 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 5332f476f8ff5..d8e6f25276d6b 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 0000000000000..c15ed96b89b73 --- /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 16/87] 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 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; } From 0098e9bbc65d9208de7af6c78d255a028892627f Mon Sep 17 00:00:00 2001 From: Nik Tsekouras Date: Wed, 13 Nov 2024 12:09:58 +0200 Subject: [PATCH 17/87] 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 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/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', 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 18/87] 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 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 && 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 19/87] 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 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-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-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 /> ); 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 20/87] 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 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/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-site/src/components/post-fields/index.js b/packages/edit-site/src/components/post-fields/index.js index 097459ea11003..e151c5a048c01 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: