Skip to content

Commit 6407a2f

Browse files
ramonjdramonjd
committed
Initial commit. Moving patterns selection modal content to inspector panel.
1 parent d0a190b commit 6407a2f

File tree

5 files changed

+66
-100
lines changed

5 files changed

+66
-100
lines changed

‎packages/block-library/src/query/edit/index.js‎

Lines changed: 3 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,45 +2,24 @@
22
* WordPress dependencies
33
*/
44
import { useSelect } from '@wordpress/data';
5-
import { useState } from '@wordpress/element';
65
import { store as blockEditorStore } from '@wordpress/block-editor';
76

87
/**
98
* Internal dependencies
109
*/
1110
import QueryContent from './query-content';
1211
import QueryPlaceholder from './query-placeholder';
13-
import PatternSelectionModal from './pattern-selection-modal';
1412

1513
const QueryEdit = ( props ) => {
16-
const { clientId, attributes } = props;
17-
const [ isPatternSelectionModalOpen, setIsPatternSelectionModalOpen ] =
18-
useState( false );
14+
const { clientId } = props;
1915
const hasInnerBlocks = useSelect(
2016
( select ) =>
2117
!! select( blockEditorStore ).getBlocks( clientId ).length,
2218
[ clientId ]
2319
);
20+
2421
const Component = hasInnerBlocks ? QueryContent : QueryPlaceholder;
25-
return (
26-
<>
27-
<Component
28-
{ ...props }
29-
openPatternSelectionModal={ () =>
30-
setIsPatternSelectionModalOpen( true )
31-
}
32-
/>
33-
{ isPatternSelectionModalOpen && (
34-
<PatternSelectionModal
35-
clientId={ clientId }
36-
attributes={ attributes }
37-
setIsPatternSelectionModalOpen={
38-
setIsPatternSelectionModalOpen
39-
}
40-
/>
41-
) }
42-
</>
43-
);
22+
return <Component { ...props } />;
4423
};
4524

4625
export default QueryEdit;

‎packages/block-library/src/query/edit/inspector-controls/index.js‎

Lines changed: 27 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -32,20 +32,29 @@ import CreateNewPostLink from './create-new-post-link';
3232
import PerPageControl from './per-page-control';
3333
import OffsetControl from './offset-controls';
3434
import PagesControl from './pages-control';
35+
import PatternSelection from './pattern-selection';
3536
import { unlock } from '../../../lock-unlock';
3637
import {
3738
usePostTypes,
3839
useIsPostTypeHierarchical,
3940
useAllowedControls,
4041
isControlAllowed,
4142
useTaxonomies,
43+
usePatterns,
4244
} from '../../utils';
4345
import { useToolsPanelDropdownMenuProps } from '../../../utils/hooks';
4446

4547
const { BlockInfo } = unlock( blockEditorPrivateApis );
4648

4749
export default function QueryInspectorControls( props ) {
48-
const { attributes, setQuery, setDisplayLayout, isSingular } = props;
50+
const {
51+
attributes,
52+
setQuery,
53+
setDisplayLayout,
54+
isSingular,
55+
clientId,
56+
name,
57+
} = props;
4958
const { query, displayLayout } = attributes;
5059
const {
5160
order,
@@ -178,7 +187,8 @@ export default function QueryInspectorControls( props ) {
178187
showParentControl ||
179188
showFormatControl;
180189
const dropdownMenuProps = useToolsPanelDropdownMenuProps();
181-
190+
const [ loadPatterns, setLoadPatterns ] = useState( false );
191+
const hasPatterns = !! usePatterns( clientId, name ).length;
182192
const showPostCountControl = isControlAllowed(
183193
allowedControls,
184194
'postCount'
@@ -196,6 +206,21 @@ export default function QueryInspectorControls( props ) {
196206
<CreateNewPostLink postType={ postType } />
197207
</BlockInfo>
198208
) }
209+
{ hasPatterns && (
210+
<PanelBody
211+
title={ __( 'Design' ) }
212+
initialOpen={ false }
213+
onToggle={ ( nextState ) =>
214+
nextState ? setLoadPatterns( true ) : false
215+
}
216+
>
217+
<PatternSelection
218+
attributes={ attributes }
219+
clientId={ clientId }
220+
shouldLoadPatterns={ loadPatterns }
221+
/>
222+
</PanelBody>
223+
) }
199224
{ showSettingsPanel && (
200225
<PanelBody title={ __( 'Settings' ) }>
201226
{ showInheritControl && (

‎packages/block-library/src/query/edit/pattern-selection-modal.js‎ renamed to ‎packages/block-library/src/query/edit/inspector-controls/pattern-selection.js‎

Lines changed: 34 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
*/
44
import { useState, useMemo } from '@wordpress/element';
55
import { useDispatch } from '@wordpress/data';
6-
import { Modal, SearchControl } from '@wordpress/components';
6+
import { SearchControl } from '@wordpress/components';
77
import {
88
BlockContextProvider,
99
store as blockEditorStore,
@@ -18,14 +18,10 @@ import {
1818
useBlockNameForPatterns,
1919
getTransformedBlocksFromPattern,
2020
usePatterns,
21-
} from '../utils';
22-
import { searchPatterns } from '../../utils/search-patterns';
21+
} from '../../utils';
22+
import { searchPatterns } from '../../../utils/search-patterns';
2323

24-
export default function PatternSelectionModal( {
25-
clientId,
26-
attributes,
27-
setIsPatternSelectionModalOpen,
28-
} ) {
24+
function PatternSelectionList( { clientId, attributes } ) {
2925
const [ searchValue, setSearchValue ] = useState( '' );
3026
const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
3127
const onBlockPatternSelect = ( pattern, blocks ) => {
@@ -56,29 +52,36 @@ export default function PatternSelectionModal( {
5652
}, [ blockPatterns, searchValue ] );
5753

5854
return (
59-
<Modal
60-
overlayClassName="block-library-query-pattern__selection-modal"
61-
title={ __( 'Choose a pattern' ) }
62-
onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
63-
isFullScreen
64-
>
65-
<div className="block-library-query-pattern__selection-content">
66-
<div className="block-library-query-pattern__selection-search">
67-
<SearchControl
68-
__nextHasNoMarginBottom
69-
onChange={ setSearchValue }
70-
value={ searchValue }
71-
label={ __( 'Search' ) }
72-
placeholder={ __( 'Search' ) }
73-
/>
74-
</div>
75-
<BlockContextProvider value={ blockPreviewContext }>
76-
<BlockPatternsList
77-
blockPatterns={ filteredBlockPatterns }
78-
onClickPattern={ onBlockPatternSelect }
79-
/>
80-
</BlockContextProvider>
55+
<div className="block-library-query-pattern__selection-content">
56+
<div className="block-library-query-pattern__selection-search">
57+
<SearchControl
58+
__nextHasNoMarginBottom
59+
onChange={ setSearchValue }
60+
value={ searchValue }
61+
label={ __( 'Search' ) }
62+
placeholder={ __( 'Search' ) }
63+
/>
8164
</div>
82-
</Modal>
65+
<BlockContextProvider value={ blockPreviewContext }>
66+
<BlockPatternsList
67+
blockPatterns={ filteredBlockPatterns }
68+
onClickPattern={ onBlockPatternSelect }
69+
/>
70+
</BlockContextProvider>
71+
</div>
72+
);
73+
}
74+
75+
export default function PatternSelection( {
76+
clientId,
77+
attributes,
78+
shouldLoadPatterns,
79+
} ) {
80+
if ( ! shouldLoadPatterns ) {
81+
return;
82+
}
83+
84+
return (
85+
<PatternSelectionList attributes={ attributes } clientId={ clientId } />
8386
);
8487
}

‎packages/block-library/src/query/edit/query-content.js‎

Lines changed: 2 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,6 @@ import { useSelect, useDispatch } from '@wordpress/data';
55
import { useInstanceId } from '@wordpress/compose';
66
import { useEffect, useCallback } from '@wordpress/element';
77
import {
8-
BlockControls,
98
InspectorControls,
109
useBlockProps,
1110
store as blockEditorStore,
@@ -19,7 +18,6 @@ import { store as coreStore } from '@wordpress/core-data';
1918
* Internal dependencies
2019
*/
2120
import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
22-
import QueryToolbar from './query-toolbar';
2321
import QueryInspectorControls from './inspector-controls';
2422
import EnhancedPaginationModal from './enhanced-pagination-modal';
2523
import { getQueryContextFromTemplate } from '../utils';
@@ -30,10 +28,9 @@ const TEMPLATE = [ [ 'core/post-template' ] ];
3028
export default function QueryContent( {
3129
attributes,
3230
setAttributes,
33-
openPatternSelectionModal,
34-
name,
3531
clientId,
3632
context,
33+
name,
3734
} ) {
3835
const {
3936
queryId,
@@ -154,6 +151,7 @@ export default function QueryContent( {
154151
/>
155152
<InspectorControls>
156153
<QueryInspectorControls
154+
name={ name }
157155
attributes={ attributes }
158156
setQuery={ updateQuery }
159157
setDisplayLayout={ updateDisplayLayout }
@@ -162,15 +160,6 @@ export default function QueryContent( {
162160
isSingular={ isSingular }
163161
/>
164162
</InspectorControls>
165-
<BlockControls>
166-
<QueryToolbar
167-
name={ name }
168-
clientId={ clientId }
169-
attributes={ attributes }
170-
setQuery={ updateQuery }
171-
openPatternSelectionModal={ openPatternSelectionModal }
172-
/>
173-
</BlockControls>
174163
<InspectorControls group="advanced">
175164
<SelectControl
176165
__nextHasNoMarginBottom

‎packages/block-library/src/query/edit/query-toolbar.js‎

Lines changed: 0 additions & 30 deletions
This file was deleted.

0 commit comments

Comments
 (0)