@wordpress/block-library 9.34.1-next.2f1c7c01b.0 → 9.35.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/block-library",
-	"version": "9.34.1-next.2f1c7c01b.0",
+	"version": "9.35.0",
 	"description": "Block library for the WordPress editor.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -82,41 +82,41 @@
 		"{src,build,build-module}/*/init.js"
 	],
 	"dependencies": {
-		"@wordpress/a11y": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/api-fetch": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/autop": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/base-styles": "^6.10.1-next.2f1c7c01b.0",
-		"@wordpress/blob": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/block-editor": "^15.7.1-next.2f1c7c01b.0",
-		"@wordpress/blocks": "^15.7.1-next.2f1c7c01b.0",
-		"@wordpress/components": "^30.7.2-next.2f1c7c01b.0",
-		"@wordpress/compose": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/core-data": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/data": "^10.34.1-next.2f1c7c01b.0",
-		"@wordpress/date": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/deprecated": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/dom": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/element": "^6.34.1-next.2f1c7c01b.0",
-		"@wordpress/escape-html": "^3.34.1-next.2f1c7c01b.0",
-		"@wordpress/hooks": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/html-entities": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/i18n": "^6.7.1-next.2f1c7c01b.0",
-		"@wordpress/icons": "^11.1.1-next.2f1c7c01b.0",
-		"@wordpress/interactivity": "^6.34.1-next.2f1c7c01b.0",
-		"@wordpress/interactivity-router": "^2.34.1-next.2f1c7c01b.0",
-		"@wordpress/keyboard-shortcuts": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/keycodes": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/latex-to-mathml": "^1.2.1-next.2f1c7c01b.0",
-		"@wordpress/notices": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/patterns": "^2.34.1-next.2f1c7c01b.0",
-		"@wordpress/primitives": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/private-apis": "^1.34.1-next.2f1c7c01b.0",
-		"@wordpress/reusable-blocks": "^5.34.1-next.2f1c7c01b.0",
-		"@wordpress/rich-text": "^7.34.1-next.2f1c7c01b.0",
-		"@wordpress/server-side-render": "^6.10.1-next.2f1c7c01b.0",
-		"@wordpress/url": "^4.34.1-next.2f1c7c01b.0",
-		"@wordpress/viewport": "^6.34.1-next.2f1c7c01b.0",
-		"@wordpress/wordcount": "^4.34.1-next.2f1c7c01b.0",
+		"@wordpress/a11y": "^4.35.0",
+		"@wordpress/api-fetch": "^7.35.0",
+		"@wordpress/autop": "^4.35.0",
+		"@wordpress/base-styles": "^6.11.0",
+		"@wordpress/blob": "^4.35.0",
+		"@wordpress/block-editor": "^15.8.0",
+		"@wordpress/blocks": "^15.8.0",
+		"@wordpress/components": "^30.8.0",
+		"@wordpress/compose": "^7.35.0",
+		"@wordpress/core-data": "^7.35.0",
+		"@wordpress/data": "^10.35.0",
+		"@wordpress/date": "^5.35.0",
+		"@wordpress/deprecated": "^4.35.0",
+		"@wordpress/dom": "^4.35.0",
+		"@wordpress/element": "^6.35.0",
+		"@wordpress/escape-html": "^3.35.0",
+		"@wordpress/hooks": "^4.35.0",
+		"@wordpress/html-entities": "^4.35.0",
+		"@wordpress/i18n": "^6.8.0",
+		"@wordpress/icons": "^11.2.0",
+		"@wordpress/interactivity": "^6.35.0",
+		"@wordpress/interactivity-router": "^2.35.0",
+		"@wordpress/keyboard-shortcuts": "^5.35.0",
+		"@wordpress/keycodes": "^4.35.0",
+		"@wordpress/latex-to-mathml": "^1.3.0",
+		"@wordpress/notices": "^5.35.0",
+		"@wordpress/patterns": "^2.35.0",
+		"@wordpress/primitives": "^4.35.0",
+		"@wordpress/private-apis": "^1.35.0",
+		"@wordpress/reusable-blocks": "^5.35.0",
+		"@wordpress/rich-text": "^7.35.0",
+		"@wordpress/server-side-render": "^6.11.0",
+		"@wordpress/url": "^4.35.0",
+		"@wordpress/viewport": "^6.35.0",
+		"@wordpress/wordcount": "^4.35.0",
 		"change-case": "^4.1.2",
 		"clsx": "^2.1.1",
 		"colord": "^2.7.0",
@@ -134,5 +134,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "c6ddcdf455bc02567a2c9e03de6862a2061b85e8"
+	"gitHead": "77aa1f194edceafe8ac2a1b9438bf84b557e76e3"
 }

package/src/accordion-heading/style.scss

@@ -1,3 +1,17 @@
+// In many classic themes, selectors like `.entry-content h1` are used,
+// potentially applying relatively high specificity (such as `0-1-1`) to
+// heading elements. To properly override those styles, use a selector
+// with a specificity of `0-2-0`.
+.wp-block-accordion-heading.wp-block-accordion-heading {
+	// Some themes may have an explicit width. Since it's unpredictable
+	// what CSS specificity should be used to override them, ensure 100%
+	// width using min-width instead.
+	min-width: 100%;
+	// Some classic themes apply default margins to heading elements,
+	// so those styles need to be reset.
+	margin: 0;
+}
+
 .wp-block-accordion-heading__toggle {
 	font-family: inherit;
 	font-size: inherit;
@@ -8,26 +22,45 @@
 	text-decoration: inherit;
 	word-spacing: inherit;
 	font-style: inherit;
-	background: none;
 	border: none;
-	color: inherit;
 	padding: var(--wp--preset--spacing--20, 1em) 0;
 	cursor: pointer;
 	overflow: hidden;
 	display: flex;
 	align-items: center;
 	text-align: inherit;
-	position: relative;
 	width: 100%;
 
+	// Some themes may apply colors to button elements with a particularly
+	// high CSS specificity. Since it's impossible to predict this specificity,
+	// we reset the colors using `!important`.
+	background-color: inherit !important;
+	color: inherit !important;
+
 	&:not(:focus-visible) {
 		outline: none;
 	}
 
-	&:hover {
-		.wp-block-accordion-heading__toggle-title {
-			text-decoration: underline;
-		}
+	&:hover,
+	&:focus {
+		// Some themes may apply styles when a button element is hovered
+		// over or focused. This is not intended for accordion toggle
+		// buttons, so we reset it here.
+		text-decoration: none;
+		background-color: inherit !important;
+		box-shadow: none;
+		color: inherit;
+		border: none;
+		padding: var(--wp--preset--spacing--20, 1em) 0;
+	}
+
+	&:focus-visible {
+		outline: auto;
+		outline-offset: 0;
+	}
+
+	&:hover .wp-block-accordion-heading__toggle-title {
+		text-decoration: underline;
 	}
 }
 

package/src/accordion-panel/style.scss

@@ -1,4 +1,9 @@
-.wp-block-accordion-panel {
+// Some classic themes may use selectors like `.wp-block .wp-block`
+// and apply some kind of width to the blocks. To properly override
+// those styles, use a selector with a specificity of `0-2-0`.
+.wp-block-accordion-panel.wp-block-accordion-panel {
+	min-width: 100%;
+
 	// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
 	&[inert],
 	&[aria-hidden="true"] {

package/src/block/edit.js

@@ -124,7 +124,7 @@ function ReusableBlockControl( {
 	return (
 		<>
 			{ canUserEdit && !! handleEditOriginal && (
-				<BlockControls>
+				<BlockControls group="other">
 					<ToolbarGroup>
 						<ToolbarButton onClick={ handleEditOriginal }>
 							{ __( 'Edit original' ) }
@@ -134,7 +134,7 @@ function ReusableBlockControl( {
 			) }
 
 			{ canOverrideBlocks && (
-				<BlockControls>
+				<BlockControls group="other">
 					<ToolbarGroup>
 						<ToolbarButton
 							onClick={ resetContent }

package/src/block-keyboard-shortcuts/index.js

@@ -46,19 +46,33 @@ function BlockKeyboardShortcuts() {
 		) {
 			return;
 		}
+		const newAttributes = {
+			content: attributes.content,
+		};
 
-		const textAlign =
-			blockName === 'core/paragraph' ? 'align' : 'textAlign';
-		const destinationTextAlign =
-			destinationBlockName === 'core/paragraph' ? 'align' : 'textAlign';
+		// Read textAlign from source block (could be in old or new format)
+		const sourceTextAlign =
+			attributes.textAlign || attributes.style?.typography?.textAlign;
+
+		// When destination is heading, preserve heading format (textAlign attribute + level)
+		// When destination is paragraph, use block support format (style.typography.textAlign)
+		if ( destinationBlockName === 'core/heading' ) {
+			newAttributes.level = level;
+			if ( sourceTextAlign ) {
+				newAttributes.textAlign = sourceTextAlign;
+			}
+		} else if ( sourceTextAlign ) {
+			// Destination is paragraph
+			newAttributes.style = {
+				typography: {
+					textAlign: sourceTextAlign,
+				},
+			};
+		}
 
 		replaceBlocks(
 			currentClientId,
-			createBlock( destinationBlockName, {
-				level,
-				content: attributes.content,
-				...{ [ destinationTextAlign ]: attributes[ textAlign ] },
-			} )
+			createBlock( destinationBlockName, newAttributes )
 		);
 	};
 

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