@wordpress/block-library 7.13.1-next.957ca95e4c.0 → 7.14.1

package/src/post-excerpt/index.js

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

package/src/post-excerpt/init.js

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

package/src/post-featured-image/block.json

@@ -32,6 +32,22 @@
 		"linkTarget": {
 			"type": "string",
 			"default": "_self"
+		},
+		"overlayColor": {
+			"type": "string"
+		},
+		"customOverlayColor": {
+			"type": "string"
+		},
+		"dimRatio": {
+			"type": "number",
+			"default": 0
+		},
+		"gradient": {
+			"type": "string"
+		},
+		"customGradient": {
+			"type": "string"
 		}
 	},
 	"usesContext": [ "postId", "postType", "queryId" ],

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

@@ -33,6 +33,7 @@ import { store as noticesStore } from '@wordpress/notices';
  * Internal dependencies
  */
 import DimensionControls from './dimension-controls';
+import Overlay from './overlay';
 
 const ALLOWED_MEDIA_TYPES = [ 'image' ];
 
@@ -170,7 +171,14 @@ function PostFeaturedImageDisplay( {
 		return (
 			<>
 				{ controls }
-				<div { ...blockProps }>{ placeholder() }</div>
+				<div { ...blockProps }>
+					{ placeholder() }
+					<Overlay
+						attributes={ attributes }
+						setAttributes={ setAttributes }
+						clientId={ clientId }
+					/>
+				</div>
 			</>
 		);
 	}
@@ -247,7 +255,14 @@ function PostFeaturedImageDisplay( {
 					</MediaReplaceFlow>
 				</BlockControls>
 			) }
-			<figure { ...blockProps }>{ image }</figure>
+			<figure { ...blockProps }>
+				{ image }
+				<Overlay
+					attributes={ attributes }
+					setAttributes={ setAttributes }
+					clientId={ clientId }
+				/>
+			</figure>
 		</>
 	);
 }
@@ -267,6 +282,11 @@ export default function PostFeaturedImageEdit( props ) {
 					withIllustration={ true }
 					style={ borderProps.style }
 				/>
+				<Overlay
+					attributes={ props.attributes }
+					setAttributes={ props.setAttributes }
+					clientId={ props.clientId }
+				/>
 			</div>
 		);
 	}

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

@@ -1,85 +1,92 @@
 // Provide special styling for the placeholder.
 // @todo: this particular minimal style of placeholder could be componentized further.
-.wp-block-post-featured-image.wp-block-post-featured-image {
-	// Style the placeholder.
-	.wp-block-post-featured-image__placeholder,
-	.components-placeholder {
-		justify-content: center;
-		align-items: center;
-		padding: 0;
-
-		// Hide the upload button, as it's also available in the media library.
-		.components-form-file-upload {
-			display: none;
-		}
+.wp-block-post-featured-image {
+	.block-editor-media-placeholder {
+		z-index: 1; // Need to put it above the overlay so the upload button works.
+		backdrop-filter: none; // Removes background blur so the overlay's actual color is visible.
+	}
 
-		// Style the upload button.
-		.components-button.components-button {
-			padding: 0;
-			display: flex;
+	&.wp-block-post-featured-image {
+		// Style the placeholder.
+		.wp-block-post-featured-image__placeholder,
+		.components-placeholder {
 			justify-content: center;
 			align-items: center;
-			width: $grid-unit-60;
-			height: $grid-unit-60;
-			border-radius: 50%;
-			position: relative;
-			background: var(--wp-admin-theme-color);
-			border-color: var(--wp-admin-theme-color);
-			border-style: solid;
-			color: $white;
+			padding: 0;
 
-			> svg {
-				color: inherit;
+			// Hide the upload button, as it's also available in the media library.
+			.components-form-file-upload {
+				display: none;
 			}
-		}
 
-		// Show default placeholder height when not resized.
-		min-height: 200px;
+			// Style the upload button.
+			.components-button.components-button {
+				padding: 0;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				width: $grid-unit-60;
+				height: $grid-unit-60;
+				border-radius: 50%;
+				position: relative;
+				background: var(--wp-admin-theme-color);
+				border-color: var(--wp-admin-theme-color);
+				border-style: solid;
+				color: $white;
 
-		// The following override the default placeholder styles that remove
-		// its border so that a user selection for border color or width displays
-		// a visual border.
-		&:where(.has-border-color) {
-			border-style: solid;
-		}
-		&:where([style*="border-top-color"]) {
-			border-top-style: solid;
-		}
-		&:where([style*="border-right-color"]) {
-			border-right-style: solid;
-		}
-		&:where([style*="border-bottom-color"]) {
-			border-bottom-style: solid;
-		}
-		&:where([style*="border-left-color"]) {
-			border-left-style: solid;
-		}
+				> svg {
+					color: inherit;
+				}
+			}
 
-		&:where([style*="border-width"]) {
-			border-style: solid;
-		}
-		&:where([style*="border-top-width"]) {
-			border-top-style: solid;
-		}
-		&:where([style*="border-right-width"]) {
-			border-right-style: solid;
-		}
-		&:where([style*="border-bottom-width"]) {
-			border-bottom-style: solid;
-		}
-		&:where([style*="border-left-width"]) {
-			border-left-style: solid;
+			// Show default placeholder height when not resized.
+			min-height: 200px;
+
+			// The following override the default placeholder styles that remove
+			// its border so that a user selection for border color or width displays
+			// a visual border.
+			&:where(.has-border-color) {
+				border-style: solid;
+			}
+			&:where([style*="border-top-color"]) {
+				border-top-style: solid;
+			}
+			&:where([style*="border-right-color"]) {
+				border-right-style: solid;
+			}
+			&:where([style*="border-bottom-color"]) {
+				border-bottom-style: solid;
+			}
+			&:where([style*="border-left-color"]) {
+				border-left-style: solid;
+			}
+
+			&:where([style*="border-width"]) {
+				border-style: solid;
+			}
+			&:where([style*="border-top-width"]) {
+				border-top-style: solid;
+			}
+			&:where([style*="border-right-width"]) {
+				border-right-style: solid;
+			}
+			&:where([style*="border-bottom-width"]) {
+				border-bottom-style: solid;
+			}
+			&:where([style*="border-left-width"]) {
+				border-left-style: solid;
+			}
 		}
-	}
 
-	// Provide a minimum size for the placeholder when resized.
-	// Note, this should be as small as we can afford it, and exists only
-	// to ensure there's room for the upload button.
-	&[style*="height"] .components-placeholder {
-		min-height: $grid-unit-60;
-		min-width: $grid-unit-60;
-		height: 100%;
-		width: 100%;
+		// Provide a minimum size for the placeholder when resized.
+		// Note, this should be as small as we can afford it, and exists only
+		// to ensure there's room for the upload button.
+		&[style*="height"] .components-placeholder {
+			min-height: $grid-unit-60;
+			min-width: $grid-unit-60;
+			height: 100%;
+			width: 100%;
+		}
 	}
 }
 

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

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

package/src/post-featured-image/index.php

@@ -19,10 +19,11 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	}
 	$post_ID = $block->context['postId'];
 
-	$is_link    = isset( $attributes['isLink'] ) && $attributes['isLink'];
-	$size_slug  = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
-	$post_title = trim( strip_tags( get_the_title( $post_ID ) ) );
-	$attr       = get_block_core_post_featured_image_border_attributes( $attributes );
+	$is_link        = isset( $attributes['isLink'] ) && $attributes['isLink'];
+	$size_slug      = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+	$post_title     = trim( strip_tags( get_the_title( $post_ID ) ) );
+	$attr           = get_block_core_post_featured_image_border_attributes( $attributes );
+	$overlay_markup = get_block_core_post_featured_image_overlay_element_markup( $attributes );
 
 	if ( $is_link ) {
 		$attr['alt'] = $post_title;
@@ -36,13 +37,22 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 	if ( $is_link ) {
 		$link_target    = $attributes['linkTarget'];
 		$rel            = ! empty( $attributes['rel'] ) ? 'rel="' . esc_attr( $attributes['rel'] ) . '"' : '';
-		$featured_image = sprintf( '<a href="%1$s" target="%2$s" %3$s>%4$s</a>', get_the_permalink( $post_ID ), esc_attr( $link_target ), $rel, $featured_image );
+		$featured_image = sprintf(
+			'<a href="%1$s" target="%2$s" %3$s>%4$s%5$s</a>',
+			get_the_permalink( $post_ID ),
+			esc_attr( $link_target ),
+			$rel,
+			$featured_image,
+			$overlay_markup
+		);
+	} else {
+		$featured_image = $featured_image . $overlay_markup;
 	}
 
 	$has_width  = ! empty( $attributes['width'] );
 	$has_height = ! empty( $attributes['height'] );
 	if ( ! $has_height && ! $has_width ) {
-		return "<figure $wrapper_attributes>$featured_image</figure>";
+		return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
 	}
 
 	if ( $has_width ) {
@@ -57,7 +67,78 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
 		$featured_image = str_replace( 'src=', 'style="' . esc_attr( $image_styles ) . '" src=', $featured_image );
 	}
 
-	return "<figure $wrapper_attributes>$featured_image</figure>";
+	return "<figure {$wrapper_attributes}>{$featured_image}</figure>";
+}
+
+/**
+ * Generate markup for the HTML element that will be used for the overlay.
+ *
+ * @param array $attributes Block attributes.
+ *
+ * @return string HTML markup in string format.
+ */
+function get_block_core_post_featured_image_overlay_element_markup( $attributes ) {
+	$has_dim_background  = isset( $attributes['dimRatio'] ) && $attributes['dimRatio'];
+	$has_gradient        = isset( $attributes['gradient'] ) && $attributes['gradient'];
+	$has_custom_gradient = isset( $attributes['customGradient'] ) && $attributes['customGradient'];
+	$has_solid_overlay   = isset( $attributes['overlayColor'] ) && $attributes['overlayColor'];
+	$has_custom_overlay  = isset( $attributes['customOverlayColor'] ) && $attributes['customOverlayColor'];
+	$class_names         = array(
+		'wp-block-post-featured-image__overlay',
+	);
+	$styles_properties   = array();
+
+	if ( ! $has_dim_background ) {
+		return '';
+	}
+
+	// Generate required classes for the element.
+	if ( $has_dim_background ) {
+		$class_names[] = 'has-background-dim';
+		$class_names[] = "has-background-dim-{$attributes['dimRatio']}";
+	}
+
+	if ( $has_solid_overlay ) {
+		$class_names[] = "has-{$attributes['overlayColor']}-background-color";
+	}
+
+	if ( $has_gradient || $has_custom_gradient ) {
+		$class_names[] = 'has-background-gradient';
+	}
+
+	if ( $has_gradient ) {
+		$class_names[] = "has-{$attributes['gradient']}-gradient-background";
+	}
+
+	// Generate required CSS properties and their values.
+	if ( ! empty( $attributes['style']['border']['radius'] ) ) {
+		$styles_properties['border-radius'] = $attributes['style']['border']['radius'];
+	}
+
+	if ( ! empty( $attributes['style']['border']['width'] ) ) {
+		$styles_properties['border-width'] = $attributes['style']['border']['width'];
+	}
+
+	if ( $has_custom_gradient ) {
+		$styles_properties['background-image'] = $attributes['customGradient'];
+	}
+
+	if ( $has_custom_overlay ) {
+		$styles_properties['background-color'] = $attributes['customOverlayColor'];
+	}
+
+	$styles = '';
+
+	foreach ( $styles_properties as $style_attribute => $style_attribute_value ) {
+		$styles .= "{$style_attribute}: $style_attribute_value; ";
+	}
+
+	return sprintf(
+		'<span class="%s" style="%s" aria-hidden="true"></span>',
+		esc_attr( implode( ' ', $class_names ) ),
+		esc_attr( trim( $styles ) )
+	);
+
 }
 
 /**
@@ -101,7 +182,7 @@ function get_block_core_post_featured_image_border_attributes( $attributes ) {
 		);
 	}
 
-	$styles     = gutenberg_style_engine_get_styles( array( 'border' => $border_styles ) );
+	$styles     = wp_style_engine_get_styles( array( 'border' => $border_styles ) );
 	$attributes = array();
 	if ( ! empty( $styles['classnames'] ) ) {
 		$attributes['class'] = $styles['classnames'];

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

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

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 } );