Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Patterns: add opt out preference to the 'Choose a Pattern' modal when adding a page #65026

Merged
merged 8 commits into from
Sep 8, 2024
1 change: 1 addition & 0 deletions packages/edit-post/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export function initializeEditor(
showBlockBreadcrumbs: true,
showIconLabels: false,
showListViewByDefault: false,
enableChoosePatternModal: true,
isPublishSidebarEnabled: true,
} );

Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ export function initializeEditor( id, settings ) {
openPanels: [ 'post-status' ],
showBlockBreadcrumbs: true,
showListViewByDefault: false,
enableChoosePatternModal: true,
} );

if ( window.__experimentalMediaProcessing ) {
Expand Down
1 change: 1 addition & 0 deletions packages/edit-site/src/posts.js
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export function initializePostsDashboard( id, settings ) {
openPanels: [ 'post-status' ],
showBlockBreadcrumbs: true,
showListViewByDefault: false,
enableChoosePatternModal: true,
} );

dispatch( editSiteStore ).updateSettings( settings );
Expand Down
13 changes: 13 additions & 0 deletions packages/editor/src/components/preferences-modal/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ import PageAttributesCheck from '../page-attributes/check';
import PostTypeSupportCheck from '../post-type-support-check';
import { store as editorStore } from '../../store';
import { unlock } from '../../lock-unlock';
import { useStartPatterns } from '../start-page-options';

const {
PreferencesModal,
Expand Down Expand Up @@ -57,6 +58,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
const { setIsListViewOpened, setIsInserterOpened } =
useDispatch( editorStore );
const { set: setPreference } = useDispatch( preferencesStore );
const hasStarterPatterns = !! useStartPatterns().length;

const sections = useMemo(
() =>
Expand Down Expand Up @@ -97,6 +99,16 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
'Allow right-click contextual menus'
) }
/>
{ hasStarterPatterns && (
<PreferenceToggleControl
scope="core"
featureName="enableChoosePatternModal"
help={ __(
'Shows starter patterns when creating a new page.'
) }
label={ __( 'Show starter patterns' ) }
/>
) }
</PreferencesModalSection>
<PreferencesModalSection
title={ __( 'Document settings' ) }
Expand Down Expand Up @@ -314,6 +326,7 @@ export default function EditorPreferencesModal( { extraSections = {} } ) {
setIsListViewOpened,
setPreference,
isLargeViewport,
hasStarterPatterns,
]
);

Expand Down
54 changes: 28 additions & 26 deletions packages/editor/src/components/start-page-options/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
*/
import { Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState, useMemo, useEffect } from '@wordpress/element';
import { useState, useMemo } from '@wordpress/element';
import {
store as blockEditorStore,
__experimentalBlockPatternsList as BlockPatternsList,
Expand All @@ -12,14 +12,16 @@ import { useSelect, useDispatch } from '@wordpress/data';
import { useAsyncList } from '@wordpress/compose';
import { store as coreStore } from '@wordpress/core-data';
import { __unstableSerializeAndClean } from '@wordpress/blocks';
import { store as preferencesStore } from '@wordpress/preferences';
import { store as interfaceStore } from '@wordpress/interface';

/**
* Internal dependencies
*/
import { store as editorStore } from '../../store';
import { TEMPLATE_POST_TYPE } from '../../store/constants';

function useStartPatterns() {
export function useStartPatterns() {
// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
// and it has no postTypes declared and the current post type is page or if
// the current post type is part of the postTypes declared.
Expand All @@ -45,8 +47,14 @@ function useStartPatterns() {
);

return useMemo( () => {
// filter patterns without postTypes declared if the current postType is page
// or patterns that declare the current postType in its post type array.
if ( ! blockPatternsWithPostContentBlockType?.length ) {
return [];
}

/*
* Filter patterns without postTypes declared if the current postType is page
* or patterns that declare the current postType in its post type array.
*/
return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
return (
( postType === 'page' && ! pattern.postTypes ) ||
Expand Down Expand Up @@ -110,30 +118,24 @@ function StartPageOptionsModal( { onClose } ) {

export default function StartPageOptions() {
const [ isClosed, setIsClosed ] = useState( false );
const { shouldEnableModal, postType, postId } = useSelect( ( select ) => {
const {
isEditedPostDirty,
isEditedPostEmpty,
getCurrentPostType,
getCurrentPostId,
} = select( editorStore );
const _postType = getCurrentPostType();

return {
shouldEnableModal:
! isEditedPostDirty() &&
isEditedPostEmpty() &&
TEMPLATE_POST_TYPE !== _postType,
postType: _postType,
postId: getCurrentPostId(),
};
const shouldEnableModal = useSelect( ( select ) => {
const { isEditedPostDirty, isEditedPostEmpty, getCurrentPostType } =
select( editorStore );
const preferencesModalActive =
select( interfaceStore ).isModalActive( 'editor/preferences' );
const choosePatternModalEnabled = select( preferencesStore ).get(
'core',
'enableChoosePatternModal'
);
return (
choosePatternModalEnabled &&
! preferencesModalActive &&
! isEditedPostDirty() &&
isEditedPostEmpty() &&
TEMPLATE_POST_TYPE !== getCurrentPostType()
);
}, [] );

useEffect( () => {
// Should reset the modal state when navigating to a new page/post.
setIsClosed( false );
}, [ postType, postId ] );

if ( ! shouldEnableModal || isClosed ) {
return null;
}
Expand Down
Loading