-
Notifications
You must be signed in to change notification settings - Fork 4.2k
/
index.js
132 lines (124 loc) · 3.67 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
/**
* WordPress dependencies
*/
import { Modal } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useState, useEffect, useMemo } from '@wordpress/element';
import {
store as blockEditorStore,
__experimentalBlockPatternsList as BlockPatternsList,
} from '@wordpress/block-editor';
import { useSelect, useDispatch } from '@wordpress/data';
import { useAsyncList } from '@wordpress/compose';
import { store as editorStore } from '@wordpress/editor';
/**
* Internal dependencies
*/
import { store as editPostStore } from '../../store';
function useStartPatterns() {
// A pattern is a start pattern if it includes 'core/post-content' in its blockTypes,
// and it has no postTypes declares and the current post type is page or if
// the current post type is part of the postTypes declared.
const { blockPatternsWithPostContentBlockType, postType } = useSelect(
( select ) => {
const { getPatternsByBlockTypes } = select( blockEditorStore );
const { getCurrentPostType } = select( editorStore );
return {
blockPatternsWithPostContentBlockType:
getPatternsByBlockTypes( 'core/post-content' ),
postType: getCurrentPostType(),
};
},
[]
);
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.
return blockPatternsWithPostContentBlockType.filter( ( pattern ) => {
return (
( postType === 'page' && ! pattern.postTypes ) ||
( Array.isArray( pattern.postTypes ) &&
pattern.postTypes.includes( postType ) )
);
} );
}, [ postType, blockPatternsWithPostContentBlockType ] );
}
function PatternSelection( { onChoosePattern } ) {
const blockPatterns = useStartPatterns();
const shownBlockPatterns = useAsyncList( blockPatterns );
const { resetEditorBlocks } = useDispatch( editorStore );
return (
<BlockPatternsList
blockPatterns={ blockPatterns }
shownPatterns={ shownBlockPatterns }
onClickPattern={ ( _pattern, blocks ) => {
resetEditorBlocks( blocks );
onChoosePattern();
} }
/>
);
}
const START_PAGE_MODAL_STATES = {
INITIAL: 'INITIAL',
PATTERN: 'PATTERN',
CLOSED: 'CLOSED',
};
export default function StartPageOptions() {
const [ modalState, setModalState ] = useState(
START_PAGE_MODAL_STATES.INITIAL
);
const blockPatterns = useStartPatterns();
const hasStartPattern = blockPatterns.length > 0;
const shouldOpenModel = useSelect(
( select ) => {
if (
! hasStartPattern ||
modalState !== START_PAGE_MODAL_STATES.INITIAL
) {
return false;
}
const { getEditedPostContent, isEditedPostSaveable } =
select( editorStore );
const { isEditingTemplate, isFeatureActive } =
select( editPostStore );
return (
! isEditedPostSaveable() &&
'' === getEditedPostContent() &&
! isEditingTemplate() &&
! isFeatureActive( 'welcomeGuide' )
);
},
[ modalState, hasStartPattern ]
);
useEffect( () => {
if ( shouldOpenModel ) {
setModalState( START_PAGE_MODAL_STATES.PATTERN );
}
}, [ shouldOpenModel ] );
if (
modalState === START_PAGE_MODAL_STATES.INITIAL ||
modalState === START_PAGE_MODAL_STATES.CLOSED
) {
return null;
}
return (
<Modal
className="edit-post-start-page-options__modal"
title={ __( 'Choose a pattern' ) }
isFullScreen={ true }
onRequestClose={ () => {
setModalState( START_PAGE_MODAL_STATES.CLOSED );
} }
>
<div className="edit-post-start-page-options__modal-content">
{ modalState === START_PAGE_MODAL_STATES.PATTERN && (
<PatternSelection
onChoosePattern={ () => {
setModalState( START_PAGE_MODAL_STATES.CLOSED );
} }
/>
) }
</div>
</Modal>
);
}