index.js
2 years ago
useAuthors.js
3 years ago
useDebounceState.js
4 years ago
useDeviceAttributes.js
2 years ago
useDeviceType.js
2 years ago
useInnerBlocksCount.js
4 years ago
useRecordsReducer.js
3 years ago
useSelectedBlockElements.js
2 years ago
useStyleIndicator.js
2 years ago
useTaxonomies.js
4 years ago
useTaxonomyRecords.js
3 years ago
useSelectedBlockElements.js
53 lines
| 1 | import { useSelect } from '@wordpress/data'; |
| 2 | import { useLayoutEffect, useState } from '@wordpress/element'; |
| 3 | |
| 4 | export function useSelectedBlockElements() { |
| 5 | const { |
| 6 | getSelectedBlockClientIds, |
| 7 | } = useSelect( ( select ) => select( 'core/block-editor' ), [] ); |
| 8 | |
| 9 | const clientIds = getSelectedBlockClientIds(); |
| 10 | const [ elements, setElements ] = useState( [] ); |
| 11 | |
| 12 | useLayoutEffect( () => { |
| 13 | if ( ! clientIds.length ) { |
| 14 | return; |
| 15 | } |
| 16 | |
| 17 | const queryDocument = document.querySelector( 'iframe[name="editor-canvas"]' )?.contentDocument || document; |
| 18 | const editorStylesWrapper = queryDocument.querySelector( '.editor-styles-wrapper' ); |
| 19 | |
| 20 | setElements( clientIds.map( ( clientId ) => { |
| 21 | if ( null === editorStylesWrapper ) { |
| 22 | return null; |
| 23 | } |
| 24 | |
| 25 | return editorStylesWrapper.querySelector( `[data-block="${ clientId }"]:not(.gb-is-root-block)` ); |
| 26 | } ).filter( ( element ) => null !== element ) ); |
| 27 | }, [ clientIds ] ); |
| 28 | |
| 29 | return elements; |
| 30 | } |
| 31 | |
| 32 | export function useSelectedBlockElement() { |
| 33 | const { |
| 34 | getSelectedBlockClientId, |
| 35 | } = useSelect( ( select ) => select( 'core/block-editor' ), [] ); |
| 36 | |
| 37 | const clientId = getSelectedBlockClientId(); |
| 38 | const [ element, setElement ] = useState( null ); |
| 39 | |
| 40 | useLayoutEffect( () => { |
| 41 | if ( ! clientId ) { |
| 42 | return; |
| 43 | } |
| 44 | |
| 45 | const queryDocument = document.querySelector( 'iframe[name="editor-canvas"]' )?.contentDocument || document; |
| 46 | const editorStylesWrapper = queryDocument.querySelector( '.editor-styles-wrapper' ); |
| 47 | |
| 48 | setElement( editorStylesWrapper.querySelector( `[data-block="${ clientId }"]:not(.gb-is-root-block)` ) ?? null ); |
| 49 | }, [ clientId ] ); |
| 50 | |
| 51 | return element; |
| 52 | } |
| 53 |