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

package/src/post-author-name/index.js

@@ -1,15 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { postAuthor 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';
 
-/**
- * WordPress dependencies
- */
-import { postAuthor as icon } from '@wordpress/icons';
-
 const { name } = metadata;
 export { metadata, name };
 
@@ -18,3 +19,5 @@ export const settings = {
 	transforms,
 	edit,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/post-author-name/init.js

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

package/src/post-comment/index.js

@@ -6,6 +6,7 @@ import { comment as icon } 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-comment/init.js

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

package/src/post-comments-count/index.js

@@ -6,6 +6,7 @@ import { postCommentsCount 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-comments-count/init.js

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

package/src/post-comments-form/index.js

@@ -6,6 +6,7 @@ import { postCommentsForm 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-comments-form/index.php

@@ -72,7 +72,7 @@ add_action( 'init', 'register_block_core_post_comments_form' );
  */
 function post_comments_form_block_form_defaults( $fields ) {
 	if ( wp_is_block_theme() ) {
-		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="wp-block-button__link ' . WP_Theme_JSON_Gutenberg::get_element_class_name( 'button' ) . '" value="%4$s" />';
+		$fields['submit_button'] = '<input name="%1$s" type="submit" id="%2$s" class="wp-block-button__link ' . wp_theme_element_class_name( 'button' ) . '" value="%4$s" />';
 		$fields['submit_field']  = '<p class="form-submit wp-block-button">%1$s %2$s</p>';
 	}
 

package/src/post-comments-form/init.js

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

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

@@ -6,6 +6,7 @@ import { postCommentsCount 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 = {
 	edit,
 	icon,
 };
+
+export const init = () => initBlock( { name, metadata, settings } );

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

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

package/src/post-content/block.json

@@ -10,7 +10,20 @@
 	"supports": {
 		"align": [ "wide", "full" ],
 		"html": false,
-		"__experimentalLayout": true
+		"__experimentalLayout": true,
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
 	},
 	"editorStyle": "wp-block-post-content-editor"
 }

package/src/post-content/index.js

@@ -6,6 +6,7 @@ import { postContent 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-content/init.js

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

package/src/post-date/edit.js

@@ -8,10 +8,7 @@ import classnames from 'classnames';
  */
 import { useEntityProp, store as coreStore } from '@wordpress/core-data';
 import { useRef } from '@wordpress/element';
-import {
-	dateI18n,
-	__experimentalGetSettings as getDateSettings,
-} from '@wordpress/date';
+import { dateI18n, getSettings as getDateSettings } from '@wordpress/date';
 import {
 	AlignmentControl,
 	BlockControls,

package/src/post-date/index.js

@@ -6,6 +6,7 @@ import { postDate 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-date/init.js

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

package/src/post-excerpt/block.json

@@ -37,10 +37,12 @@
 		"typography": {
 			"fontSize": true,
 			"lineHeight": true,
-			"__experimentalFontStyle": true,
+			"__experimentalFontFamily": true,
 			"__experimentalFontWeight": true,
-			"__experimentalLetterSpacing": true,
+			"__experimentalFontStyle": true,
 			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
 			"__experimentalDefaultControls": {
 				"fontSize": true
 			}

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 ) )
+	);
+
 }
 
 /**

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

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