@wordpress/block-library 9.34.0 → 9.35.0

package/src/categories/index.php

@@ -104,14 +104,32 @@ function build_dropdown_script_block_core_categories( $dropdown_id ) {
 	?>
 	<script>
 	( ( [ dropdownId, homeUrl ] ) => {
-		document.getElementById( dropdownId ).addEventListener( 'change', ( event ) => {
-			const dropdown = /** @type {HTMLSelectElement} */ ( event.target );
-			if ( dropdown.value && dropdown.value !== '-1' ) {
-				const url = new URL( homeUrl );
-				url.searchParams.set( dropdown.name, dropdown.value );
-				location.href = url.href;
+		const dropdown = document.getElementById( dropdownId );
+		function onSelectChange() {
+			setTimeout( () => {
+				if ( 'escape' === dropdown.dataset.lastkey ) {
+					return;
+				}
+				if ( dropdown.value && dropdown instanceof HTMLSelectElement ) {
+					const url = new URL( homeUrl );
+					url.searchParams.set( dropdown.name, dropdown.value );
+					location.href = url.href;
+				}
+			}, 250 );
+		}
+		function onKeyUp( event ) {
+			if ( 'Escape' === event.key ) {
+				dropdown.dataset.lastkey = 'escape';
+			} else {
+				delete dropdown.dataset.lastkey;
 			}
-		} );
+		}
+		function onClick() {
+			delete dropdown.dataset.lastkey;
+		}
+		dropdown.addEventListener( 'keyup', onKeyUp );
+		dropdown.addEventListener( 'click', onClick );
+		dropdown.addEventListener( 'change', onSelectChange );
 	} )( <?php echo wp_json_encode( $exports, JSON_HEX_TAG | JSON_UNESCAPED_SLASHES ); ?> );
 	</script>
 	<?php

package/src/comment-author-name/edit.js

@@ -56,7 +56,7 @@ export default function Edit( {
 			const { getEntityRecord } = select( coreStore );
 
 			const comment = getEntityRecord( 'root', 'comment', commentId );
-			const authorName = comment?.author_name; // eslint-disable-line camelcase
+			const authorName = comment?.author_name;
 
 			if ( comment && ! authorName ) {
 				const user = getEntityRecord( 'root', 'user', comment.author );

package/src/comment-template/edit.js

@@ -182,7 +182,6 @@ const CommentTemplatePreview = ( {
 			tabIndex={ 0 }
 			role="button"
 			style={ style }
-			// eslint-disable-next-line jsx-a11y/no-noninteractive-element-to-interactive-role
 			onClick={ handleOnClick }
 			onKeyPress={ handleOnClick }
 		/>

package/src/common.scss

@@ -35,16 +35,17 @@
 }
 
 // Text alignments.
-.has-text-align-center {
+// The :root prefix increases CSS specificity from 0-1-0 to 0-2-0,
+// ensuring that block instance-level text alignment overrides take
+// precedence over global styles.
+:root .has-text-align-center {
 	text-align: center;
 }
-
-.has-text-align-left {
+:root .has-text-align-left {
 	/*rtl:ignore*/
 	text-align: left;
 }
-
-.has-text-align-right {
+:root .has-text-align-right {
 	/*rtl:ignore*/
 	text-align: right;
 }

package/src/cover/deprecated.js

@@ -1847,7 +1847,11 @@ const v3 = {
 			[
 				createBlock( 'core/paragraph', {
 					content: attributes.title,
-					align: attributes.contentAlign,
+					style: {
+						typography: {
+							textAlign: attributes.contentAlign,
+						},
+					},
 					fontSize: 'large',
 					placeholder: __( 'Write title…' ),
 				} ),
@@ -1933,7 +1937,11 @@ const v2 = {
 			[
 				createBlock( 'core/paragraph', {
 					content: attributes.title,
-					align: attributes.contentAlign,
+					style: {
+						typography: {
+							textAlign: attributes.contentAlign,
+						},
+					},
 					fontSize: 'large',
 					placeholder: __( 'Write title…' ),
 				} ),
@@ -1993,7 +2001,11 @@ const v1 = {
 			[
 				createBlock( 'core/paragraph', {
 					content: attributes.title,
-					align: attributes.contentAlign,
+					style: {
+						typography: {
+							textAlign: attributes.contentAlign,
+						},
+					},
 					fontSize: 'large',
 					placeholder: __( 'Write title…' ),
 				} ),

package/src/cover/edit/inspector-controls.js

@@ -196,7 +196,7 @@ export default function CoverInspectorControls( {
 	return (
 		<>
 			<InspectorControls>
-				{ !! url && (
+				{ ( !! url || useFeaturedImage ) && (
 					<ToolsPanel
 						label={ __( 'Settings' ) }
 						resetAll={ () => {

package/src/cover/transforms.js

@@ -37,7 +37,11 @@ const transforms = {
 						createBlock( 'core/paragraph', {
 							content: caption,
 							fontSize: 'large',
-							align: 'center',
+							style: {
+								typography: {
+									textAlign: 'center',
+								},
+							},
 						} ),
 					]
 				),
@@ -60,7 +64,11 @@ const transforms = {
 						createBlock( 'core/paragraph', {
 							content: caption,
 							fontSize: 'large',
-							align: 'center',
+							style: {
+								typography: {
+									textAlign: 'center',
+								},
+							},
 						} ),
 					]
 				),

package/src/editor.scss

@@ -46,6 +46,7 @@
 @use "./social-links/editor.scss" as *;
 @use "./spacer/editor.scss" as *;
 @use "./table/editor.scss" as *;
+@use "./tabs/editor.scss" as *;
 @use "./tag-cloud/editor.scss" as *;
 @use "./template-part/editor.scss" as *;
 @use "./term-template/editor.scss" as *;

package/src/embed/icons.js

@@ -24,12 +24,10 @@ export const embedVideoIcon = (
 	</SVG>
 );
 export const embedTwitterIcon = {
-	foreground: '#1da1f2',
+	foreground: '#000000',
 	src: (
 		<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
-			<G>
-				<Path d="M22.23 5.924c-.736.326-1.527.547-2.357.646.847-.508 1.498-1.312 1.804-2.27-.793.47-1.67.812-2.606.996C18.325 4.498 17.258 4 16.078 4c-2.266 0-4.103 1.837-4.103 4.103 0 .322.036.635.106.935-3.41-.17-6.433-1.804-8.457-4.287-.353.607-.556 1.312-.556 2.064 0 1.424.724 2.68 1.825 3.415-.673-.022-1.305-.207-1.86-.514v.052c0 1.988 1.415 3.647 3.293 4.023-.344.095-.707.145-1.08.145-.265 0-.522-.026-.773-.074.522 1.63 2.038 2.817 3.833 2.85-1.404 1.1-3.174 1.757-5.096 1.757-.332 0-.66-.02-.98-.057 1.816 1.164 3.973 1.843 6.29 1.843 7.547 0 11.675-6.252 11.675-11.675 0-.178-.004-.355-.012-.53.802-.578 1.497-1.3 2.047-2.124z"></Path>
-			</G>
+			<Path d="M13.982 10.622 20.54 3h-1.554l-5.693 6.618L8.745 3H3.5l6.876 10.007L3.5 21h1.554l6.012-6.989L15.868 21h5.245l-7.131-10.378Zm-2.128 2.474-.697-.997-5.543-7.93H8l4.474 6.4.697.996 5.815 8.318h-2.387l-4.745-6.787Z" />
 		</SVG>
 	),
 };

package/src/embed/style.scss

@@ -22,6 +22,12 @@
 	min-height: 240px;
 }
 
+// Allow embeds to grow and shrink inside flex group blocks (Stack/Row), preventing collapse while fitting available space.
+.wp-block-group.is-layout-flex .wp-block-embed {
+	flex: 1 1 0%;
+	min-width: 0;
+}
+
 .wp-block-embed {
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
 

package/src/embed/variations.js

@@ -48,10 +48,10 @@ function getTitle( providerName ) {
 const variations = [
 	{
 		name: 'twitter',
-		title: getTitle( 'Twitter' ),
+		title: getTitle( 'X' ),
 		icon: embedTwitterIcon,
-		keywords: [ 'tweet', __( 'social' ) ],
-		description: __( 'Embed a tweet.' ),
+		keywords: [ 'x', 'twitter', 'tweet', __( 'social' ) ],
+		description: __( 'Embed an X post.' ),
 		patterns: [ /^https?:\/\/(www\.)?twitter\.com\/.+/i ],
 		attributes: { providerNameSlug: 'twitter', responsive: true },
 	},

package/src/form/view.js

@@ -7,8 +7,6 @@ try {
 	);
 } catch {}
 
-// eslint-disable-next-line eslint-comments/disable-enable-pair
-/* eslint-disable no-undef */
 document.querySelectorAll( 'form.wp-block-form' ).forEach( function ( form ) {
 	// Bail If the form settings not provided or the form is not using the mailto: action.
 	if (

package/src/freeform/block.json

@@ -13,9 +13,13 @@
 		}
 	},
 	"supports": {
+		"html": false,
 		"className": false,
 		"customClassName": false,
-		"reusable": false
+		"lock": false,
+		"reusable": false,
+		"renaming": false,
+		"blockVisibility": false
 	},
 	"editorStyle": "wp-block-freeform-editor"
 }

package/src/gallery/deprecated.js

@@ -56,7 +56,7 @@ export function getHrefAndDestination( image, destination ) {
 	switch ( destination ) {
 		case DEPRECATED_LINK_DESTINATION_MEDIA:
 			return {
-				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				href: image?.source_url || image?.url,
 				linkDestination: LINK_DESTINATION_MEDIA,
 			};
 		case DEPRECATED_LINK_DESTINATION_ATTACHMENT:
@@ -66,7 +66,7 @@ export function getHrefAndDestination( image, destination ) {
 			};
 		case LINK_DESTINATION_MEDIA:
 			return {
-				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				href: image?.source_url || image?.url,
 				linkDestination: LINK_DESTINATION_MEDIA,
 			};
 		case LINK_DESTINATION_ATTACHMENT:

package/src/gallery/utils.js

@@ -40,7 +40,7 @@ export function getHrefAndDestination(
 		case LINK_DESTINATION_MEDIA_WP_CORE:
 		case LINK_DESTINATION_MEDIA:
 			return {
-				href: image?.source_url || image?.url, // eslint-disable-line camelcase
+				href: image?.source_url || image?.url,
 				linkDestination: IMAGE_LINK_DESTINATION_MEDIA,
 				lightbox: lightboxSetting?.enabled
 					? { ...attributes?.lightbox, enabled: false }

package/src/heading/index.js

@@ -13,6 +13,7 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import variations from './variations';
 
 const { name } = metadata;
 
@@ -65,6 +66,7 @@ export const settings = {
 	},
 	edit,
 	save,
+	variations,
 };
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/heading/style.scss

@@ -6,7 +6,7 @@ h3,
 h4,
 h5,
 h6 {
-	&.has-background {
+	&:where(.wp-block-heading).has-background {
 		padding: $block-bg-padding--v $block-bg-padding--h;
 	}
 	&.has-text-align-right[style*="writing-mode"]:where([style*="vertical-rl"]),

package/src/heading/transforms.js

@@ -17,7 +17,8 @@ const transforms = {
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
 				attributes.map( ( _attributes ) => {
-					const { content, anchor, align: textAlign } = _attributes;
+					const { content, anchor, style } = _attributes;
+					const textAlign = style?.typography?.textAlign;
 					return createBlock( 'core/heading', {
 						...getTransformedAttributes(
 							_attributes,
@@ -92,7 +93,7 @@ const transforms = {
 			blocks: [ 'core/paragraph' ],
 			transform: ( attributes ) =>
 				attributes.map( ( _attributes ) => {
-					const { content, textAlign: align } = _attributes;
+					const { content, textAlign } = _attributes;
 					return createBlock( 'core/paragraph', {
 						...getTransformedAttributes(
 							_attributes,
@@ -102,7 +103,13 @@ const transforms = {
 							} )
 						),
 						content,
-						align,
+						...( textAlign && {
+							style: {
+								typography: {
+									textAlign,
+								},
+							},
+						} ),
 					} );
 				} ),
 		},

package/src/heading/variations.js

@@ -0,0 +1,37 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { Path, SVG } from '@wordpress/primitives';
+import { heading } from '@wordpress/icons';
+
+const variations = [
+	{
+		name: 'heading',
+		title: __( 'Heading' ),
+		description: __(
+			'Introduce new sections and organize content to help visitors (and search engines) understand the structure of your content.'
+		),
+		isDefault: true,
+		scope: [ 'inserter', 'transform' ],
+		attributes: { fitText: undefined },
+		icon: heading,
+	},
+	// There is a hardcoded workaround in packages/block-editor/src/store/selectors.js
+	// to make Stretchy variations appear as the last of their sections in the inserter.
+	{
+		name: 'stretchy-heading',
+		title: __( 'Stretchy Heading' ),
+		description: __( 'Heading that resizes to fit its container.' ),
+		icon: (
+			<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+				<Path d="m3 18.6 6-4.7 6 4.7V5H3v13.6Zm16.2-9.8v1.5h2.2L17.7 14l1.1 1.1 3.7-3.7v2.2H24V8.8h-4.8Z" />
+			</SVG>
+		),
+		attributes: { fitText: true },
+		scope: [ 'inserter', 'transform' ],
+		isActive: ( blockAttributes ) => blockAttributes.fitText === true,
+	},
+];
+
+export default variations;

package/src/html/edit.js

@@ -2,88 +2,94 @@
  * WordPress dependencies
  */
 import { __ } from '@wordpress/i18n';
-import { useContext, useState } from '@wordpress/element';
+import { useState } from '@wordpress/element';
 import {
 	BlockControls,
-	PlainText,
+	BlockIcon,
+	InspectorControls,
 	useBlockProps,
-	store as blockEditorStore,
 } from '@wordpress/block-editor';
 import {
 	ToolbarButton,
-	Disabled,
 	ToolbarGroup,
-	VisuallyHidden,
+	Placeholder,
+	Button,
+	__experimentalVStack as VStack,
 } from '@wordpress/components';
-import { useSelect } from '@wordpress/data';
-import { useInstanceId } from '@wordpress/compose';
+import { code } from '@wordpress/icons';
 
 /**
  * Internal dependencies
  */
 import Preview from './preview';
+import HTMLEditModal from './modal';
 
 export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
-	const [ isPreview, setIsPreview ] = useState();
-	const isDisabled = useContext( Disabled.Context );
-
-	const instanceId = useInstanceId( HTMLEdit, 'html-edit-desc' );
-
-	const isPreviewMode = useSelect( ( select ) => {
-		return select( blockEditorStore ).getSettings().isPreviewMode;
-	}, [] );
-
-	function switchToPreview() {
-		setIsPreview( true );
-	}
-
-	function switchToHTML() {
-		setIsPreview( false );
-	}
-
+	const [ isModalOpen, setIsModalOpen ] = useState( false );
 	const blockProps = useBlockProps( {
 		className: 'block-library-html__edit',
-		'aria-describedby': isPreview ? instanceId : undefined,
 	} );
 
+	// Show placeholder when content is empty
+	if ( ! attributes.content?.trim() ) {
+		return (
+			<div { ...blockProps }>
+				<Placeholder
+					icon={ <BlockIcon icon={ code } /> }
+					label={ __( 'Custom HTML' ) }
+					instructions={ __(
+						'Add custom HTML code and preview how it looks.'
+					) }
+				>
+					<Button
+						__next40pxDefaultSize
+						variant="primary"
+						onClick={ () => setIsModalOpen( true ) }
+					>
+						{ __( 'Edit HTML' ) }
+					</Button>
+				</Placeholder>
+				<HTMLEditModal
+					isOpen={ isModalOpen }
+					onRequestClose={ () => setIsModalOpen( false ) }
+					content={ attributes.content }
+					setAttributes={ setAttributes }
+				/>
+			</div>
+		);
+	}
+
 	return (
 		<div { ...blockProps }>
 			<BlockControls>
 				<ToolbarGroup>
-					<ToolbarButton
-						isPressed={ ! isPreview }
-						onClick={ switchToHTML }
-					>
-						HTML
-					</ToolbarButton>
-					<ToolbarButton
-						isPressed={ isPreview }
-						onClick={ switchToPreview }
-					>
-						{ __( 'Preview' ) }
+					<ToolbarButton onClick={ () => setIsModalOpen( true ) }>
+						{ __( 'Edit code' ) }
 					</ToolbarButton>
 				</ToolbarGroup>
 			</BlockControls>
-			{ isPreview || isPreviewMode || isDisabled ? (
-				<>
-					<Preview
-						content={ attributes.content }
-						isSelected={ isSelected }
-					/>
-					<VisuallyHidden id={ instanceId }>
-						{ __(
-							'HTML preview is not yet fully accessible. Please switch screen reader to virtualized mode to navigate the below iFrame.'
-						) }
-					</VisuallyHidden>
-				</>
-			) : (
-				<PlainText
-					value={ attributes.content }
-					onChange={ ( content ) => setAttributes( { content } ) }
-					placeholder={ __( 'Write HTML…' ) }
-					aria-label={ __( 'HTML' ) }
-				/>
-			) }
+			<InspectorControls>
+				<VStack
+					className="block-editor-block-inspector-edit-contents"
+					expanded
+				>
+					<Button
+						className="block-editor-block-inspector-edit-contents__button"
+						__next40pxDefaultSize
+						variant="secondary"
+						onClick={ () => setIsModalOpen( true ) }
+					>
+						{ __( 'Edit code' ) }
+					</Button>
+				</VStack>
+			</InspectorControls>
+			<Preview content={ attributes.content } isSelected={ isSelected } />
+			<HTMLEditModal
+				isOpen={ isModalOpen }
+				onRequestClose={ () => setIsModalOpen( false ) }
+				content={ attributes.content }
+				setAttributes={ setAttributes }
+			/>
 		</div>
 	);
 }

package/src/html/editor.scss

@@ -1,4 +1,6 @@
 @use "@wordpress/base-styles/mixins" as *;
+@use "@wordpress/base-styles/variables" as *;
+@use "@wordpress/base-styles/colors" as *;
 
 .block-library-html__edit {
 	.block-library-html__preview-overlay {
@@ -8,16 +10,73 @@
 		top: 0;
 		left: 0;
 	}
+}
+
+// Modal styles
+.block-library-html__modal {
+	// Make modal content scrollable
+	.components-modal__content {
+		display: flex;
+		flex-direction: column;
+		padding: 0;
+		min-height: 70vh;
+	}
+
+	.components-modal__children-container {
+		height: 100%;
+		padding: $grid-unit-20;
+	}
+}
+
+.block-library-html__modal-tabs {
+	height: 100%;
+}
+
+.block-library-html__modal-tab {
+	height: 100%;
+	display: flex;
+	flex-direction: column;
+	margin: 0;
+	box-sizing: border-box;
+	border: 1px solid $gray-200;
+	border-radius: 2px;
+	padding: $grid-unit-20;
+	font-family: $editor-html-font;
+}
+
+.block-library-html__modal-editor {
+	width: 100%;
+	height: 100%;
+	flex: 1;
+	// Reset textarea styles to inherit from pre
+	border: none;
+	background: transparent;
+	padding: 0;
+	font-family: inherit;
+	font-size: inherit;
+	line-height: inherit;
+	color: inherit;
+	resize: none;
+	// HTML input is always LTR regardless of language.
+	/*rtl:ignore*/
+	direction: ltr;
+	overflow-x: auto;
+	box-sizing: border-box;
 
-	// The editing view for the HTML block is equivalent to block UI.
-	// Therefore we increase specificity to avoid theme styles bleeding in.
-	.block-editor-plain-text {
-		display: block;
-		box-sizing: border-box;
-		max-height: 250px;
-		@include editor-input-reset();
-		// HTML input is always LTR regardless of language.
-		/*rtl:ignore*/
-		direction: ltr;
+	&:focus {
+		outline: none;
+		box-shadow: none;
 	}
 }
+
+.block-library-html__preview {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	padding: $grid-unit-60;
+}
+
+.block-library-html__modal-actions {
+	margin-top: $grid-unit-20;
+	padding: 0 $grid-unit-40 $grid-unit-40;
+}