@wordpress/block-library 7.16.0 → 7.18.0

package/src/table/state.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { get, mapValues, every, pick } from 'lodash';
+import { get, mapValues, pick } from 'lodash';
 
 const INHERITED_COLUMN_ATTRIBUTES = [ 'align' ];
 
@@ -281,7 +281,7 @@ export function deleteColumn( state, { columnIndex } ) {
 }
 
 /**
- * Toggles the existance of a section.
+ * Toggles the existence of a section.
  *
  * @param {Object} state       Current table state.
  * @param {string} sectionName Name of the section to toggle.
@@ -309,7 +309,7 @@ export function toggleSection( state, sectionName ) {
  * @return {boolean} True if the table section is empty, false otherwise.
  */
 export function isEmptyTableSection( section ) {
-	return ! section || ! section.length || every( section, isEmptyRow );
+	return ! section || ! section.length || section.every( isEmptyRow );
 }
 
 /**

package/src/table-of-contents/edit.js

@@ -21,7 +21,6 @@ import {
 	ToolbarButton,
 	ToolbarGroup,
 } from '@wordpress/components';
-import { useDisabled } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
 import { __unstableStripHTML as stripHTML } from '@wordpress/dom';
 import { renderToString, useEffect } from '@wordpress/element';
@@ -55,7 +54,6 @@ export default function TableOfContentsEdit( {
 	setAttributes,
 } ) {
 	const blockProps = useBlockProps();
-	const disabledRef = useDisabled();
 
 	const canInsertList = useSelect(
 		( select ) => {
@@ -295,7 +293,7 @@ export default function TableOfContentsEdit( {
 	return (
 		<>
 			<nav { ...blockProps }>
-				<ol ref={ disabledRef }>
+				<ol inert="true">
 					<TableOfContentsList nestedHeadingList={ headingTree } />
 				</ol>
 			</nav>

package/src/tag-cloud/block.json

@@ -40,6 +40,14 @@
 		"spacing": {
 			"margin": true,
 			"padding": true
+		},
+		"typography": {
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalLetterSpacing": true
 		}
 	},
 	"editorStyle": "wp-block-tag-cloud-editor"

package/src/tag-cloud/edit.js

@@ -168,7 +168,7 @@ function TagCloudEdit( { attributes, setAttributes, taxonomies } ) {
 			{ inspectorControls }
 			<div { ...useBlockProps() }>
 				<ServerSideRender
-					key="tag-cloud"
+					skipBlockSupportAttributes
 					block="core/tag-cloud"
 					attributes={ attributes }
 				/>

package/src/tag-cloud/style.scss

@@ -1,4 +1,7 @@
 .wp-block-tag-cloud {
+	// This block has customizable padding, border-box makes that more predictable.
+	box-sizing: border-box;
+
 	&.aligncenter {
 		text-align: center;
 		justify-content: center;

package/src/template-part/index.php

@@ -189,6 +189,10 @@ function build_template_part_block_area_variations() {
  * @return array Array containing the block variation objects.
  */
 function build_template_part_block_instance_variations() {
+	// Block themes are unavailable during installation.
+	if ( wp_installing() ) {
+		return array();
+	}
 	$variations     = array();
 	$template_parts = get_block_templates(
 		array(

package/src/utils/clean-empty-object.js

@@ -1,9 +1,7 @@
 /**
  * External dependencies
  */
-import { isEmpty, mapValues, pickBy } from 'lodash';
-
-const identity = ( x ) => x;
+import { isEmpty, mapValues } from 'lodash';
 
 /**
  * Removed empty nodes from nested objects.
@@ -19,9 +17,10 @@ const cleanEmptyObject = ( object ) => {
 	) {
 		return object;
 	}
-	const cleanedNestedObjects = pickBy(
-		mapValues( object, cleanEmptyObject ),
-		identity
+	const cleanedNestedObjects = Object.fromEntries(
+		Object.entries( mapValues( object, cleanEmptyObject ) ).filter(
+			( [ , value ] ) => Boolean( value )
+		)
 	);
 	return isEmpty( cleanedNestedObjects ) ? undefined : cleanedNestedObjects;
 };

package/src/video/deprecated.js

@@ -0,0 +1,57 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+/**
+ * Internal dependencies
+ */
+import metadata from './block.json';
+import Tracks from './tracks';
+
+const { attributes: blockAttributes } = metadata;
+
+// In #41140 support was added to global styles for caption elements which added a `wp-element-caption` classname
+// to the video figcaption element.
+const v1 = {
+	attributes: blockAttributes,
+	save( { attributes } ) {
+		const {
+			autoplay,
+			caption,
+			controls,
+			loop,
+			muted,
+			poster,
+			preload,
+			src,
+			playsInline,
+			tracks,
+		} = attributes;
+		return (
+			<figure { ...useBlockProps.save() }>
+				{ src && (
+					<video
+						autoPlay={ autoplay }
+						controls={ controls }
+						loop={ loop }
+						muted={ muted }
+						poster={ poster }
+						preload={ preload !== 'metadata' ? preload : undefined }
+						src={ src }
+						playsInline={ playsInline }
+					>
+						<Tracks tracks={ tracks } />
+					</video>
+				) }
+				{ ! RichText.isEmpty( caption ) && (
+					<RichText.Content tagName="figcaption" value={ caption } />
+				) }
+			</figure>
+		);
+	},
+};
+
+const deprecated = [ v1 ];
+
+export default deprecated;

package/src/video/edit.js

@@ -14,6 +14,7 @@ import {
 	PanelBody,
 	Spinner,
 	Placeholder,
+	ToolbarButton,
 } from '@wordpress/components';
 import {
 	BlockControls,
@@ -28,11 +29,11 @@ import {
 	store as blockEditorStore,
 	__experimentalGetElementClassName,
 } from '@wordpress/block-editor';
-import { useRef, useEffect } from '@wordpress/element';
+import { useRef, useEffect, useState, useCallback } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
-import { useInstanceId } from '@wordpress/compose';
+import { useInstanceId, usePrevious } from '@wordpress/compose';
 import { useDispatch, useSelect } from '@wordpress/data';
-import { video as icon } from '@wordpress/icons';
+import { video as icon, caption as captionIcon } from '@wordpress/icons';
 import { createBlock, getDefaultBlockName } from '@wordpress/blocks';
 import { store as noticesStore } from '@wordpress/notices';
 
@@ -76,6 +77,8 @@ function VideoEdit( {
 	const videoPlayer = useRef();
 	const posterImageButton = useRef();
 	const { id, caption, controls, poster, src, tracks } = attributes;
+	const prevCaption = usePrevious( caption );
+	const [ showCaption, setShowCaption ] = useState( !! caption );
 	const isTemporaryVideo = ! id && isBlobURL( src );
 	const mediaUpload = useSelect(
 		( select ) => select( blockEditorStore ).getSettings().mediaUpload,
@@ -103,6 +106,30 @@ function VideoEdit( {
 		}
 	}, [ poster ] );
 
+	// We need to show the caption when changes come from
+	// history navigation(undo/redo).
+	useEffect( () => {
+		if ( caption && ! prevCaption ) {
+			setShowCaption( true );
+		}
+	}, [ caption, prevCaption ] );
+
+	// Focus the caption when we click to add one.
+	const captionRef = useCallback(
+		( node ) => {
+			if ( node && ! caption ) {
+				node.focus();
+			}
+		},
+		[ caption ]
+	);
+
+	useEffect( () => {
+		if ( ! isSelected && ! caption ) {
+			setShowCaption( false );
+		}
+	}, [ isSelected, caption ] );
+
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
 			// In this case there was an error
@@ -112,6 +139,7 @@ function VideoEdit( {
 				src: undefined,
 				id: undefined,
 				poster: undefined,
+				caption: undefined,
 			} );
 			return;
 		}
@@ -123,6 +151,7 @@ function VideoEdit( {
 			id: media.id,
 			poster:
 				media.image?.src !== media.icon ? media.image?.src : undefined,
+			caption: media.caption,
 		} );
 	}
 
@@ -186,6 +215,23 @@ function VideoEdit( {
 	return (
 		<>
 			<BlockControls group="block">
+				<ToolbarButton
+					onClick={ () => {
+						setShowCaption( ! showCaption );
+						if ( showCaption && caption ) {
+							setAttributes( { caption: undefined } );
+						}
+					} }
+					icon={ captionIcon }
+					isPressed={ showCaption }
+					label={
+						showCaption
+							? __( 'Remove caption' )
+							: __( 'Add caption' )
+					}
+				/>
+			</BlockControls>
+			<BlockControls>
 				<TracksEditor
 					tracks={ tracks }
 					onChange={ ( newTracks ) => {
@@ -278,26 +324,28 @@ function VideoEdit( {
 					</video>
 				</Disabled>
 				{ isTemporaryVideo && <Spinner /> }
-				{ ( ! RichText.isEmpty( caption ) || isSelected ) && (
-					<RichText
-						tagName="figcaption"
-						className={ __experimentalGetElementClassName(
-							'caption'
-						) }
-						aria-label={ __( 'Video caption text' ) }
-						placeholder={ __( 'Add caption' ) }
-						value={ caption }
-						onChange={ ( value ) =>
-							setAttributes( { caption: value } )
-						}
-						inlineToolbar
-						__unstableOnSplitAtEnd={ () =>
-							insertBlocksAfter(
-								createBlock( getDefaultBlockName() )
-							)
-						}
-					/>
-				) }
+				{ showCaption &&
+					( ! RichText.isEmpty( caption ) || isSelected ) && (
+						<RichText
+							tagName="figcaption"
+							className={ __experimentalGetElementClassName(
+								'caption'
+							) }
+							aria-label={ __( 'Video caption text' ) }
+							ref={ captionRef }
+							placeholder={ __( 'Add caption' ) }
+							value={ caption }
+							onChange={ ( value ) =>
+								setAttributes( { caption: value } )
+							}
+							inlineToolbar
+							__unstableOnSplitAtEnd={ () =>
+								insertBlocksAfter(
+									createBlock( getDefaultBlockName() )
+								)
+							}
+						/>
+					) }
 			</figure>
 		</>
 	);

package/src/video/index.js

@@ -8,6 +8,7 @@ import { video as icon } from '@wordpress/icons';
  * Internal dependencies
  */
 import initBlock from '../utils/init-block';
+import deprecated from './deprecated';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -27,6 +28,7 @@ export const settings = {
 		},
 	},
 	transforms,
+	deprecated,
 	edit,
 	save,
 };

package/src/video/tracks-editor.js

@@ -7,11 +7,9 @@ import {
 	MenuItem,
 	FormFileUpload,
 	MenuGroup,
+	ToolbarGroup,
 	ToolbarButton,
 	Dropdown,
-	SVG,
-	Rect,
-	Path,
 	Button,
 	TextControl,
 	SelectControl,
@@ -38,23 +36,6 @@ const KIND_OPTIONS = [
 	{ label: __( 'Metadata' ), value: 'metadata' },
 ];
 
-const captionIcon = (
-	<SVG width="18" height="14" viewBox="0 0 18 14" role="img" fill="none">
-		<Rect
-			x="0.75"
-			y="0.75"
-			width="16.5"
-			height="12.5"
-			rx="1.25"
-			stroke="black"
-			strokeWidth="1.5"
-			fill="none"
-		/>
-		<Path d="M3 7H15" stroke="black" strokeWidth="1.5" />
-		<Path d="M3 10L15 10" stroke="black" strokeWidth="1.5" />
-	</SVG>
-);
-
 function TrackList( { tracks, onEditPress } ) {
 	let content;
 	if ( tracks.length === 0 ) {
@@ -200,14 +181,17 @@ export default function TracksEditor( { tracks = [], onChange } ) {
 		<Dropdown
 			contentClassName="block-library-video-tracks-editor"
 			renderToggle={ ( { isOpen, onToggle } ) => (
-				<ToolbarButton
-					label={ __( 'Text tracks' ) }
-					showTooltip
-					aria-expanded={ isOpen }
-					aria-haspopup="true"
-					onClick={ onToggle }
-					icon={ captionIcon }
-				/>
+				<ToolbarGroup>
+					<ToolbarButton
+						label={ __( 'Text tracks' ) }
+						showTooltip
+						aria-expanded={ isOpen }
+						aria-haspopup="true"
+						onClick={ onToggle }
+					>
+						{ __( 'Text tracks' ) }
+					</ToolbarButton>
+				</ToolbarGroup>
 			) }
 			renderContent={ () => {
 				if ( trackBeingEdited !== null ) {

package/build/paragraph/drop-zone.js

@@ -1,99 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = DropZone;
-
-var _element = require("@wordpress/element");
-
-var _data = require("@wordpress/data");
-
-var _blockEditor = require("@wordpress/block-editor");
-
-var _compose = require("@wordpress/compose");
-
-var _components = require("@wordpress/components");
-
-/**
- * WordPress dependencies
- */
-const animateVariants = {
-  hide: {
-    opacity: 0,
-    scaleY: 0.75
-  },
-  show: {
-    opacity: 1,
-    scaleY: 1
-  },
-  exit: {
-    opacity: 0,
-    scaleY: 0.9
-  }
-};
-
-function DropZone(_ref) {
-  let {
-    paragraphElement,
-    clientId
-  } = _ref;
-  const {
-    rootClientId,
-    blockIndex
-  } = (0, _data.useSelect)(select => {
-    const selectors = select(_blockEditor.store);
-    return {
-      rootClientId: selectors.getBlockRootClientId(clientId),
-      blockIndex: selectors.getBlockIndex(clientId)
-    };
-  }, [clientId]);
-  const onBlockDrop = (0, _blockEditor.__experimentalUseOnBlockDrop)(rootClientId, blockIndex, {
-    action: 'replace'
-  });
-  const [isDragging, setIsDragging] = (0, _element.useState)(false);
-  const [isVisible, setIsVisible] = (0, _element.useState)(false);
-  const popoverRef = (0, _compose.__experimentalUseDropZone)({
-    onDragStart: () => {
-      setIsDragging(true);
-    },
-    onDragEnd: () => {
-      setIsDragging(false);
-    }
-  });
-  const dropZoneRef = (0, _compose.__experimentalUseDropZone)({
-    onDrop: onBlockDrop,
-    onDragEnter: () => {
-      setIsVisible(true);
-    },
-    onDragLeave: () => {
-      setIsVisible(false);
-    }
-  });
-  const reducedMotion = (0, _compose.useReducedMotion)();
-  return (0, _element.createElement)(_components.Popover, {
-    anchor: paragraphElement,
-    animate: false,
-    placement: "top-start",
-    focusOnMount: false,
-    flip: false,
-    resize: false,
-    className: "wp-block-paragraph__drop-zone",
-    ref: popoverRef
-  }, isDragging ? (0, _element.createElement)("div", {
-    className: "wp-block-paragraph__drop-zone-backdrop",
-    ref: dropZoneRef,
-    style: {
-      width: paragraphElement === null || paragraphElement === void 0 ? void 0 : paragraphElement.offsetWidth,
-      height: paragraphElement === null || paragraphElement === void 0 ? void 0 : paragraphElement.offsetHeight
-    }
-  }, (0, _element.createElement)(_components.__unstableAnimatePresence, null, isVisible ? (0, _element.createElement)(_components.__unstableMotion.div, {
-    key: "drop-zone-foreground",
-    "data-testid": "empty-paragraph-drop-zone",
-    initial: reducedMotion ? animateVariants.show : animateVariants.hide,
-    animate: animateVariants.show,
-    exit: reducedMotion ? animateVariants.show : animateVariants.exit,
-    className: "wp-block-paragraph__drop-zone-foreground"
-  }) : null)) : null);
-}
-//# sourceMappingURL=drop-zone.js.map

package/build/paragraph/drop-zone.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/paragraph/drop-zone.js"],"names":["animateVariants","hide","opacity","scaleY","show","exit","DropZone","paragraphElement","clientId","rootClientId","blockIndex","select","selectors","blockEditorStore","getBlockRootClientId","getBlockIndex","onBlockDrop","action","isDragging","setIsDragging","isVisible","setIsVisible","popoverRef","onDragStart","onDragEnd","dropZoneRef","onDrop","onDragEnter","onDragLeave","reducedMotion","width","offsetWidth","height","offsetHeight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__experimentalUseOnBlockDrop as useOnBlockDrop,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\t__experimentalUseDropZone as useDropZone,\n\tuseReducedMotion,\n} from '@wordpress/compose';\nimport {\n\tPopover,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\n\nconst animateVariants = {\n\thide: { opacity: 0, scaleY: 0.75 },\n\tshow: { opacity: 1, scaleY: 1 },\n\texit: { opacity: 0, scaleY: 0.9 },\n};\n\nexport default function DropZone( { paragraphElement, clientId } ) {\n\tconst { rootClientId, blockIndex } = useSelect(\n\t\t( select ) => {\n\t\t\tconst selectors = select( blockEditorStore );\n\t\t\treturn {\n\t\t\t\trootClientId: selectors.getBlockRootClientId( clientId ),\n\t\t\t\tblockIndex: selectors.getBlockIndex( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst onBlockDrop = useOnBlockDrop( rootClientId, blockIndex, {\n\t\taction: 'replace',\n\t} );\n\tconst [ isDragging, setIsDragging ] = useState( false );\n\tconst [ isVisible, setIsVisible ] = useState( false );\n\tconst popoverRef = useDropZone( {\n\t\tonDragStart: () => {\n\t\t\tsetIsDragging( true );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tsetIsDragging( false );\n\t\t},\n\t} );\n\tconst dropZoneRef = useDropZone( {\n\t\tonDrop: onBlockDrop,\n\t\tonDragEnter: () => {\n\t\t\tsetIsVisible( true );\n\t\t},\n\t\tonDragLeave: () => {\n\t\t\tsetIsVisible( false );\n\t\t},\n\t} );\n\tconst reducedMotion = useReducedMotion();\n\n\treturn (\n\t\t<Popover\n\t\t\tanchor={ paragraphElement }\n\t\t\tanimate={ false }\n\t\t\tplacement=\"top-start\"\n\t\t\tfocusOnMount={ false }\n\t\t\tflip={ false }\n\t\t\tresize={ false }\n\t\t\tclassName=\"wp-block-paragraph__drop-zone\"\n\t\t\tref={ popoverRef }\n\t\t>\n\t\t\t{ isDragging ? (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wp-block-paragraph__drop-zone-backdrop\"\n\t\t\t\t\tref={ dropZoneRef }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: paragraphElement?.offsetWidth,\n\t\t\t\t\t\theight: paragraphElement?.offsetHeight,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{ isVisible ? (\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tkey=\"drop-zone-foreground\"\n\t\t\t\t\t\t\t\tdata-testid=\"empty-paragraph-drop-zone\"\n\t\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\t\treducedMotion\n\t\t\t\t\t\t\t\t\t\t? animateVariants.show\n\t\t\t\t\t\t\t\t\t\t: animateVariants.hide\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tanimate={ animateVariants.show }\n\t\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\t\treducedMotion\n\t\t\t\t\t\t\t\t\t\t? animateVariants.show\n\t\t\t\t\t\t\t\t\t\t: animateVariants.exit\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tclassName=\"wp-block-paragraph__drop-zone-foreground\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : null }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\t\t\t) : null }\n\t\t</Popover>\n\t);\n}\n"]}

package/build-module/paragraph/drop-zone.js

@@ -1,88 +0,0 @@
-import { createElement } from "@wordpress/element";
-
-/**
- * WordPress dependencies
- */
-import { useState } from '@wordpress/element';
-import { useSelect } from '@wordpress/data';
-import { __experimentalUseOnBlockDrop as useOnBlockDrop, store as blockEditorStore } from '@wordpress/block-editor';
-import { __experimentalUseDropZone as useDropZone, useReducedMotion } from '@wordpress/compose';
-import { Popover, __unstableMotion as motion, __unstableAnimatePresence as AnimatePresence } from '@wordpress/components';
-const animateVariants = {
-  hide: {
-    opacity: 0,
-    scaleY: 0.75
-  },
-  show: {
-    opacity: 1,
-    scaleY: 1
-  },
-  exit: {
-    opacity: 0,
-    scaleY: 0.9
-  }
-};
-export default function DropZone(_ref) {
-  let {
-    paragraphElement,
-    clientId
-  } = _ref;
-  const {
-    rootClientId,
-    blockIndex
-  } = useSelect(select => {
-    const selectors = select(blockEditorStore);
-    return {
-      rootClientId: selectors.getBlockRootClientId(clientId),
-      blockIndex: selectors.getBlockIndex(clientId)
-    };
-  }, [clientId]);
-  const onBlockDrop = useOnBlockDrop(rootClientId, blockIndex, {
-    action: 'replace'
-  });
-  const [isDragging, setIsDragging] = useState(false);
-  const [isVisible, setIsVisible] = useState(false);
-  const popoverRef = useDropZone({
-    onDragStart: () => {
-      setIsDragging(true);
-    },
-    onDragEnd: () => {
-      setIsDragging(false);
-    }
-  });
-  const dropZoneRef = useDropZone({
-    onDrop: onBlockDrop,
-    onDragEnter: () => {
-      setIsVisible(true);
-    },
-    onDragLeave: () => {
-      setIsVisible(false);
-    }
-  });
-  const reducedMotion = useReducedMotion();
-  return createElement(Popover, {
-    anchor: paragraphElement,
-    animate: false,
-    placement: "top-start",
-    focusOnMount: false,
-    flip: false,
-    resize: false,
-    className: "wp-block-paragraph__drop-zone",
-    ref: popoverRef
-  }, isDragging ? createElement("div", {
-    className: "wp-block-paragraph__drop-zone-backdrop",
-    ref: dropZoneRef,
-    style: {
-      width: paragraphElement === null || paragraphElement === void 0 ? void 0 : paragraphElement.offsetWidth,
-      height: paragraphElement === null || paragraphElement === void 0 ? void 0 : paragraphElement.offsetHeight
-    }
-  }, createElement(AnimatePresence, null, isVisible ? createElement(motion.div, {
-    key: "drop-zone-foreground",
-    "data-testid": "empty-paragraph-drop-zone",
-    initial: reducedMotion ? animateVariants.show : animateVariants.hide,
-    animate: animateVariants.show,
-    exit: reducedMotion ? animateVariants.show : animateVariants.exit,
-    className: "wp-block-paragraph__drop-zone-foreground"
-  }) : null)) : null);
-}
-//# sourceMappingURL=drop-zone.js.map

package/build-module/paragraph/drop-zone.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/paragraph/drop-zone.js"],"names":["useState","useSelect","__experimentalUseOnBlockDrop","useOnBlockDrop","store","blockEditorStore","__experimentalUseDropZone","useDropZone","useReducedMotion","Popover","__unstableMotion","motion","__unstableAnimatePresence","AnimatePresence","animateVariants","hide","opacity","scaleY","show","exit","DropZone","paragraphElement","clientId","rootClientId","blockIndex","select","selectors","getBlockRootClientId","getBlockIndex","onBlockDrop","action","isDragging","setIsDragging","isVisible","setIsVisible","popoverRef","onDragStart","onDragEnd","dropZoneRef","onDrop","onDragEnter","onDragLeave","reducedMotion","width","offsetWidth","height","offsetHeight"],"mappings":"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","sourcesContent":["/**\n * WordPress dependencies\n */\nimport { useState } from '@wordpress/element';\nimport { useSelect } from '@wordpress/data';\nimport {\n\t__experimentalUseOnBlockDrop as useOnBlockDrop,\n\tstore as blockEditorStore,\n} from '@wordpress/block-editor';\nimport {\n\t__experimentalUseDropZone as useDropZone,\n\tuseReducedMotion,\n} from '@wordpress/compose';\nimport {\n\tPopover,\n\t__unstableMotion as motion,\n\t__unstableAnimatePresence as AnimatePresence,\n} from '@wordpress/components';\n\nconst animateVariants = {\n\thide: { opacity: 0, scaleY: 0.75 },\n\tshow: { opacity: 1, scaleY: 1 },\n\texit: { opacity: 0, scaleY: 0.9 },\n};\n\nexport default function DropZone( { paragraphElement, clientId } ) {\n\tconst { rootClientId, blockIndex } = useSelect(\n\t\t( select ) => {\n\t\t\tconst selectors = select( blockEditorStore );\n\t\t\treturn {\n\t\t\t\trootClientId: selectors.getBlockRootClientId( clientId ),\n\t\t\t\tblockIndex: selectors.getBlockIndex( clientId ),\n\t\t\t};\n\t\t},\n\t\t[ clientId ]\n\t);\n\tconst onBlockDrop = useOnBlockDrop( rootClientId, blockIndex, {\n\t\taction: 'replace',\n\t} );\n\tconst [ isDragging, setIsDragging ] = useState( false );\n\tconst [ isVisible, setIsVisible ] = useState( false );\n\tconst popoverRef = useDropZone( {\n\t\tonDragStart: () => {\n\t\t\tsetIsDragging( true );\n\t\t},\n\t\tonDragEnd: () => {\n\t\t\tsetIsDragging( false );\n\t\t},\n\t} );\n\tconst dropZoneRef = useDropZone( {\n\t\tonDrop: onBlockDrop,\n\t\tonDragEnter: () => {\n\t\t\tsetIsVisible( true );\n\t\t},\n\t\tonDragLeave: () => {\n\t\t\tsetIsVisible( false );\n\t\t},\n\t} );\n\tconst reducedMotion = useReducedMotion();\n\n\treturn (\n\t\t<Popover\n\t\t\tanchor={ paragraphElement }\n\t\t\tanimate={ false }\n\t\t\tplacement=\"top-start\"\n\t\t\tfocusOnMount={ false }\n\t\t\tflip={ false }\n\t\t\tresize={ false }\n\t\t\tclassName=\"wp-block-paragraph__drop-zone\"\n\t\t\tref={ popoverRef }\n\t\t>\n\t\t\t{ isDragging ? (\n\t\t\t\t<div\n\t\t\t\t\tclassName=\"wp-block-paragraph__drop-zone-backdrop\"\n\t\t\t\t\tref={ dropZoneRef }\n\t\t\t\t\tstyle={ {\n\t\t\t\t\t\twidth: paragraphElement?.offsetWidth,\n\t\t\t\t\t\theight: paragraphElement?.offsetHeight,\n\t\t\t\t\t} }\n\t\t\t\t>\n\t\t\t\t\t<AnimatePresence>\n\t\t\t\t\t\t{ isVisible ? (\n\t\t\t\t\t\t\t<motion.div\n\t\t\t\t\t\t\t\tkey=\"drop-zone-foreground\"\n\t\t\t\t\t\t\t\tdata-testid=\"empty-paragraph-drop-zone\"\n\t\t\t\t\t\t\t\tinitial={\n\t\t\t\t\t\t\t\t\treducedMotion\n\t\t\t\t\t\t\t\t\t\t? animateVariants.show\n\t\t\t\t\t\t\t\t\t\t: animateVariants.hide\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tanimate={ animateVariants.show }\n\t\t\t\t\t\t\t\texit={\n\t\t\t\t\t\t\t\t\treducedMotion\n\t\t\t\t\t\t\t\t\t\t? animateVariants.show\n\t\t\t\t\t\t\t\t\t\t: animateVariants.exit\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t\tclassName=\"wp-block-paragraph__drop-zone-foreground\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t) : null }\n\t\t\t\t\t</AnimatePresence>\n\t\t\t\t</div>\n\t\t\t) : null }\n\t\t</Popover>\n\t);\n}\n"]}