@wordpress/block-library 8.7.0 → 8.9.0

package/src/cover/editor.scss

@@ -7,24 +7,22 @@
 	// Override default cover styles
 	// because we're not ready yet to show the cover block.
 	&.is-placeholder {
-		min-height: auto !important;
 		padding: 0 !important;
+		display: flex;
+		align-items: stretch;
+		min-height: 240px;
 
-		// Resizable placeholder for placeholder.
-		.block-library-cover__resize-container {
-			display: none;
-		}
 		.components-placeholder {
 			&.is-large {
-				min-height: 240px;
 				justify-content: flex-start;
 				z-index: z-index(".wp-block-cover.is-placeholder .components-placeholder.is-large");
-				+ .block-library-cover__resize-container {
-					min-height: 240px;
-					display: block;
-				}
 			}
 		}
+
+		// Allow focus outline/box-shadow to align with block's min height.
+		&:focus::after {
+			min-height: auto;
+		}
 	}
 
 	&.components-placeholder h2 {
@@ -88,9 +86,18 @@
 	min-height: 50px;
 }
 
-.block-library-cover__resize-container:not(.is-resizing) {
-	// Important is used to have higher specificity than the inline style set by re-resizable library.
-	height: auto !important;
+// Prevent resizable box popover form preventing inner block selection.
+.components-popover.block-editor-block-popover.block-library-cover__resizable-box-popover {
+	// Additional specificity is required to overcome default block popover
+	// pointer events only for the intended wrappers. The default pointer events
+	// are still needed for the inner resize handles of the resizable box.
+	.components-popover__content > div,
+	.block-library-cover__resize-container {
+		// The inner drag handle will still have `pointer-events: all` allowing
+		// it to continue to be interacted with.
+		pointer-events: none;
+		overflow: visible;
+	}
 }
 
 // When uploading background images, show a transparent overlay.

package/src/cover/index.php

@@ -34,7 +34,7 @@ function render_block_core_cover( $attributes, $content ) {
 
 		/*
 		 * Inserts the featured image between the (1st) cover 'background' `span` and 'inner_container' `div`,
-		 * and removes eventual withespace characters between the two (typically introduced at template level)
+		 * and removes eventual whitespace characters between the two (typically introduced at template level)
 		 */
 		$inner_container_start = '/<div\b[^>]+wp-block-cover__inner-container[\s|"][^>]*>/U';
 		if ( 1 === preg_match( $inner_container_start, $content, $matches, PREG_OFFSET_CAPTURE ) ) {
@@ -46,19 +46,18 @@ function render_block_core_cover( $attributes, $content ) {
 			update_post_thumbnail_cache();
 		}
 		$current_featured_image = get_the_post_thumbnail_url();
-
-		$styles = 'background-image:url(' . esc_url( $current_featured_image ) . '); ';
-
-		if ( isset( $attributes['minHeight'] ) ) {
-			$height_unit = empty( $attributes['minHeightUnit'] ) ? 'px' : $attributes['minHeightUnit'];
-			$height      = " min-height:{$attributes['minHeight']}{$height_unit}";
-
-			$styles .= $height;
+		if ( ! $current_featured_image ) {
+			return $content;
 		}
 
 		$processor = new WP_HTML_Tag_Processor( $content );
 		$processor->next_tag();
-		$processor->set_attribute( 'style', $styles );
+
+		$styles         = $processor->get_attribute( 'style' );
+		$merged_styles  = ! empty( $styles ) ? $styles . ';' : '';
+		$merged_styles .= 'background-image:url(' . esc_url( $current_featured_image ) . ');';
+
+		$processor->set_attribute( 'style', $merged_styles );
 		$content = $processor->get_updated_html();
 	}
 

package/src/cover/style.scss

@@ -203,7 +203,7 @@ video.wp-block-cover__video-background {
 		// Mobile Safari does not support fixed background attachment properly.
 		// See also https://stackoverflow.com/questions/24154666/background-size-cover-not-working-on-ios
 		// Chrome on Android does not appear to support the attachment at all: https://issuetracker.google.com/issues/36908439
-		@supports (-webkit-overflow-scrolling: touch) {
+		@supports (-webkit-touch-callout: inherit) {
 			background-attachment: scroll;
 		}
 

package/src/cover/test/edit.js

@@ -208,7 +208,7 @@ describe( 'Cover block', () => {
 
 			await selectBlock( 'Block: Cover' );
 			await userEvent.type(
-				screen.getByLabelText( 'Alt text (alternative text)' ),
+				screen.getByLabelText( 'Alternative text' ),
 				'Me'
 			);
 			expect( screen.getByAltText( 'Me' ) ).toBeInTheDocument();

package/src/cover/transforms.js

@@ -2,12 +2,15 @@
  * WordPress dependencies
  */
 import { createBlock } from '@wordpress/blocks';
+import { privateApis as blockEditorPrivateApis } from '@wordpress/block-editor';
 
 /**
  * Internal dependencies
  */
 import { IMAGE_BACKGROUND_TYPE, VIDEO_BACKGROUND_TYPE } from './shared';
-import cleanEmptyObject from '../utils/clean-empty-object';
+import { unlock } from '../private-apis';
+
+const { cleanEmptyObject } = unlock( blockEditorPrivateApis );
 
 const transforms = {
 	from: [

package/src/details/block.json

@@ -0,0 +1,54 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details",
+	"title": "Details",
+	"category": "text",
+	"description": "A block that displays a summary and shows or hides additional content.",
+	"keywords": [ "disclosure", "summary", "hide", "transcript" ],
+	"textdomain": "default",
+	"attributes": {
+		"showContent": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"supports": {
+		"align": true,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	},
+	"style": "wp-block-details"
+}

package/src/details/edit.js

@@ -0,0 +1,59 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	store as blockEditorStore,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { useSelect } from '@wordpress/data';
+import { PanelBody, ToggleControl } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+const TEMPLATE = [ [ 'core/details-summary' ], [ 'core/details-content' ] ];
+
+function DetailsEdit( { attributes, setAttributes, clientId } ) {
+	const { showContent } = attributes;
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		allowedBlocks: TEMPLATE,
+		template: TEMPLATE,
+		templateLock: 'all',
+	} );
+
+	// Check if either the block or the inner blocks are selected.
+	const hasSelection = useSelect( ( select ) => {
+		const { isBlockSelected, hasSelectedInnerBlock } =
+			select( blockEditorStore );
+		/* Sets deep to true to also find blocks inside the details content block. */
+		return (
+			hasSelectedInnerBlock( clientId, true ) ||
+			isBlockSelected( clientId )
+		);
+	}, [] );
+
+	return (
+		<>
+			<InspectorControls>
+				<PanelBody title={ __( 'Settings' ) }>
+					<ToggleControl
+						label={ __( 'Open by default' ) }
+						checked={ showContent }
+						onChange={ () =>
+							setAttributes( {
+								showContent: ! showContent,
+							} )
+						}
+					/>
+				</PanelBody>
+			</InspectorControls>
+			<details
+				{ ...innerBlocksProps }
+				open={ hasSelection || showContent }
+			></details>
+		</>
+	);
+}
+
+export default DetailsEdit;

package/src/details/index.js

@@ -0,0 +1,35 @@
+/**
+ * WordPress dependencies
+ */
+import { details as icon } from '@wordpress/icons';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import initBlock from '../utils/init-block';
+import metadata from './block.json';
+import edit from './edit';
+import save from './save';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	example: {
+		innerBlocks: [
+			{
+				name: 'core/details-summary',
+				attributes: { summary: __( 'Details' ) },
+			},
+			{
+				name: 'core/details-content',
+			},
+		],
+	},
+	save,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/details/save.js

@@ -0,0 +1,15 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { showContent } = attributes;
+	const blockProps = useBlockProps.save();
+
+	return (
+		<details { ...blockProps } open={ showContent }>
+			<InnerBlocks.Content />
+		</details>
+	);
+}

package/src/details/style.scss

@@ -0,0 +1,3 @@
+.wp-block-details {
+	overflow: hidden;
+}

package/src/details-content/block.json

@@ -0,0 +1,50 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details-content",
+	"title": "Details Content",
+	"category": "text",
+	"parent": [ "core/details" ],
+	"description": "Add content that may be shown or hidden via a Details block.",
+	"textdomain": "default",
+	"supports": {
+		"align": false,
+		"color": {
+			"gradients": true,
+			"link": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true,
+				"link": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"lock": false,
+		"multiple": false,
+		"reusable": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	}
+}

package/src/details-content/edit.js

@@ -0,0 +1,29 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import { View } from '@wordpress/primitives';
+
+const TEMPLATE = [
+	[
+		'core/paragraph',
+		{
+			placeholder: __(
+				'Add text or blocks that will display when the details block is opened.'
+			),
+		},
+	],
+];
+
+function DetailsContentEdit() {
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: TEMPLATE,
+		templateLock: false,
+	} );
+
+	return <View { ...innerBlocksProps }></View>;
+}
+
+export default DetailsContentEdit;

package/src/details-content/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { postContent 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';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	save,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/details-content/save.js

@@ -0,0 +1,12 @@
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, InnerBlocks } from '@wordpress/block-editor';
+export default function save() {
+	const blockProps = useBlockProps.save();
+	return (
+		<div { ...blockProps }>
+			<InnerBlocks.Content />
+		</div>
+	);
+}

package/src/details-summary/block.json

@@ -0,0 +1,53 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 2,
+	"__experimental": true,
+	"name": "core/details-summary",
+	"title": "Details Summary",
+	"category": "text",
+	"parent": [ "core/details" ],
+	"description": "Provide summary text used to toggle the display of content inside a Details block.",
+	"textdomain": "default",
+	"attributes": {
+		"summary": {
+			"type": "string"
+		}
+	},
+	"supports": {
+		"align": false,
+		"color": {
+			"gradients": true,
+			"__experimentalDefaultControls": {
+				"background": true,
+				"text": true
+			}
+		},
+		"__experimentalBorder": {
+			"radius": true,
+			"color": true,
+			"width": true,
+			"style": true
+		},
+		"html": false,
+		"lock": false,
+		"multiple": false,
+		"reusable": false,
+		"spacing": {
+			"margin": true,
+			"padding": true
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		}
+	}
+}

package/src/details-summary/edit.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+
+function DetailsSummaryEdit( { attributes, setAttributes } ) {
+	const summary = attributes.summary ? attributes.summary : __( 'Details' );
+	return (
+		<summary
+			{ ...useBlockProps() }
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			<RichText
+				aria-label={ __( 'Add summary' ) }
+				allowedFormats={ [] }
+				withoutInteractiveFormatting
+				value={ summary }
+				onChange={ ( newSummary ) =>
+					setAttributes( { summary: newSummary } )
+				}
+			/>
+		</summary>
+	);
+}
+
+export default DetailsSummaryEdit;

package/src/details-summary/editor.scss

@@ -0,0 +1,3 @@
+.wp-block-details-summary div {
+	display: inline;
+}

package/src/details-summary/index.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { heading 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';
+
+const { name } = metadata;
+export { metadata, name };
+
+export const settings = {
+	icon,
+	save,
+	edit,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/details-summary/save.js

@@ -0,0 +1,13 @@
+/**
+ * WordPress dependencies
+ */
+import { RichText, useBlockProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const summary = attributes.summary ? attributes.summary : 'Details';
+	return (
+		<summary { ...useBlockProps.save() }>
+			<RichText.Content value={ summary } />
+		</summary>
+	);
+}

package/src/details-summary/style.scss

@@ -0,0 +1,3 @@
+.wp-block-details-summary {
+	cursor: pointer;
+}

package/src/editor.scss

@@ -13,6 +13,7 @@
 @import "./comments-pagination-numbers/editor.scss";
 @import "./comments-title/editor.scss";
 @import "./cover/editor.scss";
+@import "./details-summary/editor.scss";
 @import "./embed/editor.scss";
 @import "./file/editor.scss";
 @import "./freeform/editor.scss";

package/src/embed/block.json

@@ -41,7 +41,10 @@
 		}
 	},
 	"supports": {
-		"align": true
+		"align": true,
+		"spacing": {
+			"margin": true
+		}
 	},
 	"editorStyle": "wp-block-embed-editor",
 	"style": "wp-block-embed"

package/src/embed/embed-link-settings.native.js

@@ -39,7 +39,7 @@ const EmbedLinkSettings = ( {
 			label: (
 				<FooterMessageLink
 					href={ __(
-						'https://wordpress.org/support/article/embeds/'
+						'https://wordpress.org/documentation/article/embeds/'
 					) }
 					value={ __( 'Learn more about embeds' ) }
 				/>

package/src/embed/embed-placeholder.js

@@ -40,7 +40,7 @@ const EmbedPlaceholder = ( {
 			<div className="components-placeholder__learn-more">
 				<ExternalLink
 					href={ __(
-						'https://wordpress.org/support/article/embeds/'
+						'https://wordpress.org/documentation/article/embeds/'
 					) }
 				>
 					{ __( 'Learn more about embeds' ) }

package/src/file/edit.native.js

@@ -466,7 +466,6 @@ export class FileEdit extends Component {
 										__unstableMobileNoFocusOnMount
 										onChange={ this.onChangeFileName }
 										placeholder={ __( 'File name' ) }
-										rootTagsToEliminate={ [ 'p' ] }
 										tagName="p"
 										underlineColorAndroid="transparent"
 										value={ fileName }
@@ -502,7 +501,6 @@ export class FileEdit extends Component {
 											<RichText
 												withoutInteractiveFormatting
 												__unstableMobileNoFocusOnMount
-												rootTagsToEliminate={ [ 'p' ] }
 												tagName="p"
 												textAlign="center"
 												minWidth={ minWidth }

package/src/file/style.scss

@@ -1,6 +1,4 @@
 .wp-block-file {
-	margin-bottom: 1.5em;
-
 	&:not(.wp-element-button) {
 		font-size: 0.8em;
 	}
@@ -19,6 +17,11 @@
 	}
 }
 
+// Lowest specificity to avoid overriding layout styles.
+:where(.wp-block-file) {
+	margin-bottom: 1.5em;
+}
+
 .wp-block-file__embed {
 	margin-bottom: 1em;
 }

package/src/gallery/test/index.native.js

@@ -3,7 +3,7 @@
  */
 import {
 	act,
-	changeTextOfRichText,
+	typeInRichText,
 	fireEvent,
 	getBlock,
 	getEditorHtml,
@@ -173,7 +173,7 @@ describe( 'Gallery block', () => {
 		const captionField = within(
 			getByLabelText( /Gallery caption. Empty/ )
 		).getByPlaceholderText( 'Add caption' );
-		changeTextOfRichText(
+		typeInRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> gallery caption'
 		);
@@ -197,7 +197,7 @@ describe( 'Gallery block', () => {
 		// Set gallery item caption
 		const captionField =
 			within( galleryItem ).getByPlaceholderText( 'Add caption' );
-		changeTextOfRichText(
+		typeInRichText(
 			captionField,
 			'<strong>Bold</strong> <em>italic</em> <s>strikethrough</s> image caption'
 		);
@@ -537,7 +537,7 @@ describe( 'Gallery block', () => {
 		<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":${ media[ 0 ].localId }} -->
 		<figure class="wp-block-image"><img src="${ media[ 0 ].localUrl }" alt="" class="wp-image-${ media[ 0 ].localId }"/></figure>
 		<!-- /wp:image -->
-		
+
 		<!-- wp:image {"id":${ media[ 1 ].localId },"linkDestination":"attachment"} -->
 		<figure class="wp-block-image"><img src="${ media[ 1 ].localUrl }" alt="" class="wp-image-${ media[ 1 ].localId }"/></figure>
 		<!-- /wp:image --></figure>