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.

Sign up for GitHub

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

Query block: move patterns modal to dropdown on block toolbar #66993

Merged
merged 7 commits into from
Nov 28, 2024
Merged

Query block: move patterns modal to dropdown on block toolbar #66993

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
8d56c06
Reinstate modal.
ramonjd Nov 15, 2024
806aaf1
Delete unused component
ramonjd Nov 15, 2024
0a228d6
showTitlesAsTooltip prop
ramonjd Nov 15, 2024
607360a
Remove redundant style-edit route
ramonjd Nov 19, 2024
ae96856
Revert slot for navigation mode.
ramonjd Nov 22, 2024
74a4423
First attempt at moving the designs in a dropdone popover.
ramonjd Nov 26, 2024
5797f50
Tweaking widths. Ensure expansion on mobile
ramonjd Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/block-library/src/query/edit/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ import { store as blockEditorStore } from '@wordpress/block-editor';
*/
import QueryContent from './query-content';
import QueryPlaceholder from './query-placeholder';
import PatternSelectionModal from './pattern-selection-modal';
import { PatternSelectionModal } from './pattern-selection';

const QueryEdit = ( props ) => {
const { clientId, attributes } = props;
Expand Down
86 changes: 53 additions & 33 deletions ...src/query/edit/pattern-selection-modal.js → ...brary/src/query/edit/pattern-selection.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,48 +21,67 @@ import {
} from '../utils';
import { searchPatterns } from '../../utils/search-patterns';

export default function PatternSelectionModal( {
export function PatternSelectionModal( {
clientId,
attributes,
setIsPatternSelectionModalOpen,
} ) {
return (
<Modal
overlayClassName="block-library-query-pattern__selection-modal"
title={ __( 'Choose a pattern' ) }
onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
isFullScreen
>
<PatternSelection clientId={ clientId } attributes={ attributes } />
</Modal>
);
}

export function useBlockPatterns( clientId, attributes ) {
const blockNameForPatterns = useBlockNameForPatterns(
clientId,
attributes
);
return usePatterns( clientId, blockNameForPatterns );
}

export default function PatternSelection( {
clientId,
attributes,
showTitlesAsTooltip = false,
showSearch = true,
} ) {
const [ searchValue, setSearchValue ] = useState( '' );
const { replaceBlock, selectBlock } = useDispatch( blockEditorStore );
const onBlockPatternSelect = ( pattern, blocks ) => {
const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
blocks,
attributes
);
replaceBlock( clientId, newBlocks );
if ( queryClientIds[ 0 ] ) {
selectBlock( queryClientIds[ 0 ] );
}
};
// When we preview Query Loop blocks we should prefer the current
// block's postType, which is passed through block context.
const blockPatterns = useBlockPatterns( clientId, attributes );
/*
* When we preview Query Loop blocks we should prefer the current
* block's postType, which is passed through block context.
*/
const blockPreviewContext = useMemo(
() => ( {
previewPostType: attributes.query.postType,
} ),
[ attributes.query.postType ]
);
const blockNameForPatterns = useBlockNameForPatterns(
clientId,
attributes
);
const blockPatterns = usePatterns( clientId, blockNameForPatterns );
const filteredBlockPatterns = useMemo( () => {
return searchPatterns( blockPatterns, searchValue );
}, [ blockPatterns, searchValue ] );

const onBlockPatternSelect = ( pattern, blocks ) => {
const { newBlocks, queryClientIds } = getTransformedBlocksFromPattern(
blocks,
attributes
);
replaceBlock( clientId, newBlocks );
if ( queryClientIds[ 0 ] ) {
selectBlock( queryClientIds[ 0 ] );
}
};
return (
<Modal
overlayClassName="block-library-query-pattern__selection-modal"
title={ __( 'Choose a pattern' ) }
onRequestClose={ () => setIsPatternSelectionModalOpen( false ) }
isFullScreen
>
<div className="block-library-query-pattern__selection-content">
<div className="block-library-query-pattern__selection-content">
{ showSearch && (
<div className="block-library-query-pattern__selection-search">
<SearchControl
__nextHasNoMarginBottom
Expand All @@ -72,13 +91,14 @@ export default function PatternSelectionModal( {
placeholder={ __( 'Search' ) }
/>
</div>
<BlockContextProvider value={ blockPreviewContext }>
<BlockPatternsList
blockPatterns={ filteredBlockPatterns }
onClickPattern={ onBlockPatternSelect }
/>
</BlockContextProvider>
</div>
</Modal>
) }
<BlockContextProvider value={ blockPreviewContext }>
<BlockPatternsList
blockPatterns={ filteredBlockPatterns }
onClickPattern={ onBlockPatternSelect }
showTitlesAsTooltip={ showTitlesAsTooltip }
/>
</BlockContextProvider>
</div>
);
}
14 changes: 4 additions & 10 deletions packages/block-library/src/query/edit/query-content.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,21 +19,20 @@ import { store as coreStore } from '@wordpress/core-data';
* Internal dependencies
*/
import EnhancedPaginationControl from './inspector-controls/enhanced-pagination-control';
import QueryToolbar from './query-toolbar';
import QueryInspectorControls from './inspector-controls';
import EnhancedPaginationModal from './enhanced-pagination-modal';
import { getQueryContextFromTemplate } from '../utils';
import QueryToolbar from './query-toolbar';

const DEFAULTS_POSTS_PER_PAGE = 3;

const TEMPLATE = [ [ 'core/post-template' ] ];
export default function QueryContent( {
attributes,
setAttributes,
openPatternSelectionModal,
name,
clientId,
context,
name,
} ) {
const {
queryId,
Expand Down Expand Up @@ -154,6 +153,7 @@ export default function QueryContent( {
/>
<InspectorControls>
<QueryInspectorControls
name={ name }
attributes={ attributes }
setQuery={ updateQuery }
setDisplayLayout={ updateDisplayLayout }
Expand All @@ -163,13 +163,7 @@ export default function QueryContent( {
/>
</InspectorControls>
<BlockControls>
<QueryToolbar
name={ name }
clientId={ clientId }
attributes={ attributes }
setQuery={ updateQuery }
openPatternSelectionModal={ openPatternSelectionModal }
/>
<QueryToolbar attributes={ attributes } clientId={ clientId } />
</BlockControls>
<InspectorControls group="advanced">
<SelectControl
Expand Down
19 changes: 5 additions & 14 deletions packages/block-library/src/query/edit/query-placeholder.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,8 @@ import { __ } from '@wordpress/i18n';
/**
* Internal dependencies
*/
import { useScopedBlockVariations, useBlockNameForPatterns } from '../utils';
import { useScopedBlockVariations } from '../utils';
import { useBlockPatterns } from './pattern-selection';

export default function QueryPlaceholder( {
attributes,
Expand All @@ -28,31 +29,21 @@ export default function QueryPlaceholder( {
} ) {
const [ isStartingBlank, setIsStartingBlank ] = useState( false );
const blockProps = useBlockProps();
const blockNameForPatterns = useBlockNameForPatterns(
clientId,
attributes
);
const { blockType, activeBlockVariation, hasPatterns } = useSelect(
const { blockType, activeBlockVariation } = useSelect(
( select ) => {
const { getActiveBlockVariation, getBlockType } =
select( blocksStore );
const { getBlockRootClientId, getPatternsByBlockTypes } =
select( blockEditorStore );
const rootClientId = getBlockRootClientId( clientId );
return {
blockType: getBlockType( name ),
activeBlockVariation: getActiveBlockVariation(
name,
attributes
),
hasPatterns: !! getPatternsByBlockTypes(
blockNameForPatterns,
rootClientId
).length,
};
},
[ name, blockNameForPatterns, clientId, attributes ]
[ name, attributes ]
);
const hasPatterns = !! useBlockPatterns( clientId, attributes ).length;
const icon =
activeBlockVariation?.icon?.src ||
activeBlockVariation?.icon ||
Expand Down
55 changes: 38 additions & 17 deletions packages/block-library/src/query/edit/query-toolbar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,30 +1,51 @@
/**
* WordPress dependencies
*/
import { ToolbarGroup, ToolbarButton } from '@wordpress/components';
import {
ToolbarGroup,
ToolbarButton,
Dropdown,
__experimentalDropdownContentWrapper as DropdownContentWrapper,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
*/
import { usePatterns } from '../utils';
import PatternSelection, { useBlockPatterns } from './pattern-selection';

export default function QueryToolbar( {
openPatternSelectionModal,
name,
clientId,
} ) {
const hasPatterns = !! usePatterns( clientId, name ).length;
export default function QueryToolbar( { clientId, attributes } ) {
const hasPatterns = useBlockPatterns( clientId, attributes ).length;
if ( ! hasPatterns ) {
return null;
}

return (
<>
{ hasPatterns && (
<ToolbarGroup className="wp-block-template-part__block-control-group">
<ToolbarButton onClick={ openPatternSelectionModal }>
{ __( 'Replace' ) }
</ToolbarButton>
</ToolbarGroup>
) }
</>
<ToolbarGroup className="wp-block-template-part__block-control-group">
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not for this PR but how much of this toolbar control can be made generic and absorbed automatically for all blocks in "block-editor"? (just asking whether that's even possible)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I had a poke around and I think it could be genericized in the block-editor package.

For example the align hook displays a block control.

As far as I can tell the hasPatterns check the query block uses relies only on the blocks and block-editor stores. So no core data.

<DropdownContentWrapper>
<Dropdown
contentClassName="block-editor-block-settings-menu__popover"
focusOnMount="firstElement"
expandOnMobile
renderToggle={ ( { isOpen, onToggle } ) => (
<ToolbarButton
aria-haspopup="true"
aria-expanded={ isOpen }
onClick={ onToggle }
>
{ __( 'Change design' ) }
</ToolbarButton>
) }
renderContent={ () => (
<PatternSelection
clientId={ clientId }
attributes={ attributes }
showSearch={ false }
showTitlesAsTooltip
/>
) }
/>
</DropdownContentWrapper>
</ToolbarGroup>
);
}
30 changes: 30 additions & 0 deletions packages/block-library/src/query/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,12 @@
}
}

.block-library-query-toolspanel__design {
.block-library-query-pattern__selection-content {
margin-top: $grid-unit-10;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Is this an override of sorts?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's to compensate for the removal of the search component in the patterns view.

}
}

.wp-block-query__enhanced-pagination-modal {
@include break-small() {
max-width: $break-mobile;
Expand All @@ -54,3 +60,27 @@
.wp-block-query__enhanced-pagination-notice {
margin: 0;
}

.block-editor-block-settings-menu__popover {
&.is-expanded {
overflow-y: scroll;
}
.block-library-query-pattern__selection-content {
height: 100%;
}
.block-editor-block-patterns-list {
display: grid;
grid-template-columns: 1fr;
@include break-small() {
grid-template-columns: 1fr 1fr;
}
grid-gap: $grid-unit-15;
min-width: $break-zoomed-in;
@include break-small() {
min-width: $break-mobile;
}
}
.block-editor-block-patterns-list__list-item {
margin-bottom: 0;
}
}
Loading