Skip to content

Commit

Permalink
[Block Library - Query]: Add semantic wrapper element (#31421)
Browse files Browse the repository at this point in the history
* [Block Library - Query]: Add semantic wrapper element

* update fixtures
  • Loading branch information
ntsekouras authored May 4, 2021
1 parent 88fef8d commit 6dadae1
Show file tree
Hide file tree
Showing 4 changed files with 29 additions and 6 deletions.
4 changes: 4 additions & 0 deletions packages/block-library/src/query/block.json
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,10 @@
"inherit": true
}
},
"tagName": {
"type": "string",
"default": "div"
},
"layout": {
"type": "object",
"default": {
Expand Down
24 changes: 21 additions & 3 deletions packages/block-library/src/query/edit/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,14 @@ import { useInstanceId } from '@wordpress/compose';
import { useEffect } from '@wordpress/element';
import {
BlockControls,
InspectorAdvancedControls,
useBlockProps,
store as blockEditorStore,
__experimentalUseInnerBlocksProps as useInnerBlocksProps,
__experimentalBlockPatternSetup as BlockPatternSetup,
} from '@wordpress/block-editor';
import { SelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';

/**
* Internal dependencies
Expand All @@ -22,7 +25,7 @@ import { DEFAULTS_POSTS_PER_PAGE } from '../constants';

const TEMPLATE = [ [ 'core/query-loop' ] ];
export function QueryContent( { attributes, setAttributes } ) {
const { queryId, query, layout } = attributes;
const { queryId, query, layout, tagName: TagName = 'div' } = attributes;
const { __unstableMarkNextChangeAsNotPersistent } = useDispatch(
blockEditorStore
);
Expand Down Expand Up @@ -81,9 +84,24 @@ export function QueryContent( { attributes, setAttributes } ) {
setLayout={ updateLayout }
/>
</BlockControls>
<div { ...blockProps }>
<InspectorAdvancedControls>
<SelectControl
label={ __( 'HTML element' ) }
options={ [
{ label: __( 'Default (<div>)' ), value: 'div' },
{ label: '<main>', value: 'main' },
{ label: '<section>', value: 'section' },
{ label: '<aside>', value: 'aside' },
] }
value={ TagName }
onChange={ ( value ) =>
setAttributes( { tagName: value } )
}
/>
</InspectorAdvancedControls>
<TagName { ...blockProps }>
<div { ...innerBlocksProps } />
</div>
</TagName>
</>
);
}
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/query/save.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,10 @@
*/
import { InnerBlocks, useBlockProps } from '@wordpress/block-editor';

export default function QuerySave() {
export default function QuerySave( { attributes: { tagName: Tag = 'div' } } ) {
return (
<div { ...useBlockProps.save() }>
<Tag { ...useBlockProps.save() }>
<InnerBlocks.Content />
</div>
</Tag>
);
}
1 change: 1 addition & 0 deletions packages/e2e-tests/fixtures/blocks/core__query.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"sticky": "",
"inherit": true
},
"tagName": "div",
"layout": {
"type": "list"
}
Expand Down

0 comments on commit 6dadae1

Please sign in to comment.