@wordpress/block-library 7.12.2-next.d6164808d3.0 → 7.14.0

package/src/post-featured-image/overlay.js

@@ -0,0 +1,118 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	RangeControl,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+import {
+	InspectorControls,
+	withColors,
+	__experimentalColorGradientSettingsDropdown as ColorGradientSettingsDropdown,
+	__experimentalUseGradient,
+	__experimentalUseMultipleOriginColorsAndGradients as useMultipleOriginColorsAndGradients,
+	__experimentalUseBorderProps as useBorderProps,
+} from '@wordpress/block-editor';
+import { compose } from '@wordpress/compose';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { dimRatioToClass } from './utils';
+
+const Overlay = ( {
+	clientId,
+	attributes,
+	setAttributes,
+	overlayColor,
+	setOverlayColor,
+} ) => {
+	const { dimRatio } = attributes;
+	const { gradientClass, gradientValue, setGradient } =
+		__experimentalUseGradient();
+	const colorGradientSettings = useMultipleOriginColorsAndGradients();
+
+	const borderProps = useBorderProps( attributes );
+	const overlayStyles = {
+		backgroundColor: overlayColor.color,
+		backgroundImage: gradientValue,
+		...borderProps.style,
+	};
+
+	return (
+		<>
+			<span
+				aria-hidden="true"
+				className={ classnames(
+					'wp-block-post-featured-image__overlay',
+					dimRatioToClass( dimRatio ),
+					{
+						[ overlayColor.class ]: overlayColor.class,
+						'has-background-dim': dimRatio !== undefined,
+						'has-background-gradient': gradientValue,
+						[ gradientClass ]: gradientClass,
+					}
+				) }
+				style={ overlayStyles }
+			/>
+			<InspectorControls __experimentalGroup="color">
+				<ColorGradientSettingsDropdown
+					__experimentalHasMultipleOrigins
+					__experimentalIsRenderedInSidebar
+					settings={ [
+						{
+							colorValue: overlayColor.color,
+							gradientValue,
+							label: __( 'Overlay' ),
+							onColorChange: setOverlayColor,
+							onGradientChange: setGradient,
+							isShownByDefault: true,
+							resetAllFilter: () => ( {
+								overlayColor: undefined,
+								customOverlayColor: undefined,
+								gradient: undefined,
+								customGradient: undefined,
+							} ),
+						},
+					] }
+					panelId={ clientId }
+					{ ...colorGradientSettings }
+				/>
+				<ToolsPanelItem
+					hasValue={ () => dimRatio !== undefined }
+					label={ __( 'Overlay opacity' ) }
+					onDeselect={ () => setAttributes( { dimRatio: 0 } ) }
+					resetAllFilter={ () => ( {
+						dimRatio: 0,
+					} ) }
+					isShownByDefault
+					panelId={ clientId }
+				>
+					<RangeControl
+						label={ __( 'Overlay opacity' ) }
+						value={ dimRatio }
+						onChange={ ( newDimRatio ) =>
+							setAttributes( {
+								dimRatio: newDimRatio,
+							} )
+						}
+						min={ 0 }
+						max={ 100 }
+						step={ 10 }
+						required
+					/>
+				</ToolsPanelItem>
+			</InspectorControls>
+		</>
+	);
+};
+
+export default compose( [
+	withColors( { overlayColor: 'background-color' } ),
+] )( Overlay );

package/src/post-featured-image/style.scss

@@ -16,4 +16,26 @@
 	&.alignfull img {
 		width: 100%;
 	}
+
+	.wp-block-post-featured-image__overlay {
+		&.has-background-dim {
+			position: absolute;
+			inset: 0;
+			background-color: $black;
+
+			@at-root .wp-block-post-featured-image {
+				position: relative;
+			}
+		}
+
+		&.has-background-gradient {
+			background-color: transparent;
+		}
+
+		@for $i from 0 through 10 {
+			&.has-background-dim-#{ $i * 10 } {
+				opacity: $i * 0.1;
+			}
+		}
+	}
 }

package/src/post-featured-image/utils.js

@@ -0,0 +1,12 @@
+/**
+ * Generates the opacity/dim class based on given number.
+ *
+ * @param {number} ratio Dim/opacity number.
+ *
+ * @return {string} Generated class.
+ */
+export function dimRatioToClass( ratio ) {
+	return ratio === undefined
+		? null
+		: 'has-background-dim-' + 10 * Math.round( ratio / 10 );
+}

package/src/post-navigation-link/index.js

@@ -1,6 +1,7 @@
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import variations from './variations';
@@ -12,3 +13,5 @@ export const settings = {
 	edit,
 	variations,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/post-navigation-link/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/post-template/edit.js

@@ -17,7 +17,7 @@ import {
 	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import { Spinner } from '@wordpress/components';
-import { store as coreStore } from '@wordpress/core-data';
+import { store as coreStore, useEntityRecords } from '@wordpress/core-data';
 
 const TEMPLATE = [
 	[ 'core/post-title' ],
@@ -85,6 +85,13 @@ export default function PostTemplateEdit( {
 			inherit,
 			taxQuery,
 			parents,
+			pages,
+			// We gather extra query args to pass to the REST API call.
+			// This way extenders of Query Loop can add their own query args,
+			// and have accurate previews in the editor.
+			// Noting though that these args should either be supported by the
+			// REST API or be handled by custom REST filters like `rest_{$this->post_type}_query`.
+			...restQueryArgs
 		} = {},
 		queryContext = [ { page: 1 } ],
 		templateSlug,
@@ -95,6 +102,18 @@ export default function PostTemplateEdit( {
 	const [ { page } ] = queryContext;
 	const [ activeBlockContextId, setActiveBlockContextId ] = useState();
 
+	let categorySlug = null;
+	if ( templateSlug?.startsWith( 'category-' ) ) {
+		categorySlug = templateSlug.replace( 'category-', '' );
+	}
+	const { records: categories, hasResolved: hasResolvedCategories } =
+		useEntityRecords( 'taxonomy', 'category', {
+			context: 'view',
+			per_page: -1,
+			_fields: [ 'id' ],
+			slug: categorySlug,
+		} );
+
 	const { posts, blocks } = useSelect(
 		( select ) => {
 			const { getEntityRecords, getTaxonomies } = select( coreStore );
@@ -155,13 +174,21 @@ export default function PostTemplateEdit( {
 				if ( templateSlug?.startsWith( 'archive-' ) ) {
 					query.postType = templateSlug.replace( 'archive-', '' );
 					postType = query.postType;
+				} else if ( !! categorySlug && hasResolvedCategories ) {
+					query.taxQuery = {
+						category: categories.map( ( { id } ) => id ),
+					};
+					taxQuery = query.taxQuery;
 				}
 			}
 			// When we preview Query Loop blocks we should prefer the current
 			// block's postType, which is passed through block context.
 			const usedPostType = previewPostType || postType;
 			return {
-				posts: getEntityRecords( 'postType', usedPostType, query ),
+				posts: getEntityRecords( 'postType', usedPostType, {
+					...query,
+					...restQueryArgs,
+				} ),
 				blocks: getBlocks( clientId ),
 			};
 		},
@@ -181,7 +208,11 @@ export default function PostTemplateEdit( {
 			templateSlug,
 			taxQuery,
 			parents,
+			restQueryArgs,
 			previewPostType,
+			categories,
+			categorySlug,
+			hasResolvedCategories,
 		]
 	);
 	const blockContexts = useMemo(

package/src/post-template/index.js

@@ -6,6 +6,7 @@ import { layout } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import save from './save';
@@ -18,3 +19,5 @@ export const settings = {
 	edit,
 	save,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/post-template/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/post-terms/edit.js

@@ -58,7 +58,6 @@ export default function PostTermsEdit( {
 	);
 	const { postTerms, hasPostTerms, isLoading } = usePostTerms( {
 		postId,
-		postType,
 		term: selectedTerm,
 	} );
 	const hasPost = postId && postType;

package/src/post-terms/index.js

@@ -7,6 +7,7 @@ import { addFilter } from '@wordpress/hooks';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import enhanceVariations from './hooks';
@@ -19,9 +20,12 @@ export const settings = {
 	edit,
 };
 
-// Importing this file includes side effects. This is added in block-library/package.json under sideEffects
-addFilter(
-	'blocks.registerBlockType',
-	'core/template-part',
-	enhanceVariations
-);
+export const init = () => {
+	addFilter(
+		'blocks.registerBlockType',
+		'core/template-part',
+		enhanceVariations
+	);
+
+	return initBlock( { name, metadata, settings } );
+};

package/src/post-terms/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/post-terms/use-post-terms.js

@@ -1,12 +1,12 @@
 /**
  * WordPress dependencies
  */
-import { useEntityProp, store as coreStore } from '@wordpress/core-data';
+import { store as coreStore } from '@wordpress/core-data';
 import { useSelect } from '@wordpress/data';
 
-export default function usePostTerms( { postId, postType, term } ) {
-	const { rest_base: restBase, slug } = term;
-	const [ termIds ] = useEntityProp( 'postType', postType, restBase, postId );
+export default function usePostTerms( { postId, term } ) {
+	const { slug } = term;
+
 	return useSelect(
 		( select ) => {
 			const visible = term?.visibility?.publicly_queryable;
@@ -17,30 +17,25 @@ export default function usePostTerms( { postId, postType, term } ) {
 					hasPostTerms: false,
 				};
 			}
-			if ( ! termIds ) {
-				// Waiting for post terms to be fetched.
-				return { isLoading: term?.postTerms?.includes( postType ) };
-			}
-			if ( ! termIds.length ) {
-				return { isLoading: false };
-			}
+
 			const { getEntityRecords, isResolving } = select( coreStore );
 			const taxonomyArgs = [
 				'taxonomy',
 				slug,
 				{
-					include: termIds,
+					post: postId,
+					per_page: -1,
 					context: 'view',
 				},
 			];
 			const terms = getEntityRecords( ...taxonomyArgs );
-			const _isLoading = isResolving( 'getEntityRecords', taxonomyArgs );
+
 			return {
 				postTerms: terms,
-				isLoading: _isLoading,
+				isLoading: isResolving( 'getEntityRecords', taxonomyArgs ),
 				hasPostTerms: !! terms?.length,
 			};
 		},
-		[ termIds, term?.visibility?.publicly_queryable ]
+		[ postId, term?.visibility?.publicly_queryable ]
 	);
 }

package/src/post-title/index.js

@@ -6,6 +6,7 @@ import { title as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import metadata from './block.json';
 import edit from './edit';
 import deprecated from './deprecated';
@@ -18,3 +19,5 @@ export const settings = {
 	edit,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/post-title/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/preformatted/index.js

@@ -7,6 +7,7 @@ import { preformatted as icon } from '@wordpress/icons';
 /**
  * Internal dependencies
  */
+import initBlock from '../utils/init-block';
 import edit from './edit';
 import metadata from './block.json';
 import save from './save';
@@ -37,3 +38,5 @@ export const settings = {
 		};
 	},
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/preformatted/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/preformatted/transforms.native.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
 
 const transforms = {
 	...webTransforms,

package/src/pullquote/index.js

@@ -7,6 +7,7 @@ import { pullquote 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';
@@ -34,3 +35,5 @@ export const settings = {
 	save,
 	deprecated,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/pullquote/init.js

@@ -0,0 +1,6 @@
+/**
+ * Internal dependencies
+ */
+import { init } from './';
+
+export default init();

package/src/pullquote/transforms.native.js

@@ -2,7 +2,7 @@
  * Internal dependencies
  */
 import webTransforms from './transforms.js';
-import transformationCategories from '../transformationCategories';
+import transformationCategories from '../utils/transformation-categories';
 
 const transforms = {
 	...webTransforms,

package/src/query/block.json

@@ -37,6 +37,9 @@
 			"default": {
 				"type": "list"
 			}
+		},
+		"namespace": {
+			"type": "string"
 		}
 	},
 	"providesContext": {