components
2 years ago
hoc
4 years ago
hooks
4 years ago
attributes.js
2 years ago
block.js
1 year ago
edit.js
2 years ago
editor.scss
2 years ago
query-parameters.js
3 years ago
templates.js
3 years ago
edit.js
60 lines
| 1 | import InspectorControls from './components/InspectorControls'; |
| 2 | import BlockControls from './components/BlockControls'; |
| 3 | import filterAttributes from '../../utils/filter-attributes'; |
| 4 | import queryLoopAttributes from './attributes'; |
| 5 | import { |
| 6 | BlockContextProvider, |
| 7 | InnerBlocks, |
| 8 | useBlockProps, |
| 9 | store as blockEditorStore, |
| 10 | } from '@wordpress/block-editor'; |
| 11 | import LayoutSelector from './components/LayoutSelector'; |
| 12 | import { useSelect } from '@wordpress/data'; |
| 13 | import InspectorAdvancedControls from './components/InspectorAdvancedControls'; |
| 14 | |
| 15 | export default function QueryLoopEdit( props ) { |
| 16 | const { |
| 17 | attributes, |
| 18 | clientId, |
| 19 | setAttributes, |
| 20 | } = props; |
| 21 | |
| 22 | const blockProps = useBlockProps(); |
| 23 | |
| 24 | const hasInnerBlocks = useSelect( |
| 25 | ( select ) => |
| 26 | !! select( blockEditorStore ).getBlocks( clientId ).length, |
| 27 | [ clientId ] |
| 28 | ); |
| 29 | |
| 30 | return ( |
| 31 | <> |
| 32 | <div { ...blockProps }> |
| 33 | { ! hasInnerBlocks |
| 34 | ? <LayoutSelector clientId={ clientId } /> |
| 35 | : <> |
| 36 | <BlockControls clientId={ clientId } /> |
| 37 | |
| 38 | <InspectorControls |
| 39 | attributes={ filterAttributes( attributes, Object.keys( queryLoopAttributes ) ) } |
| 40 | setAttributes={ setAttributes } |
| 41 | clientId={ clientId } |
| 42 | /> |
| 43 | |
| 44 | <InspectorAdvancedControls |
| 45 | blockLabel={ attributes.blockLabel } |
| 46 | setAttributes={ setAttributes } |
| 47 | /> |
| 48 | |
| 49 | <BlockContextProvider value={ { 'generateblocks/query': attributes.query } }> |
| 50 | <InnerBlocks |
| 51 | renderAppender={ false } |
| 52 | /> |
| 53 | </BlockContextProvider> |
| 54 | </> |
| 55 | } |
| 56 | </div> |
| 57 | </> |
| 58 | ); |
| 59 | } |
| 60 |