@wordpress/block-library 8.10.0 → 8.11.0

package/src/utils/interactivity/hooks.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { h, options, createContext } from 'preact';
+import { h, options, createContext, cloneElement } from 'preact';
 import { useRef, useMemo } from 'preact/hooks';
 /**
  * Internal dependencies
@@ -13,40 +13,109 @@ const context = createContext( {} );
 
 // WordPress Directives.
 const directiveMap = {};
-export const directive = ( name, cb ) => {
+const directivePriorities = {};
+export const directive = ( name, cb, { priority = 10 } = {} ) => {
 	directiveMap[ name ] = cb;
+	directivePriorities[ name ] = priority;
 };
 
 // Resolve the path to some property of the store object.
 const resolve = ( path, ctx ) => {
-	// If path starts with !, remove it and save a flag.
-	const hasNegationOperator =
-		path[ 0 ] === '!' && !! ( path = path.slice( 1 ) );
 	let current = { ...store, context: ctx };
 	path.split( '.' ).forEach( ( p ) => ( current = current[ p ] ) );
-	return hasNegationOperator ? ! current : current;
+	return current;
 };
 
 // Generate the evaluate function.
 const getEvaluate =
 	( { ref } = {} ) =>
 	( path, extraArgs = {} ) => {
+		// If path starts with !, remove it and save a flag.
+		const hasNegationOperator =
+			path[ 0 ] === '!' && !! ( path = path.slice( 1 ) );
 		const value = resolve( path, extraArgs.context );
-		return typeof value === 'function'
-			? value( {
-					ref: ref.current,
-					...store,
-					...extraArgs,
-			  } )
-			: value;
+		const returnValue =
+			typeof value === 'function'
+				? value( {
+						ref: ref.current,
+						...store,
+						...extraArgs,
+				  } )
+				: value;
+		return hasNegationOperator ? ! returnValue : returnValue;
 	};
 
+// Separate directives by priority. The resulting array contains objects
+// of directives grouped by same priority, and sorted in ascending order.
+const usePriorityLevels = ( directives ) =>
+	useMemo( () => {
+		const byPriority = Object.entries( directives ).reduce(
+			( acc, [ name, values ] ) => {
+				const priority = directivePriorities[ name ];
+				if ( ! acc[ priority ] ) acc[ priority ] = {};
+				acc[ priority ][ name ] = values;
+
+				return acc;
+			},
+			{}
+		);
+
+		return Object.entries( byPriority )
+			.sort( ( [ p1 ], [ p2 ] ) => p1 - p2 )
+			.map( ( [ , obj ] ) => obj );
+	}, [ directives ] );
+
 // Directive wrapper.
 const Directive = ( { type, directives, props: originalProps } ) => {
 	const ref = useRef( null );
 	const element = h( type, { ...originalProps, ref } );
-	const props = { ...originalProps, children: element };
 	const evaluate = useMemo( () => getEvaluate( { ref } ), [] );
+
+	// Add wrappers recursively for each priority level.
+	const byPriorityLevel = usePriorityLevels( directives );
+	return (
+		<RecursivePriorityLevel
+			directives={ byPriorityLevel }
+			element={ element }
+			evaluate={ evaluate }
+			originalProps={ originalProps }
+		/>
+	);
+};
+
+// Priority level wrapper.
+const RecursivePriorityLevel = ( {
+	directives: [ directives, ...rest ],
+	element,
+	evaluate,
+	originalProps,
+} ) => {
+	// This element needs to be a fresh copy so we are not modifying an already
+	// rendered element with Preact's internal properties initialized. This
+	// prevents an error with changes in `element.props.children` not being
+	// reflected in `element.__k`.
+	element = cloneElement( element );
+
+	// Recursively render the wrapper for the next priority level.
+	//
+	// Note that, even though we're instantiating a vnode with a
+	// `RecursivePriorityLevel` here, its render function will not be executed
+	// just yet. Actually, it will be delayed until the current render function
+	// has finished. That ensures directives in the current priorty level have
+	// run (and thus modified the passed `element`) before the next level.
+	const children =
+		rest.length > 0 ? (
+			<RecursivePriorityLevel
+				directives={ rest }
+				element={ element }
+				evaluate={ evaluate }
+				originalProps={ originalProps }
+			/>
+		) : (
+			element
+		);
+
+	const props = { ...originalProps, children };
 	const directiveArgs = { directives, props, element, context, evaluate };
 
 	for ( const d in directives ) {

package/src/utils/interactivity/portals.js

@@ -0,0 +1,98 @@
+/**
+ * External dependencies
+ */
+import { createElement, render } from 'preact';
+
+/**
+ * @param {import('../../src/index').RenderableProps<{ context: any }>} props
+ */
+function ContextProvider( props ) {
+	this.getChildContext = () => props.context;
+	return props.children;
+}
+
+/**
+ * Portal component
+ *
+ * @this {import('./internal').Component}
+ * @param {object | null | undefined} props
+ *
+ *                                          TODO: use createRoot() instead of fake root
+ */
+function Portal( props ) {
+	const _this = this;
+	const container = props._container;
+
+	_this.componentWillUnmount = function () {
+		render( null, _this._temp );
+		_this._temp = null;
+		_this._container = null;
+	};
+
+	// When we change container we should clear our old container and
+	// indicate a new mount.
+	if ( _this._container && _this._container !== container ) {
+		_this.componentWillUnmount();
+	}
+
+	// When props.vnode is undefined/false/null we are dealing with some kind of
+	// conditional vnode. This should not trigger a render.
+	if ( props._vnode ) {
+		if ( ! _this._temp ) {
+			_this._container = container;
+
+			// Create a fake DOM parent node that manages a subset of `container`'s children:
+			_this._temp = {
+				nodeType: 1,
+				parentNode: container,
+				childNodes: [],
+				appendChild( child ) {
+					this.childNodes.push( child );
+					_this._container.appendChild( child );
+				},
+				insertBefore( child ) {
+					this.childNodes.push( child );
+					_this._container.appendChild( child );
+				},
+				removeChild( child ) {
+					this.childNodes.splice(
+						// eslint-disable-next-line no-bitwise
+						this.childNodes.indexOf( child ) >>> 1,
+						1
+					);
+					_this._container.removeChild( child );
+				},
+			};
+		}
+
+		// Render our wrapping element into temp.
+		render(
+			createElement(
+				ContextProvider,
+				{ context: _this.context },
+				props._vnode
+			),
+			_this._temp
+		);
+	}
+	// When we come from a conditional render, on a mounted
+	// portal we should clear the DOM.
+	else if ( _this._temp ) {
+		_this.componentWillUnmount();
+	}
+}
+
+/**
+ * Create a `Portal` to continue rendering the vnode tree at a different DOM node
+ *
+ * @param {import('./internal').VNode}         vnode     The vnode to render
+ * @param {import('./internal').PreactElement} container The DOM node to continue rendering in to.
+ */
+export function createPortal( vnode, container ) {
+	const el = createElement( Portal, {
+		_vnode: vnode,
+		_container: container,
+	} );
+	el.containerInfo = container;
+	return el;
+}

package/build/file/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/file/utils.js"],"names":["browserSupportsPdfs","window","navigator","userAgent","indexOf","maxTouchPoints","ActiveXObject","createActiveXObject","type","ax","e","undefined","hidePdfEmbedsOnUnsupportedBrowsers","embeds","document","getElementsByClassName","Array","from","forEach","embed","style","display"],"mappings":";;;;;;;AAAA;AACA;AACA;AACA;AACA;AACA;AACO,MAAMA,mBAAmB,GAAG,MAAM;AACxC;AACA,MAAKC,MAAM,CAACC,SAAP,CAAiBC,SAAjB,CAA2BC,OAA3B,CAAoC,MAApC,IAA+C,CAAC,CAArD,EAAyD;AACxD,WAAO,KAAP;AACA,GAJuC,CAMxC;;;AACA,MAAKH,MAAM,CAACC,SAAP,CAAiBC,SAAjB,CAA2BC,OAA3B,CAAoC,SAApC,IAAkD,CAAC,CAAxD,EAA4D;AAC3D,WAAO,KAAP;AACA,GATuC,CAWxC;;;AACA,MACCH,MAAM,CAACC,SAAP,CAAiBC,SAAjB,CAA2BC,OAA3B,CAAoC,WAApC,IAAoD,CAAC,CAArD,IACAH,MAAM,CAACC,SAAP,CAAiBG,cADjB,IAEAJ,MAAM,CAACC,SAAP,CAAiBG,cAAjB,GAAkC,CAHnC,EAIE;AACD,WAAO,KAAP;AACA,GAlBuC,CAoBxC;;;AACA,MACC,CAAC,EAAIJ,MAAM,CAACK,aAAP,IAAwB,mBAAmBL,MAA/C,CAAD,IACA,EACCM,mBAAmB,CAAE,aAAF,CAAnB,IACAA,mBAAmB,CAAE,aAAF,CAFpB,CAFD,EAME;AACD,WAAO,KAAP;AACA;;AAED,SAAO,IAAP;AACA,CAhCM;AAkCP;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,MAAMA,mBAAmB,GAAKC,IAAF,IAAY;AACvC,MAAIC,EAAJ;;AACA,MAAI;AACHA,IAAAA,EAAE,GAAG,IAAIR,MAAM,CAACK,aAAX,CAA0BE,IAA1B,CAAL;AACA,GAFD,CAEE,OAAQE,CAAR,EAAY;AACbD,IAAAA,EAAE,GAAGE,SAAL;AACA;;AACD,SAAOF,EAAP;AACA,CARD;AAUA;AACA;AACA;AACA;;;AACO,MAAMG,kCAAkC,GAAG,MAAM;AACvD,MAAK,CAAEZ,mBAAmB,EAA1B,EAA+B;AAC9B,UAAMa,MAAM,GAAGC,QAAQ,CAACC,sBAAT,CACd,sBADc,CAAf;AAGAC,IAAAA,KAAK,CAACC,IAAN,CAAYJ,MAAZ,EAAqBK,OAArB,CAAgCC,KAAF,IAAa;AAC1CA,MAAAA,KAAK,CAACC,KAAN,CAAYC,OAAZ,GAAsB,MAAtB;AACA,KAFD;AAGA;AACD,CATM","sourcesContent":["/**\n * Uses a combination of user agent matching and feature detection to determine whether\n * the current browser supports rendering PDFs inline.\n *\n * @return {boolean} Whether or not the browser supports inline PDFs.\n */\nexport const browserSupportsPdfs = () => {\n\t// Most mobile devices include \"Mobi\" in their UA.\n\tif ( window.navigator.userAgent.indexOf( 'Mobi' ) > -1 ) {\n\t\treturn false;\n\t}\n\n\t// Android tablets are the noteable exception.\n\tif ( window.navigator.userAgent.indexOf( 'Android' ) > -1 ) {\n\t\treturn false;\n\t}\n\n\t// iPad pretends to be a Mac.\n\tif (\n\t\twindow.navigator.userAgent.indexOf( 'Macintosh' ) > -1 &&\n\t\twindow.navigator.maxTouchPoints &&\n\t\twindow.navigator.maxTouchPoints > 2\n\t) {\n\t\treturn false;\n\t}\n\n\t// IE only supports PDFs when there's an ActiveX object available for it.\n\tif (\n\t\t!! ( window.ActiveXObject || 'ActiveXObject' in window ) &&\n\t\t! (\n\t\t\tcreateActiveXObject( 'AcroPDF.PDF' ) ||\n\t\t\tcreateActiveXObject( 'PDF.PdfCtrl' )\n\t\t)\n\t) {\n\t\treturn false;\n\t}\n\n\treturn true;\n};\n\n/**\n * Helper function for creating ActiveX objects, catching any errors that are thrown\n * when it's generated.\n *\n * @param {string} type The name of the ActiveX object to create.\n * @return {window.ActiveXObject|undefined} The generated ActiveXObject, or null if it failed.\n */\nconst createActiveXObject = ( type ) => {\n\tlet ax;\n\ttry {\n\t\tax = new window.ActiveXObject( type );\n\t} catch ( e ) {\n\t\tax = undefined;\n\t}\n\treturn ax;\n};\n\n/**\n * Hides all .wp-block-file__embed elements on the document. This function is only intended\n * to be run on the front-end, it may have weird side effects running in the block editor.\n */\nexport const hidePdfEmbedsOnUnsupportedBrowsers = () => {\n\tif ( ! browserSupportsPdfs() ) {\n\t\tconst embeds = document.getElementsByClassName(\n\t\t\t'wp-block-file__embed'\n\t\t);\n\t\tArray.from( embeds ).forEach( ( embed ) => {\n\t\t\tembed.style.display = 'none';\n\t\t} );\n\t}\n};\n"]}

package/build-module/file/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["@wordpress/block-library/src/file/utils.js"],"names":["browserSupportsPdfs","window","navigator","userAgent","indexOf","maxTouchPoints","ActiveXObject","createActiveXObject","type","ax","e","undefined","hidePdfEmbedsOnUnsupportedBrowsers","embeds","document","getElementsByClassName","Array","from","forEach","embed","style","display"],"mappings":"AAAA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMA,mBAAmB,GAAG,MAAM;AACxC;AACA,MAAKC,MAAM,CAACC,SAAP,CAAiBC,SAAjB,CAA2BC,OAA3B,CAAoC,MAApC,IAA+C,CAAC,CAArD,EAAyD;AACxD,WAAO,KAAP;AACA,GAJuC,CAMxC;;;AACA,MAAKH,MAAM,CAACC,SAAP,CAAiBC,SAAjB,CAA2BC,OAA3B,CAAoC,SAApC,IAAkD,CAAC,CAAxD,EAA4D;AAC3D,WAAO,KAAP;AACA,GATuC,CAWxC;;;AACA,MACCH,MAAM,CAACC,SAAP,CAAiBC,SAAjB,CAA2BC,OAA3B,CAAoC,WAApC,IAAoD,CAAC,CAArD,IACAH,MAAM,CAACC,SAAP,CAAiBG,cADjB,IAEAJ,MAAM,CAACC,SAAP,CAAiBG,cAAjB,GAAkC,CAHnC,EAIE;AACD,WAAO,KAAP;AACA,GAlBuC,CAoBxC;;;AACA,MACC,CAAC,EAAIJ,MAAM,CAACK,aAAP,IAAwB,mBAAmBL,MAA/C,CAAD,IACA,EACCM,mBAAmB,CAAE,aAAF,CAAnB,IACAA,mBAAmB,CAAE,aAAF,CAFpB,CAFD,EAME;AACD,WAAO,KAAP;AACA;;AAED,SAAO,IAAP;AACA,CAhCM;AAkCP;AACA;AACA;AACA;AACA;AACA;AACA;;AACA,MAAMA,mBAAmB,GAAKC,IAAF,IAAY;AACvC,MAAIC,EAAJ;;AACA,MAAI;AACHA,IAAAA,EAAE,GAAG,IAAIR,MAAM,CAACK,aAAX,CAA0BE,IAA1B,CAAL;AACA,GAFD,CAEE,OAAQE,CAAR,EAAY;AACbD,IAAAA,EAAE,GAAGE,SAAL;AACA;;AACD,SAAOF,EAAP;AACA,CARD;AAUA;AACA;AACA;AACA;;;AACA,OAAO,MAAMG,kCAAkC,GAAG,MAAM;AACvD,MAAK,CAAEZ,mBAAmB,EAA1B,EAA+B;AAC9B,UAAMa,MAAM,GAAGC,QAAQ,CAACC,sBAAT,CACd,sBADc,CAAf;AAGAC,IAAAA,KAAK,CAACC,IAAN,CAAYJ,MAAZ,EAAqBK,OAArB,CAAgCC,KAAF,IAAa;AAC1CA,MAAAA,KAAK,CAACC,KAAN,CAAYC,OAAZ,GAAsB,MAAtB;AACA,KAFD;AAGA;AACD,CATM","sourcesContent":["/**\n * Uses a combination of user agent matching and feature detection to determine whether\n * the current browser supports rendering PDFs inline.\n *\n * @return {boolean} Whether or not the browser supports inline PDFs.\n */\nexport const browserSupportsPdfs = () => {\n\t// Most mobile devices include \"Mobi\" in their UA.\n\tif ( window.navigator.userAgent.indexOf( 'Mobi' ) > -1 ) {\n\t\treturn false;\n\t}\n\n\t// Android tablets are the noteable exception.\n\tif ( window.navigator.userAgent.indexOf( 'Android' ) > -1 ) {\n\t\treturn false;\n\t}\n\n\t// iPad pretends to be a Mac.\n\tif (\n\t\twindow.navigator.userAgent.indexOf( 'Macintosh' ) > -1 &&\n\t\twindow.navigator.maxTouchPoints &&\n\t\twindow.navigator.maxTouchPoints > 2\n\t) {\n\t\treturn false;\n\t}\n\n\t// IE only supports PDFs when there's an ActiveX object available for it.\n\tif (\n\t\t!! ( window.ActiveXObject || 'ActiveXObject' in window ) &&\n\t\t! (\n\t\t\tcreateActiveXObject( 'AcroPDF.PDF' ) ||\n\t\t\tcreateActiveXObject( 'PDF.PdfCtrl' )\n\t\t)\n\t) {\n\t\treturn false;\n\t}\n\n\treturn true;\n};\n\n/**\n * Helper function for creating ActiveX objects, catching any errors that are thrown\n * when it's generated.\n *\n * @param {string} type The name of the ActiveX object to create.\n * @return {window.ActiveXObject|undefined} The generated ActiveXObject, or null if it failed.\n */\nconst createActiveXObject = ( type ) => {\n\tlet ax;\n\ttry {\n\t\tax = new window.ActiveXObject( type );\n\t} catch ( e ) {\n\t\tax = undefined;\n\t}\n\treturn ax;\n};\n\n/**\n * Hides all .wp-block-file__embed elements on the document. This function is only intended\n * to be run on the front-end, it may have weird side effects running in the block editor.\n */\nexport const hidePdfEmbedsOnUnsupportedBrowsers = () => {\n\tif ( ! browserSupportsPdfs() ) {\n\t\tconst embeds = document.getElementsByClassName(\n\t\t\t'wp-block-file__embed'\n\t\t);\n\t\tArray.from( embeds ).forEach( ( embed ) => {\n\t\t\tembed.style.display = 'none';\n\t\t} );\n\t}\n};\n"]}