Skip to content

Commit

Permalink
toolbar controls
Browse files Browse the repository at this point in the history
  • Loading branch information
@ntsekouras
ntsekouras committed Nov 20, 2020
1 parent 9962e8b commit f233734
Show file tree
Hide file tree
Showing 5 changed files with 109 additions and 86 deletions.
5 changes: 1 addition & 4 deletions packages/block-library/src/query-loop/index.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -72,10 +72,7 @@ function render_block_core_query_loop( $attributes, $content, $block ) {
$classnames = '';
if ( isset( $block->context['layout'] ) && isset( $block->context['query'] ) ) {
if ( isset( $block->context['layout']['type'] ) && $block->context['layout']['type'] === 'flex' ) {
$columns = $block->context['layout']['columns'];
if ( $columns > 1 ) {
$classnames = "is-flex-container columns-{$columns}";
}
$classnames = "is-flex-container columns-{$block->context['layout']['columns']}";
}
}

Expand Down
3 changes: 1 addition & 2 deletions packages/block-library/src/query/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,8 +26,7 @@
"layout": {
"type": "object",
"default": {
"type": "flex",
"columns": 1
"type": "list"
}
}
},
Expand Down
6 changes: 5 additions & 1 deletion packages/block-library/src/query/edit/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,11 @@ export function QueryContent( {
setLayout={ updateLayout }
/>
<BlockControls>
<QueryToolbar query={ query } setQuery={ updateQuery } />
<QueryToolbar
attributes={ attributes }
setQuery={ updateQuery }
setLayout={ updateLayout }
/>
</BlockControls>
<div { ...blockProps }>
<QueryProvider>
Expand Down
41 changes: 21 additions & 20 deletions packages/block-library/src/query/edit/query-inspector-controls.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,7 @@ const stickyOptions = [
];

export default function QueryInspectorControls( {
attributes: {
query,
layout: { columns },
},
attributes: { query, layout },
setQuery,
setLayout,
} ) {
Expand Down Expand Up @@ -141,22 +138,26 @@ export default function QueryInspectorControls( {
}, [ querySearch, onChangeDebounced ] );
return (
<InspectorControls>
<PanelBody title={ __( 'Display' ) }>
<RangeControl
label={ __( 'Columns' ) }
value={ columns }
onChange={ ( value ) => setLayout( { columns: value } ) }
min={ 1 }
max={ Math.max( 6, columns ) }
/>
{ columns > 6 && (
<Notice status="warning" isDismissible={ false }>
{ __(
'This column count exceeds the recommended amount and may cause visual breakage.'
) }
</Notice>
) }
</PanelBody>
{ layout?.type === 'flex' && (
<PanelBody title={ __( 'Display' ) }>
<RangeControl
label={ __( 'Columns' ) }
value={ layout.columns }
onChange={ ( value ) =>
setLayout( { columns: value } )
}
min={ 1 }
max={ Math.max( 6, layout.columns ) }
/>
{ layout.columns > 6 && (
<Notice status="warning" isDismissible={ false }>
{ __(
'This column count exceeds the recommended amount and may cause visual breakage.'
) }
</Notice>
) }
</PanelBody>
) }
<PanelBody title={ __( 'Settings' ) }>
<SelectControl
options={ postTypesSelectOptions }
Expand Down
140 changes: 81 additions & 59 deletions packages/block-library/src/query/edit/query-toolbar.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,66 +10,88 @@ import {
__experimentalNumberControl as NumberControl,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { settings } from '@wordpress/icons';
import { settings, list, grid } from '@wordpress/icons';

export default function QueryToolbar( { query, setQuery } ) {
export default function QueryToolbar( {
attributes: { query, layout },
setQuery,
setLayout,
} ) {
const layoutControls = [
{
icon: list,
title: __( 'List view' ),
onClick: () => setLayout( { type: 'list' } ),
isActive: layout?.type === 'list',
},
{
icon: grid,
title: __( 'Grid view' ),
onClick: () =>
setLayout( { type: 'flex', columns: layout?.columns || 3 } ),
isActive: layout?.type === 'flex',
},
];
return (
<ToolbarGroup>
<Dropdown
contentClassName="block-library-query-toolbar__popover"
renderToggle={ ( { onToggle } ) => (
<ToolbarButton
icon={ settings }
label={ __( 'Display settings' ) }
onClick={ onToggle }
/>
) }
renderContent={ () => (
<>
<BaseControl>
<NumberControl
__unstableInputWidth="60px"
label={ __( 'Items per Page' ) }
labelPosition="edge"
min={ 1 }
max={ 100 }
onChange={ ( value ) =>
setQuery( { perPage: +value ?? -1 } )
}
step="1"
value={ query.perPage }
isDragEnabled={ false }
/>
</BaseControl>
<BaseControl>
<NumberControl
__unstableInputWidth="60px"
label={ __( 'Offset' ) }
labelPosition="edge"
min={ 0 }
max={ 100 }
onChange={ ( value ) =>
setQuery( { offset: +value } )
}
step="1"
value={ query.offset }
isDragEnabled={ false }
/>
</BaseControl>
<BaseControl>
<RangeControl
label={ __( 'Number of Pages' ) }
min={ 1 }
allowReset
value={ query.pages }
onChange={ ( value ) =>
setQuery( { pages: value ?? -1 } )
}
/>
</BaseControl>
</>
) }
/>
</ToolbarGroup>
<>
<ToolbarGroup>
<Dropdown
contentClassName="block-library-query-toolbar__popover"
renderToggle={ ( { onToggle } ) => (
<ToolbarButton
icon={ settings }
label={ __( 'Display settings' ) }
onClick={ onToggle }
/>
) }
renderContent={ () => (
<>
<BaseControl>
<NumberControl
__unstableInputWidth="60px"
label={ __( 'Items per Page' ) }
labelPosition="edge"
min={ 1 }
max={ 100 }
onChange={ ( value ) =>
setQuery( { perPage: +value ?? -1 } )
}
step="1"
value={ query.perPage }
isDragEnabled={ false }
/>
</BaseControl>
<BaseControl>
<NumberControl
__unstableInputWidth="60px"
label={ __( 'Offset' ) }
labelPosition="edge"
min={ 0 }
max={ 100 }
onChange={ ( value ) =>
setQuery( { offset: +value } )
}
step="1"
value={ query.offset }
isDragEnabled={ false }
/>
</BaseControl>
<BaseControl>
<RangeControl
label={ __( 'Number of Pages' ) }
min={ 1 }
allowReset
value={ query.pages }
onChange={ ( value ) =>
setQuery( { pages: value ?? -1 } )
}
/>
</BaseControl>
</>
) }
/>
</ToolbarGroup>
<ToolbarGroup controls={ layoutControls } />
</>
);
}

0 comments on commit f233734

Please sign in to comment.