diff --git a/packages/edit-post/src/components/layout/index.js b/packages/edit-post/src/components/layout/index.js index 15bc017900daa2..b7aa8bcd025af7 100644 --- a/packages/edit-post/src/components/layout/index.js +++ b/packages/edit-post/src/components/layout/index.js @@ -13,6 +13,7 @@ import { EditorNotices, EditorKeyboardShortcutsRegister, EditorSnackbars, + PostSyncStatusModal, store as editorStore, } from '@wordpress/editor'; import { useSelect, useDispatch } from '@wordpress/data'; @@ -291,6 +292,7 @@ function Layout( { styles } ) { + diff --git a/packages/editor/src/components/index.js b/packages/editor/src/components/index.js index b037397cfdd4cf..aa20f9d6ae9fae 100644 --- a/packages/editor/src/components/index.js +++ b/packages/editor/src/components/index.js @@ -51,7 +51,10 @@ export { default as PostSlugCheck } from './post-slug/check'; export { default as PostSticky } from './post-sticky'; export { default as PostStickyCheck } from './post-sticky/check'; export { default as PostSwitchToDraftButton } from './post-switch-to-draft-button'; -export { default as PostSyncStatus } from './post-sync-status'; +export { + default as PostSyncStatus, + PostSyncStatusModal, +} from './post-sync-status'; export { default as PostTaxonomies } from './post-taxonomies'; export { FlatTermSelector as PostTaxonomiesFlatTermSelector } from './post-taxonomies/flat-term-selector'; export { HierarchicalTermSelector as PostTaxonomiesHierarchicalTermSelector } from './post-taxonomies/hierarchical-term-selector'; diff --git a/packages/editor/src/components/post-sync-status/index.js b/packages/editor/src/components/post-sync-status/index.js index 22de1396d06790..8219ef7c0e4f54 100644 --- a/packages/editor/src/components/post-sync-status/index.js +++ b/packages/editor/src/components/post-sync-status/index.js @@ -1,9 +1,18 @@ /** * WordPress dependencies */ -import { useSelect } from '@wordpress/data'; +import { useSelect, useDispatch } from '@wordpress/data'; import { __ } from '@wordpress/i18n'; -import { PanelRow } from '@wordpress/components'; +import { + PanelRow, + Modal, + Button, + __experimentalHStack as HStack, + __experimentalVStack as VStack, + ToggleControl, +} from '@wordpress/components'; +import { useEffect, useState } from '@wordpress/element'; +import { ReusableBlocksRenameHint } from '@wordpress/block-editor'; /** * Internal dependencies @@ -11,25 +20,108 @@ import { PanelRow } from '@wordpress/components'; import { store as editorStore } from '../../store'; export default function PostSyncStatus() { - const { syncStatus, postType } = useSelect( ( select ) => { + const { syncStatus, postType, meta } = useSelect( ( select ) => { const { getEditedPostAttribute } = select( editorStore ); return { syncStatus: getEditedPostAttribute( 'wp_pattern_sync_status' ), + meta: getEditedPostAttribute( 'meta' ), postType: getEditedPostAttribute( 'type' ), }; - }, [] ); + } ); + if ( postType !== 'wp_block' ) { return null; } - - const isFullySynced = ! syncStatus; + // When the post is first created, the top level wp_pattern_sync_status is not set so get meta value instead. + const currentSyncStatus = + meta?.wp_pattern_sync_status === 'unsynced' ? 'unsynced' : syncStatus; return ( { __( 'Sync status' ) }
- { isFullySynced ? __( 'Fully synced' ) : __( 'Not synced' ) } + { currentSyncStatus === 'unsynced' + ? __( 'Not synced' ) + : __( 'Fully synced' ) }
); } + +export function PostSyncStatusModal() { + const { editPost } = useDispatch( editorStore ); + const [ isModalOpen, setIsModalOpen ] = useState( false ); + const [ syncType, setSyncType ] = useState( undefined ); + + const { postType, isNewPost } = useSelect( ( select ) => { + const { getEditedPostAttribute, isCleanNewPost } = + select( editorStore ); + return { + postType: getEditedPostAttribute( 'type' ), + isNewPost: isCleanNewPost(), + }; + }, [] ); + + useEffect( () => { + if ( isNewPost && postType === 'wp_block' ) { + setIsModalOpen( true ); + } + // We only want the modal to open when the page is first loaded. + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [] ); + + const setSyncStatus = () => { + editPost( { + meta: { + wp_pattern_sync_status: syncType, + }, + } ); + }; + + if ( postType !== 'wp_block' || ! isNewPost ) { + return null; + } + + return ( + <> + { isModalOpen && ( + { + setIsModalOpen( false ); + } } + overlayClassName="reusable-blocks-menu-items__convert-modal" + > +
{ + event.preventDefault(); + setIsModalOpen( false ); + setSyncStatus(); + } } + > + + + { + setSyncType( + ! syncType ? 'unsynced' : undefined + ); + } } + /> + + + + +
+
+ ) } + + ); +}