@wordpress/block-library 11.0.0 → 11.1.0

package/src/video/edit.jsx

@@ -13,6 +13,7 @@ import {
 	MediaReplaceFlow,
 	useBlockProps,
 	useBlockEditingMode,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 import { useRef, useEffect, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -30,7 +31,6 @@ import TracksEditor from './tracks-editor';
 import Tracks from './tracks';
 import { Caption } from '../utils/caption';
 import PosterImage from '../utils/poster-image';
-import { isGifVariation } from './variations';
 
 const ALLOWED_MEDIA_TYPES = [ 'video' ];
 
@@ -43,8 +43,19 @@ function VideoEdit( {
 	onReplace,
 } ) {
 	const videoPlayer = useRef();
-	const { id, controls, poster, src, tracks, width, height } = attributes;
-	const isGif = isGifVariation( attributes );
+	const {
+		id,
+		controls,
+		poster,
+		src,
+		tracks,
+		width,
+		height,
+		autoplay,
+		loop,
+		muted,
+		playsInline,
+	} = attributes;
 	// Give the <video> an explicit (non-`auto`) aspect ratio derived from the
 	// stored dimensions. The width/height attributes alone only yield
 	// `aspect-ratio: auto W/H`, whose `auto` keyword defers to the element's
@@ -54,6 +65,10 @@ function VideoEdit( {
 	// swap. A non-`auto` ratio governs the box height throughout the load.
 	const aspectRatio =
 		width && height ? `${ width } / ${ height }` : undefined;
+	const videoStyle = {
+		...( aspectRatio && { aspectRatio } ),
+		...getShadowClassesAndStyles( attributes ).style,
+	};
 	const [ temporaryURL, setTemporaryURL ] = useState( attributes.blob );
 	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
 	const blockEditingMode = useBlockEditingMode();
@@ -72,18 +87,6 @@ function VideoEdit( {
 			videoPlayer.current.load();
 		}
 	}, [ poster ] );
-
-	// The GIF variation plays like an animated GIF in the editor (the playback
-	// attributes are applied to the preview <video> below). Regular videos do
-	// not autoplay in the editor, so only nudge GIFs into playing after a
-	// source change in case the muted autoplay did not start on its own.
-	useEffect( () => {
-		if ( isGif ) {
-			// Browsers allow muted videos to be played programmatically.
-			videoPlayer.current?.play().catch( () => {} );
-		}
-	}, [ isGif, src, poster ] );
-
 	// TODO: Whether the video was obtained from the media library or was provided by URL, obtain the `videoWidth` and `videoHeight` of the video once its metadata has loaded and persist in the block attributes.
 	function onSelectVideo( media ) {
 		if ( ! media || ! media.url ) {
@@ -214,38 +217,36 @@ function VideoEdit( {
 					</BlockControls>
 				</>
 			) }
-			{ ! isGif && (
-				<InspectorControls>
-					<ToolsPanel
-						label={ __( 'Settings' ) }
-						resetAll={ () => {
+			<InspectorControls>
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							autoplay: false,
+							controls: true,
+							loop: false,
+							muted: false,
+							playsInline: false,
+							preload: 'metadata',
+							poster: undefined,
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<VideoCommonSettings
+						setAttributes={ setAttributes }
+						attributes={ attributes }
+					/>
+					<PosterImage
+						poster={ poster }
+						onChange={ ( posterImage ) =>
 							setAttributes( {
-								autoplay: false,
-								controls: true,
-								loop: false,
-								muted: false,
-								playsInline: false,
-								preload: 'metadata',
-								poster: undefined,
-							} );
-						} }
-						dropdownMenuProps={ dropdownMenuProps }
-					>
-						<VideoCommonSettings
-							setAttributes={ setAttributes }
-							attributes={ attributes }
-						/>
-						<PosterImage
-							poster={ poster }
-							onChange={ ( posterImage ) =>
-								setAttributes( {
-									poster: posterImage?.url,
-								} )
-							}
-						/>
-					</ToolsPanel>
-				</InspectorControls>
-			) }
+								poster: posterImage?.url,
+							} )
+						}
+					/>
+				</ToolsPanel>
+			</InspectorControls>
 			<figure { ...blockProps }>
 				<video
 					controls={ controls }
@@ -253,13 +254,17 @@ function VideoEdit( {
 					poster={ poster }
 					src={ src || temporaryURL }
 					ref={ videoPlayer }
-					autoPlay={ isGif }
-					loop={ isGif }
-					muted={ isGif }
-					playsInline={ isGif }
+					autoPlay={ autoplay }
+					loop={ loop }
+					muted={ muted }
+					playsInline={ playsInline }
 					width={ width }
 					height={ height }
-					style={ aspectRatio ? { aspectRatio } : undefined }
+					style={
+						Object.keys( videoStyle ).length
+							? videoStyle
+							: undefined
+					}
 				>
 					<Tracks tracks={ tracks } />
 				</video>

package/src/video/index.js

@@ -6,7 +6,6 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
-import variations from './variations';
 
 const { name } = metadata;
 
@@ -22,7 +21,6 @@ export const settings = {
 		},
 	},
 	transforms,
-	variations,
 	deprecated,
 	edit,
 	save,

package/src/video/save.jsx

@@ -2,6 +2,7 @@ import {
 	RichText,
 	useBlockProps,
 	__experimentalGetElementClassName,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
 } from '@wordpress/block-editor';
 import Tracks from './tracks';
 
@@ -27,6 +28,10 @@ export default function save( { attributes } ) {
 	// `aspect-ratio: auto W/H`, whose `auto` keyword is unreliable during load.
 	const aspectRatio =
 		width && height ? `${ width } / ${ height }` : undefined;
+	const videoStyle = {
+		...( aspectRatio && { aspectRatio } ),
+		...getShadowClassesAndStyles( attributes ).style,
+	};
 	return (
 		<figure { ...useBlockProps.save() }>
 			{ src && (
@@ -41,7 +46,11 @@ export default function save( { attributes } ) {
 					playsInline={ playsInline }
 					width={ width }
 					height={ height }
-					style={ aspectRatio ? { aspectRatio } : undefined }
+					style={
+						Object.keys( videoStyle ).length
+							? videoStyle
+							: undefined
+					}
 				>
 					<Tracks tracks={ tracks } />
 				</video>

package/src/video/tracks-editor.jsx

@@ -9,7 +9,7 @@ import {
 	Dropdown,
 	Button,
 	TextControl,
-	SelectControl,
+	SelectControl as WCSelectControl,
 	ToggleControl,
 	__experimentalGrid as Grid,
 	__experimentalHStack as HStack,
@@ -135,7 +135,7 @@ function SingleTrackEditor( {
 				/>
 			</Grid>
 			<VStack spacing="4">
-				<SelectControl
+				<WCSelectControl
 					className="block-library-video-tracks-editor__single-track-editor-kind-select"
 					options={ KIND_OPTIONS }
 					value={ kind }

package/build/gallery/flex-styles.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/gallery/flex-styles.js"],
-  "sourcesContent": ["import {\n\t__experimentalGetGapCSSValue as getGapCSSValue,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\tuseStyleOverride,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';\nimport { unlock } from '../lock-unlock';\nimport { getGalleryResponsiveFlexCSS } from './responsive-styles';\n\nconst { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );\nconst { globalStylesDataKey } = unlock( blockEditorPrivateApis );\nconst GALLERY_BLOCK_NAME = 'core/gallery';\n\n// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default\n// gap on the gallery.\nconst FALLBACK_VALUE = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;\n\nfunction getGalleryGapCustomPropertyStyle( selector, blockGap ) {\n\tlet column = FALLBACK_VALUE;\n\tif ( blockGap ) {\n\t\tcolumn =\n\t\t\ttypeof blockGap === 'string'\n\t\t\t\t? getGapCSSValue( blockGap ) || FALLBACK_VALUE\n\t\t\t\t: getGapCSSValue( blockGap?.left ) || FALLBACK_VALUE;\n\t}\n\n\t// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.\n\treturn `${ selector } {\n\t\t--wp--style--unstable-gallery-gap: ${ column === '0' ? '0px' : column }\n\t}`;\n}\n\nfunction getBlockGapValue( style ) {\n\tif ( ! Object.hasOwn( style?.spacing || {}, 'blockGap' ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn style.spacing.blockGap;\n}\n\nexport default function GalleryFlexStyles( { style, clientId } ) {\n\tconst selector = `.wp-block-gallery-${ clientId }`;\n\tconst [ viewportSettings ] = useSettings( 'viewport' );\n\tconst globalStyles = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings()?.[ globalStylesDataKey ],\n\t\t[]\n\t);\n\tconst globalGalleryStyles =\n\t\tglobalStyles?.blocks?.[ GALLERY_BLOCK_NAME ] || {};\n\tconst styleBlockGap = getBlockGapValue( style );\n\tconst globalGalleryBlockGap =\n\t\tglobalGalleryStyles?.spacing?.blockGap ?? FALLBACK_VALUE;\n\t// Prefer the block's own gap value, then Gallery global styles. Missing\n\t// values fall back to the Gallery blockGap default.\n\tconst blockGap =\n\t\tstyleBlockGap === undefined ? globalGalleryBlockGap : styleBlockGap;\n\tlet css = getGalleryGapCustomPropertyStyle( selector, blockGap );\n\tconst responsiveMediaQueries =\n\t\tgetResponsiveMediaQueries( viewportSettings );\n\n\tObject.entries( responsiveMediaQueries ).forEach(\n\t\t( [ viewport, mediaQuery ] ) => {\n\t\t\tconst styleViewportBlockGap = getBlockGapValue(\n\t\t\t\tstyle?.[ viewport ]\n\t\t\t);\n\t\t\t// Viewport-specific block values win. Gallery global viewport values\n\t\t\t// only apply when the block has no base gap, so they do not override an instance value.\n\t\t\tconst globalViewportBlockGap =\n\t\t\t\tstyleBlockGap === undefined\n\t\t\t\t\t? globalGalleryStyles?.[ viewport ]?.spacing?.blockGap\n\t\t\t\t\t: undefined;\n\t\t\tconst viewportBlockGap =\n\t\t\t\tstyleViewportBlockGap === undefined\n\t\t\t\t\t? globalViewportBlockGap\n\t\t\t\t\t: styleViewportBlockGap;\n\t\t\tif ( viewportBlockGap === undefined || viewportBlockGap === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcss += `${ mediaQuery }{${ getGalleryGapCustomPropertyStyle(\n\t\t\t\tselector,\n\t\t\t\tviewportBlockGap\n\t\t\t) }}`;\n\t\t}\n\t);\n\tcss += getGalleryResponsiveFlexCSS(\n\t\tselector,\n\t\tstyle,\n\t\tresponsiveMediaQueries\n\t);\n\n\tuseStyleOverride( { css } );\n\n\treturn null;\n}\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,0BAMO;AACP,kBAA0B;AAC1B,kCAA6D;AAC7D,yBAAuB;AACvB,+BAA4C;AAE5C,IAAM,EAAE,0BAA0B,QAAI,2BAAQ,4BAAAA,WAA8B;AAC5E,IAAM,EAAE,oBAAoB,QAAI,2BAAQ,oBAAAC,WAAuB;AAC/D,IAAM,qBAAqB;AAI3B,IAAM,iBAAiB;AAEvB,SAAS,iCAAkC,UAAU,UAAW;AAC/D,MAAI,SAAS;AACb,MAAK,UAAW;AACf,aACC,OAAO,aAAa,eACjB,oBAAAC,8BAAgB,QAAS,KAAK,qBAC9B,oBAAAA,8BAAgB,UAAU,IAAK,KAAK;AAAA,EACzC;AAGA,SAAO,GAAI,QAAS;AAAA,uCACmB,WAAW,MAAM,QAAQ,MAAO;AAAA;AAExE;AAEA,SAAS,iBAAkB,OAAQ;AAClC,MAAK,CAAE,OAAO,OAAQ,OAAO,WAAW,CAAC,GAAG,UAAW,GAAI;AAC1D,WAAO;AAAA,EACR;AAEA,SAAO,MAAM,QAAQ;AACtB;AAEe,SAAR,kBAAoC,EAAE,OAAO,SAAS,GAAI;AAChE,QAAM,WAAW,qBAAsB,QAAS;AAChD,QAAM,CAAE,gBAAiB,QAAI,iCAAa,UAAW;AACrD,QAAM,mBAAe;AAAA,IACpB,CAAE,WACD,OAAQ,oBAAAC,KAAiB,EAAE,YAAY,IAAK,mBAAoB;AAAA,IACjE,CAAC;AAAA,EACF;AACA,QAAM,sBACL,cAAc,SAAU,kBAAmB,KAAK,CAAC;AAClD,QAAM,gBAAgB,iBAAkB,KAAM;AAC9C,QAAM,wBACL,qBAAqB,SAAS,YAAY;AAG3C,QAAM,WACL,kBAAkB,SAAY,wBAAwB;AACvD,MAAI,MAAM,iCAAkC,UAAU,QAAS;AAC/D,QAAM,yBACL,0BAA2B,gBAAiB;AAE7C,SAAO,QAAS,sBAAuB,EAAE;AAAA,IACxC,CAAE,CAAE,UAAU,UAAW,MAAO;AAC/B,YAAM,wBAAwB;AAAA,QAC7B,QAAS,QAAS;AAAA,MACnB;AAGA,YAAM,yBACL,kBAAkB,SACf,sBAAuB,QAAS,GAAG,SAAS,WAC5C;AACJ,YAAM,mBACL,0BAA0B,SACvB,yBACA;AACJ,UAAK,qBAAqB,UAAa,qBAAqB,MAAO;AAClE;AAAA,MACD;AAEA,aAAO,GAAI,UAAW,IAAK;AAAA,QAC1B;AAAA,QACA;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD;AACA,aAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,4CAAkB,EAAE,IAAI,CAAE;AAE1B,SAAO;AACR;",
-  "names": ["globalStylesEnginePrivateApis", "blockEditorPrivateApis", "getGapCSSValue", "blockEditorStore"]
-}

package/build/video/variations.cjs

@@ -1,75 +0,0 @@
-"use strict";
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// packages/block-library/src/video/variations.js
-var variations_exports = {};
-__export(variations_exports, {
-  default: () => variations_default,
-  isGifVariation: () => isGifVariation
-});
-module.exports = __toCommonJS(variations_exports);
-var import_i18n = require("@wordpress/i18n");
-var import_icons = require("@wordpress/icons");
-var isGifVariation = ({
-  controls,
-  loop,
-  autoplay,
-  muted,
-  playsInline
-} = {}) => !controls && !!loop && !!autoplay && !!muted && !!playsInline;
-var variations = [
-  {
-    name: "video",
-    title: (0, import_i18n.__)("Video"),
-    description: (0, import_i18n.__)(
-      "A video with customizable playback and interaction controls."
-    ),
-    icon: import_icons.video,
-    attributes: { controls: true },
-    isActive: (blockAttributes) => !isGifVariation(blockAttributes),
-    // Not offered in the inserter; used to label a regular video and to
-    // switch a GIF back to a standard video.
-    scope: ["block", "transform"]
-  },
-  {
-    name: "gif",
-    title: (0, import_i18n.__)("GIF"),
-    description: (0, import_i18n.__)(
-      "A muted, looping video that plays automatically like an animated GIF."
-    ),
-    icon: import_icons.video,
-    keywords: [(0, import_i18n.__)("animated"), "gif"],
-    attributes: {
-      controls: false,
-      loop: true,
-      autoplay: true,
-      muted: true,
-      playsInline: true
-    },
-    isActive: (blockAttributes) => isGifVariation(blockAttributes),
-    // Created by converting an uploaded GIF, not inserted directly.
-    scope: ["block", "transform"]
-  }
-];
-var variations_default = variations;
-// Annotate the CommonJS export names for ESM import in node:
-0 && (module.exports = {
-  isGifVariation
-});
-//# sourceMappingURL=variations.cjs.map

package/build/video/variations.cjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/video/variations.js"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { video as videoIcon } from '@wordpress/icons';\n\n/**\n * Whether a set of Video block attributes describes a GIF-behaving video: a\n * muted, looping, autoplaying, inline video with no controls. An animated GIF\n * uploaded through the editor is converted to a video and presented with these\n * attributes so it plays like the original GIF.\n *\n * @param {Object}  attributes             Video block attributes.\n * @param {boolean} attributes.controls    Whether playback controls are shown.\n * @param {boolean} attributes.loop        Whether the video loops.\n * @param {boolean} attributes.autoplay    Whether the video autoplays.\n * @param {boolean} attributes.muted       Whether the video is muted.\n * @param {boolean} attributes.playsInline Whether the video plays inline.\n *\n * @return {boolean} Whether the attributes describe a GIF-behaving video.\n */\nexport const isGifVariation = ( {\n\tcontrols,\n\tloop,\n\tautoplay,\n\tmuted,\n\tplaysInline,\n} = {} ) => ! controls && !! loop && !! autoplay && !! muted && !! playsInline;\n\nconst variations = [\n\t{\n\t\tname: 'video',\n\t\ttitle: __( 'Video' ),\n\t\tdescription: __(\n\t\t\t'A video with customizable playback and interaction controls.'\n\t\t),\n\t\ticon: videoIcon,\n\t\tattributes: { controls: true },\n\t\tisActive: ( blockAttributes ) => ! isGifVariation( blockAttributes ),\n\t\t// Not offered in the inserter; used to label a regular video and to\n\t\t// switch a GIF back to a standard video.\n\t\tscope: [ 'block', 'transform' ],\n\t},\n\t{\n\t\tname: 'gif',\n\t\ttitle: __( 'GIF' ),\n\t\tdescription: __(\n\t\t\t'A muted, looping video that plays automatically like an animated GIF.'\n\t\t),\n\t\ticon: videoIcon,\n\t\tkeywords: [ __( 'animated' ), 'gif' ],\n\t\tattributes: {\n\t\t\tcontrols: false,\n\t\t\tloop: true,\n\t\t\tautoplay: true,\n\t\t\tmuted: true,\n\t\t\tplaysInline: true,\n\t\t},\n\t\tisActive: ( blockAttributes ) => isGifVariation( blockAttributes ),\n\t\t// Created by converting an uploaded GIF, not inserted directly.\n\t\tscope: [ 'block', 'transform' ],\n\t},\n];\n\nexport default variations;\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmB;AACnB,mBAAmC;AAiB5B,IAAM,iBAAiB,CAAE;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,IAAI,CAAC,MAAO,CAAE,YAAY,CAAC,CAAE,QAAQ,CAAC,CAAE,YAAY,CAAC,CAAE,SAAS,CAAC,CAAE;AAEnE,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,OAAQ;AAAA,IACnB,iBAAa;AAAA,MACZ;AAAA,IACD;AAAA,IACA,MAAM,aAAAA;AAAA,IACN,YAAY,EAAE,UAAU,KAAK;AAAA,IAC7B,UAAU,CAAE,oBAAqB,CAAE,eAAgB,eAAgB;AAAA;AAAA;AAAA,IAGnE,OAAO,CAAE,SAAS,WAAY;AAAA,EAC/B;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,WAAO,gBAAI,KAAM;AAAA,IACjB,iBAAa;AAAA,MACZ;AAAA,IACD;AAAA,IACA,MAAM,aAAAA;AAAA,IACN,UAAU,KAAE,gBAAI,UAAW,GAAG,KAAM;AAAA,IACpC,YAAY;AAAA,MACX,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAa;AAAA,IACd;AAAA,IACA,UAAU,CAAE,oBAAqB,eAAgB,eAAgB;AAAA;AAAA,IAEjE,OAAO,CAAE,SAAS,WAAY;AAAA,EAC/B;AACD;AAEA,IAAO,qBAAQ;",
-  "names": ["videoIcon"]
-}

package/build-module/gallery/flex-styles.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/gallery/flex-styles.js"],
-  "sourcesContent": ["import {\n\t__experimentalGetGapCSSValue as getGapCSSValue,\n\tprivateApis as blockEditorPrivateApis,\n\tstore as blockEditorStore,\n\tuseStyleOverride,\n\tuseSettings,\n} from '@wordpress/block-editor';\nimport { useSelect } from '@wordpress/data';\nimport { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';\nimport { unlock } from '../lock-unlock';\nimport { getGalleryResponsiveFlexCSS } from './responsive-styles';\n\nconst { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );\nconst { globalStylesDataKey } = unlock( blockEditorPrivateApis );\nconst GALLERY_BLOCK_NAME = 'core/gallery';\n\n// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default\n// gap on the gallery.\nconst FALLBACK_VALUE = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;\n\nfunction getGalleryGapCustomPropertyStyle( selector, blockGap ) {\n\tlet column = FALLBACK_VALUE;\n\tif ( blockGap ) {\n\t\tcolumn =\n\t\t\ttypeof blockGap === 'string'\n\t\t\t\t? getGapCSSValue( blockGap ) || FALLBACK_VALUE\n\t\t\t\t: getGapCSSValue( blockGap?.left ) || FALLBACK_VALUE;\n\t}\n\n\t// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.\n\treturn `${ selector } {\n\t\t--wp--style--unstable-gallery-gap: ${ column === '0' ? '0px' : column }\n\t}`;\n}\n\nfunction getBlockGapValue( style ) {\n\tif ( ! Object.hasOwn( style?.spacing || {}, 'blockGap' ) ) {\n\t\treturn undefined;\n\t}\n\n\treturn style.spacing.blockGap;\n}\n\nexport default function GalleryFlexStyles( { style, clientId } ) {\n\tconst selector = `.wp-block-gallery-${ clientId }`;\n\tconst [ viewportSettings ] = useSettings( 'viewport' );\n\tconst globalStyles = useSelect(\n\t\t( select ) =>\n\t\t\tselect( blockEditorStore ).getSettings()?.[ globalStylesDataKey ],\n\t\t[]\n\t);\n\tconst globalGalleryStyles =\n\t\tglobalStyles?.blocks?.[ GALLERY_BLOCK_NAME ] || {};\n\tconst styleBlockGap = getBlockGapValue( style );\n\tconst globalGalleryBlockGap =\n\t\tglobalGalleryStyles?.spacing?.blockGap ?? FALLBACK_VALUE;\n\t// Prefer the block's own gap value, then Gallery global styles. Missing\n\t// values fall back to the Gallery blockGap default.\n\tconst blockGap =\n\t\tstyleBlockGap === undefined ? globalGalleryBlockGap : styleBlockGap;\n\tlet css = getGalleryGapCustomPropertyStyle( selector, blockGap );\n\tconst responsiveMediaQueries =\n\t\tgetResponsiveMediaQueries( viewportSettings );\n\n\tObject.entries( responsiveMediaQueries ).forEach(\n\t\t( [ viewport, mediaQuery ] ) => {\n\t\t\tconst styleViewportBlockGap = getBlockGapValue(\n\t\t\t\tstyle?.[ viewport ]\n\t\t\t);\n\t\t\t// Viewport-specific block values win. Gallery global viewport values\n\t\t\t// only apply when the block has no base gap, so they do not override an instance value.\n\t\t\tconst globalViewportBlockGap =\n\t\t\t\tstyleBlockGap === undefined\n\t\t\t\t\t? globalGalleryStyles?.[ viewport ]?.spacing?.blockGap\n\t\t\t\t\t: undefined;\n\t\t\tconst viewportBlockGap =\n\t\t\t\tstyleViewportBlockGap === undefined\n\t\t\t\t\t? globalViewportBlockGap\n\t\t\t\t\t: styleViewportBlockGap;\n\t\t\tif ( viewportBlockGap === undefined || viewportBlockGap === null ) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tcss += `${ mediaQuery }{${ getGalleryGapCustomPropertyStyle(\n\t\t\t\tselector,\n\t\t\t\tviewportBlockGap\n\t\t\t) }}`;\n\t\t}\n\t);\n\tcss += getGalleryResponsiveFlexCSS(\n\t\tselector,\n\t\tstyle,\n\t\tresponsiveMediaQueries\n\t);\n\n\tuseStyleOverride( { css } );\n\n\treturn null;\n}\n"],
-  "mappings": ";AAAA;AAAA,EACC,gCAAgC;AAAA,EAChC,eAAe;AAAA,EACf,SAAS;AAAA,EACT;AAAA,EACA;AAAA,OACM;AACP,SAAS,iBAAiB;AAC1B,SAAS,eAAe,qCAAqC;AAC7D,SAAS,cAAc;AACvB,SAAS,mCAAmC;AAE5C,IAAM,EAAE,0BAA0B,IAAI,OAAQ,6BAA8B;AAC5E,IAAM,EAAE,oBAAoB,IAAI,OAAQ,sBAAuB;AAC/D,IAAM,qBAAqB;AAI3B,IAAM,iBAAiB;AAEvB,SAAS,iCAAkC,UAAU,UAAW;AAC/D,MAAI,SAAS;AACb,MAAK,UAAW;AACf,aACC,OAAO,aAAa,WACjB,eAAgB,QAAS,KAAK,iBAC9B,eAAgB,UAAU,IAAK,KAAK;AAAA,EACzC;AAGA,SAAO,GAAI,QAAS;AAAA,uCACmB,WAAW,MAAM,QAAQ,MAAO;AAAA;AAExE;AAEA,SAAS,iBAAkB,OAAQ;AAClC,MAAK,CAAE,OAAO,OAAQ,OAAO,WAAW,CAAC,GAAG,UAAW,GAAI;AAC1D,WAAO;AAAA,EACR;AAEA,SAAO,MAAM,QAAQ;AACtB;AAEe,SAAR,kBAAoC,EAAE,OAAO,SAAS,GAAI;AAChE,QAAM,WAAW,qBAAsB,QAAS;AAChD,QAAM,CAAE,gBAAiB,IAAI,YAAa,UAAW;AACrD,QAAM,eAAe;AAAA,IACpB,CAAE,WACD,OAAQ,gBAAiB,EAAE,YAAY,IAAK,mBAAoB;AAAA,IACjE,CAAC;AAAA,EACF;AACA,QAAM,sBACL,cAAc,SAAU,kBAAmB,KAAK,CAAC;AAClD,QAAM,gBAAgB,iBAAkB,KAAM;AAC9C,QAAM,wBACL,qBAAqB,SAAS,YAAY;AAG3C,QAAM,WACL,kBAAkB,SAAY,wBAAwB;AACvD,MAAI,MAAM,iCAAkC,UAAU,QAAS;AAC/D,QAAM,yBACL,0BAA2B,gBAAiB;AAE7C,SAAO,QAAS,sBAAuB,EAAE;AAAA,IACxC,CAAE,CAAE,UAAU,UAAW,MAAO;AAC/B,YAAM,wBAAwB;AAAA,QAC7B,QAAS,QAAS;AAAA,MACnB;AAGA,YAAM,yBACL,kBAAkB,SACf,sBAAuB,QAAS,GAAG,SAAS,WAC5C;AACJ,YAAM,mBACL,0BAA0B,SACvB,yBACA;AACJ,UAAK,qBAAqB,UAAa,qBAAqB,MAAO;AAClE;AAAA,MACD;AAEA,aAAO,GAAI,UAAW,IAAK;AAAA,QAC1B;AAAA,QACA;AAAA,MACD,CAAE;AAAA,IACH;AAAA,EACD;AACA,SAAO;AAAA,IACN;AAAA,IACA;AAAA,IACA;AAAA,EACD;AAEA,mBAAkB,EAAE,IAAI,CAAE;AAE1B,SAAO;AACR;",
-  "names": []
-}

package/build-module/video/variations.mjs

@@ -1,50 +0,0 @@
-// packages/block-library/src/video/variations.js
-import { __ } from "@wordpress/i18n";
-import { video as videoIcon } from "@wordpress/icons";
-var isGifVariation = ({
-  controls,
-  loop,
-  autoplay,
-  muted,
-  playsInline
-} = {}) => !controls && !!loop && !!autoplay && !!muted && !!playsInline;
-var variations = [
-  {
-    name: "video",
-    title: __("Video"),
-    description: __(
-      "A video with customizable playback and interaction controls."
-    ),
-    icon: videoIcon,
-    attributes: { controls: true },
-    isActive: (blockAttributes) => !isGifVariation(blockAttributes),
-    // Not offered in the inserter; used to label a regular video and to
-    // switch a GIF back to a standard video.
-    scope: ["block", "transform"]
-  },
-  {
-    name: "gif",
-    title: __("GIF"),
-    description: __(
-      "A muted, looping video that plays automatically like an animated GIF."
-    ),
-    icon: videoIcon,
-    keywords: [__("animated"), "gif"],
-    attributes: {
-      controls: false,
-      loop: true,
-      autoplay: true,
-      muted: true,
-      playsInline: true
-    },
-    isActive: (blockAttributes) => isGifVariation(blockAttributes),
-    // Created by converting an uploaded GIF, not inserted directly.
-    scope: ["block", "transform"]
-  }
-];
-var variations_default = variations;
-export {
-  variations_default as default,
-  isGifVariation
-};
-//# sourceMappingURL=variations.mjs.map

package/build-module/video/variations.mjs.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../src/video/variations.js"],
-  "sourcesContent": ["import { __ } from '@wordpress/i18n';\nimport { video as videoIcon } from '@wordpress/icons';\n\n/**\n * Whether a set of Video block attributes describes a GIF-behaving video: a\n * muted, looping, autoplaying, inline video with no controls. An animated GIF\n * uploaded through the editor is converted to a video and presented with these\n * attributes so it plays like the original GIF.\n *\n * @param {Object}  attributes             Video block attributes.\n * @param {boolean} attributes.controls    Whether playback controls are shown.\n * @param {boolean} attributes.loop        Whether the video loops.\n * @param {boolean} attributes.autoplay    Whether the video autoplays.\n * @param {boolean} attributes.muted       Whether the video is muted.\n * @param {boolean} attributes.playsInline Whether the video plays inline.\n *\n * @return {boolean} Whether the attributes describe a GIF-behaving video.\n */\nexport const isGifVariation = ( {\n\tcontrols,\n\tloop,\n\tautoplay,\n\tmuted,\n\tplaysInline,\n} = {} ) => ! controls && !! loop && !! autoplay && !! muted && !! playsInline;\n\nconst variations = [\n\t{\n\t\tname: 'video',\n\t\ttitle: __( 'Video' ),\n\t\tdescription: __(\n\t\t\t'A video with customizable playback and interaction controls.'\n\t\t),\n\t\ticon: videoIcon,\n\t\tattributes: { controls: true },\n\t\tisActive: ( blockAttributes ) => ! isGifVariation( blockAttributes ),\n\t\t// Not offered in the inserter; used to label a regular video and to\n\t\t// switch a GIF back to a standard video.\n\t\tscope: [ 'block', 'transform' ],\n\t},\n\t{\n\t\tname: 'gif',\n\t\ttitle: __( 'GIF' ),\n\t\tdescription: __(\n\t\t\t'A muted, looping video that plays automatically like an animated GIF.'\n\t\t),\n\t\ticon: videoIcon,\n\t\tkeywords: [ __( 'animated' ), 'gif' ],\n\t\tattributes: {\n\t\t\tcontrols: false,\n\t\t\tloop: true,\n\t\t\tautoplay: true,\n\t\t\tmuted: true,\n\t\t\tplaysInline: true,\n\t\t},\n\t\tisActive: ( blockAttributes ) => isGifVariation( blockAttributes ),\n\t\t// Created by converting an uploaded GIF, not inserted directly.\n\t\tscope: [ 'block', 'transform' ],\n\t},\n];\n\nexport default variations;\n"],
-  "mappings": ";AAAA,SAAS,UAAU;AACnB,SAAS,SAAS,iBAAiB;AAiB5B,IAAM,iBAAiB,CAAE;AAAA,EAC/B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACD,IAAI,CAAC,MAAO,CAAE,YAAY,CAAC,CAAE,QAAQ,CAAC,CAAE,YAAY,CAAC,CAAE,SAAS,CAAC,CAAE;AAEnE,IAAM,aAAa;AAAA,EAClB;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,OAAQ;AAAA,IACnB,aAAa;AAAA,MACZ;AAAA,IACD;AAAA,IACA,MAAM;AAAA,IACN,YAAY,EAAE,UAAU,KAAK;AAAA,IAC7B,UAAU,CAAE,oBAAqB,CAAE,eAAgB,eAAgB;AAAA;AAAA;AAAA,IAGnE,OAAO,CAAE,SAAS,WAAY;AAAA,EAC/B;AAAA,EACA;AAAA,IACC,MAAM;AAAA,IACN,OAAO,GAAI,KAAM;AAAA,IACjB,aAAa;AAAA,MACZ;AAAA,IACD;AAAA,IACA,MAAM;AAAA,IACN,UAAU,CAAE,GAAI,UAAW,GAAG,KAAM;AAAA,IACpC,YAAY;AAAA,MACX,UAAU;AAAA,MACV,MAAM;AAAA,MACN,UAAU;AAAA,MACV,OAAO;AAAA,MACP,aAAa;AAAA,IACd;AAAA,IACA,UAAU,CAAE,oBAAqB,eAAgB,eAAgB;AAAA;AAAA,IAEjE,OAAO,CAAE,SAAS,WAAY;AAAA,EAC/B;AACD;AAEA,IAAO,qBAAQ;",
-  "names": []
-}

package/src/gallery/flex-styles.js

@@ -1,99 +0,0 @@
-import {
-	__experimentalGetGapCSSValue as getGapCSSValue,
-	privateApis as blockEditorPrivateApis,
-	store as blockEditorStore,
-	useStyleOverride,
-	useSettings,
-} from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { privateApis as globalStylesEnginePrivateApis } from '@wordpress/global-styles-engine';
-import { unlock } from '../lock-unlock';
-import { getGalleryResponsiveFlexCSS } from './responsive-styles';
-
-const { getResponsiveMediaQueries } = unlock( globalStylesEnginePrivateApis );
-const { globalStylesDataKey } = unlock( blockEditorPrivateApis );
-const GALLERY_BLOCK_NAME = 'core/gallery';
-
-// --gallery-block--gutter-size is deprecated. --wp--style--gallery-gap-default should be used by themes that want to set a default
-// gap on the gallery.
-const FALLBACK_VALUE = `var( --wp--style--gallery-gap-default, var( --gallery-block--gutter-size, var( --wp--style--block-gap, 0.5em ) ) )`;
-
-function getGalleryGapCustomPropertyStyle( selector, blockGap ) {
-	let column = FALLBACK_VALUE;
-	if ( blockGap ) {
-		column =
-			typeof blockGap === 'string'
-				? getGapCSSValue( blockGap ) || FALLBACK_VALUE
-				: getGapCSSValue( blockGap?.left ) || FALLBACK_VALUE;
-	}
-
-	// The unstable gallery gap calculation requires a real value (such as `0px`) and not `0`.
-	return `${ selector } {
-		--wp--style--unstable-gallery-gap: ${ column === '0' ? '0px' : column }
-	}`;
-}
-
-function getBlockGapValue( style ) {
-	if ( ! Object.hasOwn( style?.spacing || {}, 'blockGap' ) ) {
-		return undefined;
-	}
-
-	return style.spacing.blockGap;
-}
-
-export default function GalleryFlexStyles( { style, clientId } ) {
-	const selector = `.wp-block-gallery-${ clientId }`;
-	const [ viewportSettings ] = useSettings( 'viewport' );
-	const globalStyles = useSelect(
-		( select ) =>
-			select( blockEditorStore ).getSettings()?.[ globalStylesDataKey ],
-		[]
-	);
-	const globalGalleryStyles =
-		globalStyles?.blocks?.[ GALLERY_BLOCK_NAME ] || {};
-	const styleBlockGap = getBlockGapValue( style );
-	const globalGalleryBlockGap =
-		globalGalleryStyles?.spacing?.blockGap ?? FALLBACK_VALUE;
-	// Prefer the block's own gap value, then Gallery global styles. Missing
-	// values fall back to the Gallery blockGap default.
-	const blockGap =
-		styleBlockGap === undefined ? globalGalleryBlockGap : styleBlockGap;
-	let css = getGalleryGapCustomPropertyStyle( selector, blockGap );
-	const responsiveMediaQueries =
-		getResponsiveMediaQueries( viewportSettings );
-
-	Object.entries( responsiveMediaQueries ).forEach(
-		( [ viewport, mediaQuery ] ) => {
-			const styleViewportBlockGap = getBlockGapValue(
-				style?.[ viewport ]
-			);
-			// Viewport-specific block values win. Gallery global viewport values
-			// only apply when the block has no base gap, so they do not override an instance value.
-			const globalViewportBlockGap =
-				styleBlockGap === undefined
-					? globalGalleryStyles?.[ viewport ]?.spacing?.blockGap
-					: undefined;
-			const viewportBlockGap =
-				styleViewportBlockGap === undefined
-					? globalViewportBlockGap
-					: styleViewportBlockGap;
-			if ( viewportBlockGap === undefined || viewportBlockGap === null ) {
-				return;
-			}
-
-			css += `${ mediaQuery }{${ getGalleryGapCustomPropertyStyle(
-				selector,
-				viewportBlockGap
-			) }}`;
-		}
-	);
-	css += getGalleryResponsiveFlexCSS(
-		selector,
-		style,
-		responsiveMediaQueries
-	);
-
-	useStyleOverride( { css } );
-
-	return null;
-}

package/src/video/test/variations.js

@@ -1,63 +0,0 @@
-import { describe, expect, it } from 'vitest';
-import variations, { isGifVariation } from '../variations';
-
-const GIF_ATTRIBUTES = {
-	controls: false,
-	loop: true,
-	autoplay: true,
-	muted: true,
-	playsInline: true,
-};
-
-describe( 'isGifVariation', () => {
-	it( 'matches a muted, looping, autoplaying, inline video without controls', () => {
-		expect( isGifVariation( GIF_ATTRIBUTES ) ).toBe( true );
-	} );
-
-	it( 'does not match when controls are shown', () => {
-		expect( isGifVariation( { ...GIF_ATTRIBUTES, controls: true } ) ).toBe(
-			false
-		);
-	} );
-
-	it.each( [ 'loop', 'autoplay', 'muted', 'playsInline' ] )(
-		'does not match when %s is missing',
-		( attribute ) => {
-			expect(
-				isGifVariation( { ...GIF_ATTRIBUTES, [ attribute ]: false } )
-			).toBe( false );
-		}
-	);
-
-	it( 'does not match a default video block', () => {
-		expect( isGifVariation( { controls: true } ) ).toBe( false );
-	} );
-
-	it( 'handles missing attributes', () => {
-		expect( isGifVariation() ).toBe( false );
-		expect( isGifVariation( {} ) ).toBe( false );
-	} );
-} );
-
-describe( 'video variations', () => {
-	it( 'registers exactly one active variation for any attributes', () => {
-		const active = variations.filter( ( variation ) =>
-			variation.isActive( GIF_ATTRIBUTES )
-		);
-		expect( active ).toHaveLength( 1 );
-		expect( active[ 0 ].name ).toBe( 'gif' );
-
-		const activeForVideo = variations.filter( ( variation ) =>
-			variation.isActive( { controls: true } )
-		);
-		expect( activeForVideo ).toHaveLength( 1 );
-		expect( activeForVideo[ 0 ].name ).toBe( 'video' );
-	} );
-
-	it( 'keeps the GIF variation out of the inserter', () => {
-		const gif = variations.find(
-			( variation ) => variation.name === 'gif'
-		);
-		expect( gif.scope ).not.toContain( 'inserter' );
-	} );
-} );

package/src/video/variations.js

@@ -1,62 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { video as videoIcon } from '@wordpress/icons';
-
-/**
- * Whether a set of Video block attributes describes a GIF-behaving video: a
- * muted, looping, autoplaying, inline video with no controls. An animated GIF
- * uploaded through the editor is converted to a video and presented with these
- * attributes so it plays like the original GIF.
- *
- * @param {Object}  attributes             Video block attributes.
- * @param {boolean} attributes.controls    Whether playback controls are shown.
- * @param {boolean} attributes.loop        Whether the video loops.
- * @param {boolean} attributes.autoplay    Whether the video autoplays.
- * @param {boolean} attributes.muted       Whether the video is muted.
- * @param {boolean} attributes.playsInline Whether the video plays inline.
- *
- * @return {boolean} Whether the attributes describe a GIF-behaving video.
- */
-export const isGifVariation = ( {
-	controls,
-	loop,
-	autoplay,
-	muted,
-	playsInline,
-} = {} ) => ! controls && !! loop && !! autoplay && !! muted && !! playsInline;
-
-const variations = [
-	{
-		name: 'video',
-		title: __( 'Video' ),
-		description: __(
-			'A video with customizable playback and interaction controls.'
-		),
-		icon: videoIcon,
-		attributes: { controls: true },
-		isActive: ( blockAttributes ) => ! isGifVariation( blockAttributes ),
-		// Not offered in the inserter; used to label a regular video and to
-		// switch a GIF back to a standard video.
-		scope: [ 'block', 'transform' ],
-	},
-	{
-		name: 'gif',
-		title: __( 'GIF' ),
-		description: __(
-			'A muted, looping video that plays automatically like an animated GIF.'
-		),
-		icon: videoIcon,
-		keywords: [ __( 'animated' ), 'gif' ],
-		attributes: {
-			controls: false,
-			loop: true,
-			autoplay: true,
-			muted: true,
-			playsInline: true,
-		},
-		isActive: ( blockAttributes ) => isGifVariation( blockAttributes ),
-		// Created by converting an uploaded GIF, not inserted directly.
-		scope: [ 'block', 'transform' ],
-	},
-];
-
-export default variations;