@wordpress/block-editor 12.20.0 → 12.21.0

package/build-module/utils/use-can-block-toolbar-be-focused.js

@@ -1,40 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../store';
-import { unlock } from '../lock-unlock';
-
-/**
- * Returns true if the block toolbar should be able to receive focus.
- *
- * @return {boolean} Whether the block toolbar should be able to receive focus
- */
-export function useCanBlockToolbarBeFocused() {
-  return useSelect(select => {
-    const {
-      __unstableGetEditorMode,
-      getBlock,
-      getSettings,
-      getSelectedBlockClientId,
-      getFirstMultiSelectedBlockClientId
-    } = unlock(select(blockEditorStore));
-    const selectedBlockId = getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
-    const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(getBlock(selectedBlockId) || {});
-
-    // Fixed Toolbar can be focused when:
-    // - a block is selected
-    // - fixed toolbar is on
-    // Block Toolbar Popover can be focused when:
-    // - a block is selected
-    // - we are in edit mode
-    // - it is not an empty default block
-    return !!selectedBlockId && (getSettings().hasFixedToolbar || __unstableGetEditorMode() === 'edit' && !isEmptyDefaultBlock);
-  }, []);
-}
-//# sourceMappingURL=use-can-block-toolbar-be-focused.js.map

package/build-module/utils/use-can-block-toolbar-be-focused.js.map

@@ -1 +0,0 @@
-{"version":3,"names":["useSelect","isUnmodifiedDefaultBlock","store","blockEditorStore","unlock","useCanBlockToolbarBeFocused","select","__unstableGetEditorMode","getBlock","getSettings","getSelectedBlockClientId","getFirstMultiSelectedBlockClientId","selectedBlockId","isEmptyDefaultBlock","hasFixedToolbar"],"sources":["@wordpress/block-editor/src/utils/use-can-block-toolbar-be-focused.js"],"sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { isUnmodifiedDefaultBlock } from '@wordpress/blocks';\n\n/**\n * Internal dependencies\n */\nimport { store as blockEditorStore } from '../store';\nimport { unlock } from '../lock-unlock';\n\n/**\n * Returns true if the block toolbar should be able to receive focus.\n *\n * @return {boolean} Whether the block toolbar should be able to receive focus\n */\nexport function useCanBlockToolbarBeFocused() {\n\treturn useSelect( ( select ) => {\n\t\tconst {\n\t\t\t__unstableGetEditorMode,\n\t\t\tgetBlock,\n\t\t\tgetSettings,\n\t\t\tgetSelectedBlockClientId,\n\t\t\tgetFirstMultiSelectedBlockClientId,\n\t\t} = unlock( select( blockEditorStore ) );\n\n\t\tconst selectedBlockId =\n\t\t\tgetFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();\n\t\tconst isEmptyDefaultBlock = isUnmodifiedDefaultBlock(\n\t\t\tgetBlock( selectedBlockId ) || {}\n\t\t);\n\n\t\t// Fixed Toolbar can be focused when:\n\t\t// - a block is selected\n\t\t// - fixed toolbar is on\n\t\t// Block Toolbar Popover can be focused when:\n\t\t// - a block is selected\n\t\t// - we are in edit mode\n\t\t// - it is not an empty default block\n\t\treturn (\n\t\t\t!! selectedBlockId &&\n\t\t\t( getSettings().hasFixedToolbar ||\n\t\t\t\t( __unstableGetEditorMode() === 'edit' &&\n\t\t\t\t\t! isEmptyDefaultBlock ) )\n\t\t);\n\t}, [] );\n}\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,wBAAwB,QAAQ,mBAAmB;;AAE5D;AACA;AACA;AACA,SAASC,KAAK,IAAIC,gBAAgB,QAAQ,UAAU;AACpD,SAASC,MAAM,QAAQ,gBAAgB;;AAEvC;AACA;AACA;AACA;AACA;AACA,OAAO,SAASC,2BAA2BA,CAAA,EAAG;EAC7C,OAAOL,SAAS,CAAIM,MAAM,IAAM;IAC/B,MAAM;MACLC,uBAAuB;MACvBC,QAAQ;MACRC,WAAW;MACXC,wBAAwB;MACxBC;IACD,CAAC,GAAGP,MAAM,CAAEE,MAAM,CAAEH,gBAAiB,CAAE,CAAC;IAExC,MAAMS,eAAe,GACpBD,kCAAkC,CAAC,CAAC,IAAID,wBAAwB,CAAC,CAAC;IACnE,MAAMG,mBAAmB,GAAGZ,wBAAwB,CACnDO,QAAQ,CAAEI,eAAgB,CAAC,IAAI,CAAC,CACjC,CAAC;;IAED;IACA;IACA;IACA;IACA;IACA;IACA;IACA,OACC,CAAC,CAAEA,eAAe,KAChBH,WAAW,CAAC,CAAC,CAACK,eAAe,IAC5BP,uBAAuB,CAAC,CAAC,KAAK,MAAM,IACrC,CAAEM,mBAAqB,CAAE;EAE7B,CAAC,EAAE,EAAG,CAAC;AACR"}

package/src/hooks/margin.js

@@ -1,91 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useEffect } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import BlockPopover from '../components/block-popover';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
-
-function getComputedCSS( element, property ) {
-	return element.ownerDocument.defaultView
-		.getComputedStyle( element )
-		.getPropertyValue( property );
-}
-
-export function MarginVisualizer( { clientId, attributes, forceShow } ) {
-	const blockElement = useBlockElement( clientId );
-	const [ style, setStyle ] = useState();
-
-	const margin = attributes?.style?.spacing?.margin;
-
-	useEffect( () => {
-		if (
-			! blockElement ||
-			null === blockElement.ownerDocument.defaultView
-		) {
-			return;
-		}
-
-		const top = getComputedCSS( blockElement, 'margin-top' );
-		const right = getComputedCSS( blockElement, 'margin-right' );
-		const bottom = getComputedCSS( blockElement, 'margin-bottom' );
-		const left = getComputedCSS( blockElement, 'margin-left' );
-
-		setStyle( {
-			borderTopWidth: top,
-			borderRightWidth: right,
-			borderBottomWidth: bottom,
-			borderLeftWidth: left,
-			top: top ? `-${ top }` : 0,
-			right: right ? `-${ right }` : 0,
-			bottom: bottom ? `-${ bottom }` : 0,
-			left: left ? `-${ left }` : 0,
-		} );
-	}, [ blockElement, margin ] );
-
-	const [ isActive, setIsActive ] = useState( false );
-	const valueRef = useRef( margin );
-	const timeoutRef = useRef();
-
-	const clearTimer = () => {
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-	};
-
-	useEffect( () => {
-		if ( ! isShallowEqual( margin, valueRef.current ) && ! forceShow ) {
-			setIsActive( true );
-			valueRef.current = margin;
-
-			timeoutRef.current = setTimeout( () => {
-				setIsActive( false );
-			}, 400 );
-		}
-
-		return () => {
-			setIsActive( false );
-			clearTimer();
-		};
-	}, [ margin, forceShow ] );
-
-	if ( ! isActive && ! forceShow ) {
-		return null;
-	}
-
-	return (
-		<BlockPopover
-			clientId={ clientId }
-			__unstableCoverTarget
-			__unstableRefreshSize={ margin }
-			__unstablePopoverSlot="block-toolbar"
-			shift={ false }
-		>
-			<div className="block-editor__padding-visualizer" style={ style } />
-		</BlockPopover>
-	);
-}

package/src/hooks/padding.js

@@ -1,82 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useState, useRef, useEffect } from '@wordpress/element';
-import isShallowEqual from '@wordpress/is-shallow-equal';
-
-/**
- * Internal dependencies
- */
-import BlockPopover from '../components/block-popover';
-import { __unstableUseBlockElement as useBlockElement } from '../components/block-list/use-block-props/use-block-refs';
-
-function getComputedCSS( element, property ) {
-	return element.ownerDocument.defaultView
-		.getComputedStyle( element )
-		.getPropertyValue( property );
-}
-
-export function PaddingVisualizer( { clientId, value, forceShow } ) {
-	const blockElement = useBlockElement( clientId );
-	const [ style, setStyle ] = useState();
-
-	const padding = value?.spacing?.padding;
-
-	useEffect( () => {
-		if (
-			! blockElement ||
-			null === blockElement.ownerDocument.defaultView
-		) {
-			return;
-		}
-
-		setStyle( {
-			borderTopWidth: getComputedCSS( blockElement, 'padding-top' ),
-			borderRightWidth: getComputedCSS( blockElement, 'padding-right' ),
-			borderBottomWidth: getComputedCSS( blockElement, 'padding-bottom' ),
-			borderLeftWidth: getComputedCSS( blockElement, 'padding-left' ),
-		} );
-	}, [ blockElement, padding ] );
-
-	const [ isActive, setIsActive ] = useState( false );
-	const valueRef = useRef( padding );
-	const timeoutRef = useRef();
-
-	const clearTimer = () => {
-		if ( timeoutRef.current ) {
-			window.clearTimeout( timeoutRef.current );
-		}
-	};
-
-	useEffect( () => {
-		if ( ! isShallowEqual( padding, valueRef.current ) && ! forceShow ) {
-			setIsActive( true );
-			valueRef.current = padding;
-
-			timeoutRef.current = setTimeout( () => {
-				setIsActive( false );
-			}, 400 );
-		}
-
-		return () => {
-			setIsActive( false );
-			clearTimer();
-		};
-	}, [ padding, forceShow ] );
-
-	if ( ! isActive && ! forceShow ) {
-		return null;
-	}
-
-	return (
-		<BlockPopover
-			clientId={ clientId }
-			__unstableCoverTarget
-			__unstableRefreshSize={ padding }
-			__unstablePopoverSlot="block-toolbar"
-			shift={ false }
-		>
-			<div className="block-editor__padding-visualizer" style={ style } />
-		</BlockPopover>
-	);
-}

package/src/utils/use-can-block-toolbar-be-focused.js

@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import { useSelect } from '@wordpress/data';
-import { isUnmodifiedDefaultBlock } from '@wordpress/blocks';
-
-/**
- * Internal dependencies
- */
-import { store as blockEditorStore } from '../store';
-import { unlock } from '../lock-unlock';
-
-/**
- * Returns true if the block toolbar should be able to receive focus.
- *
- * @return {boolean} Whether the block toolbar should be able to receive focus
- */
-export function useCanBlockToolbarBeFocused() {
-	return useSelect( ( select ) => {
-		const {
-			__unstableGetEditorMode,
-			getBlock,
-			getSettings,
-			getSelectedBlockClientId,
-			getFirstMultiSelectedBlockClientId,
-		} = unlock( select( blockEditorStore ) );
-
-		const selectedBlockId =
-			getFirstMultiSelectedBlockClientId() || getSelectedBlockClientId();
-		const isEmptyDefaultBlock = isUnmodifiedDefaultBlock(
-			getBlock( selectedBlockId ) || {}
-		);
-
-		// Fixed Toolbar can be focused when:
-		// - a block is selected
-		// - fixed toolbar is on
-		// Block Toolbar Popover can be focused when:
-		// - a block is selected
-		// - we are in edit mode
-		// - it is not an empty default block
-		return (
-			!! selectedBlockId &&
-			( getSettings().hasFixedToolbar ||
-				( __unstableGetEditorMode() === 'edit' &&
-					! isEmptyDefaultBlock ) )
-		);
-	}, [] );
-}