@wordpress/block-library 9.35.1-next.dc3f6d3c1.0 → 9.36.1-next.6deb34194.0

package/src/accordion-heading/style.scss

@@ -1,17 +1,3 @@
-// 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;
@@ -22,7 +8,9 @@
 	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;
@@ -31,34 +19,10 @@
 	text-align: inherit;
 	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,
-	&: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-item/index.php

@@ -36,6 +36,7 @@ function block_core_accordion_item_render( $attributes, $content ) {
 		$p->set_attribute( 'data-wp-context', '{ "id": "' . $unique_id . '", "openByDefault": ' . $open_by_default . ' }' );
 		$p->set_attribute( 'data-wp-class--is-open', 'state.isOpen' );
 		$p->set_attribute( 'data-wp-init', 'callbacks.initAccordionItems' );
+		$p->set_attribute( 'data-wp-on-window--hashchange', 'callbacks.hashChange' );
 
 		if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-heading__toggle' ) ) ) {
 			$p->set_attribute( 'data-wp-on--click', 'actions.toggle' );

package/src/accordion-item/style.scss

@@ -1,13 +1,6 @@
 .wp-block-accordion-item {
-	display: grid;
-	grid-template-rows: max-content 0fr;
-
-	&.is-open {
-		grid-template-rows: max-content 1fr;
-
-		> .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
-			transform: rotate(45deg);
-		}
+	&.is-open > .wp-block-accordion-heading .wp-block-accordion-heading__toggle-icon {
+		transform: rotate(45deg);
 	}
 
 	/* Add transitions only for users who do not prefer reduced motion */

package/src/accordion-panel/block.json

@@ -50,7 +50,7 @@
 		"layout": {
 			"allowEditing": false
 		},
-		"blockVisibility": false,
+		"visibility": false,
 		"contentRole": true,
 		"allowedBlocks": true,
 		"lock": false

package/src/accordion-panel/style.scss

@@ -1,8 +1,4 @@
-// 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%;
+.wp-block-accordion-panel {
 
 	// Prevent blockGap from Accordion Content block from adding extra margin between accordions.
 	&[inert],

package/src/audio/index.js

@@ -3,6 +3,7 @@
  */
 import { __ } from '@wordpress/i18n';
 import { audio as icon } from '@wordpress/icons';
+import { privateApis as blocksPrivateApis } from '@wordpress/blocks';
 
 /**
  * Internal dependencies
@@ -13,6 +14,9 @@ import edit from './edit';
 import metadata from './block.json';
 import save from './save';
 import transforms from './transforms';
+import { unlock } from '../lock-unlock';
+
+const { fieldsKey, formKey } = unlock( blocksPrivateApis );
 
 const { name } = metadata;
 
@@ -32,15 +36,15 @@ export const settings = {
 	save,
 };
 
-if ( window.__experimentalContentOnlyPatternInsertion ) {
-	settings.fields = [
+if ( window.__experimentalContentOnlyInspectorFields ) {
+	settings[ fieldsKey ] = [
 		{
+			id: 'audio',
 			label: __( 'Audio' ),
-			type: 'Media',
-			shownByDefault: true,
+			type: 'media',
 			mapping: {
 				id: 'id',
-				src: 'src',
+				url: 'src',
 			},
 			args: {
 				allowedTypes: [ 'audio' ],
@@ -48,14 +52,14 @@ if ( window.__experimentalContentOnlyPatternInsertion ) {
 			},
 		},
 		{
+			id: 'caption',
 			label: __( 'Caption' ),
-			type: 'RichText',
-			shownByDefault: false,
-			mapping: {
-				value: 'caption',
-			},
+			type: 'richtext',
 		},
 	];
+	settings[ formKey ] = {
+		fields: [ 'audio' ],
+	};
 }
 
 export const init = () => initBlock( { name, metadata, settings } );

package/src/avatar/edit.js

@@ -130,6 +130,19 @@ const AvatarInspectorControls = ( {
 	);
 };
 
+const AvatarLinkWrapper = ( { children, isLink } ) =>
+	isLink ? (
+		<a
+			href="#avatar-pseudo-link"
+			className="wp-block-avatar__link"
+			onClick={ ( event ) => event.preventDefault() }
+		>
+			{ children }
+		</a>
+	) : (
+		children
+	);
+
 const ResizableAvatar = ( {
 	setAttributes,
 	attributes,
@@ -146,43 +159,46 @@ const ResizableAvatar = ( {
 	);
 	return (
 		<div { ...blockProps }>
-			<ResizableBox
-				size={ {
-					width: attributes.size,
-					height: attributes.size,
-				} }
-				showHandle={ isSelected }
-				onResizeStop={ ( event, direction, elt, delta ) => {
-					setAttributes( {
-						size: parseInt(
-							attributes.size + ( delta.height || delta.width ),
-							10
-						),
-					} );
-				} }
-				lockAspectRatio
-				enable={ {
-					top: false,
-					right: ! isRTL(),
-					bottom: true,
-					left: isRTL(),
-				} }
-				minWidth={ avatar.minSize }
-				maxWidth={ avatar.maxSize }
-			>
-				<img
-					src={ doubledSizedSrc }
-					alt={ avatar.alt }
-					className={ clsx(
-						'avatar',
-						'avatar-' + attributes.size,
-						'photo',
-						'wp-block-avatar__image',
-						borderProps.className
-					) }
-					style={ borderProps.style }
-				/>
-			</ResizableBox>
+			<AvatarLinkWrapper isLink={ attributes.isLink }>
+				<ResizableBox
+					size={ {
+						width: attributes.size,
+						height: attributes.size,
+					} }
+					showHandle={ isSelected }
+					onResizeStop={ ( event, direction, elt, delta ) => {
+						setAttributes( {
+							size: parseInt(
+								attributes.size +
+									( delta.height || delta.width ),
+								10
+							),
+						} );
+					} }
+					lockAspectRatio
+					enable={ {
+						top: false,
+						right: ! isRTL(),
+						bottom: true,
+						left: isRTL(),
+					} }
+					minWidth={ avatar.minSize }
+					maxWidth={ avatar.maxSize }
+				>
+					<img
+						src={ doubledSizedSrc }
+						alt={ avatar.alt }
+						className={ clsx(
+							'avatar',
+							'avatar-' + attributes.size,
+							'photo',
+							'wp-block-avatar__image',
+							borderProps.className
+						) }
+						style={ borderProps.style }
+					/>
+				</ResizableBox>
+			</AvatarLinkWrapper>
 		</div>
 	);
 };
@@ -198,29 +214,13 @@ const CommentEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 				attributes={ attributes }
 				selectUser={ false }
 			/>
-			{ attributes.isLink ? (
-				<a
-					href="#avatar-pseudo-link"
-					className="wp-block-avatar__link"
-					onClick={ ( event ) => event.preventDefault() }
-				>
-					<ResizableAvatar
-						attributes={ attributes }
-						avatar={ avatar }
-						blockProps={ blockProps }
-						isSelected={ isSelected }
-						setAttributes={ setAttributes }
-					/>
-				</a>
-			) : (
-				<ResizableAvatar
-					attributes={ attributes }
-					avatar={ avatar }
-					blockProps={ blockProps }
-					isSelected={ isSelected }
-					setAttributes={ setAttributes }
-				/>
-			) }
+			<ResizableAvatar
+				attributes={ attributes }
+				avatar={ avatar }
+				blockProps={ blockProps }
+				isSelected={ isSelected }
+				setAttributes={ setAttributes }
+			/>
 		</>
 	);
 };
@@ -241,29 +241,14 @@ const UserEdit = ( { attributes, context, setAttributes, isSelected } ) => {
 				avatar={ avatar }
 				setAttributes={ setAttributes }
 			/>
-			{ attributes.isLink ? (
-				<a
-					href="#avatar-pseudo-link"
-					className="wp-block-avatar__link"
-					onClick={ ( event ) => event.preventDefault() }
-				>
-					<ResizableAvatar
-						attributes={ attributes }
-						avatar={ avatar }
-						blockProps={ blockProps }
-						isSelected={ isSelected }
-						setAttributes={ setAttributes }
-					/>
-				</a>
-			) : (
-				<ResizableAvatar
-					attributes={ attributes }
-					avatar={ avatar }
-					blockProps={ blockProps }
-					isSelected={ isSelected }
-					setAttributes={ setAttributes }
-				/>
-			) }
+
+			<ResizableAvatar
+				attributes={ attributes }
+				avatar={ avatar }
+				blockProps={ blockProps }
+				isSelected={ isSelected }
+				setAttributes={ setAttributes }
+			/>
 		</>
 	);
 };

package/src/breadcrumbs/block.json

@@ -16,11 +16,11 @@
 			"type": "string",
 			"default": "/"
 		},
-		"showHomeLink": {
+		"showHomeItem": {
 			"type": "boolean",
 			"default": true
 		},
-		"showLastItem": {
+		"showCurrentItem": {
 			"type": "boolean",
 			"default": true
 		},
@@ -32,6 +32,7 @@
 	"usesContext": [ "postId", "postType", "templateSlug" ],
 	"supports": {
 		"html": false,
+		"align": [ "wide", "full" ],
 		"spacing": {
 			"margin": true,
 			"padding": true

package/src/breadcrumbs/edit.js

@@ -30,8 +30,8 @@ export default function BreadcrumbEdit( {
 } ) {
 	const {
 		separator,
-		showHomeLink,
-		showLastItem,
+		showHomeItem,
+		showCurrentItem,
 		prefersTaxonomy,
 		showOnHomePage,
 	} = attributes;
@@ -143,7 +143,7 @@ export default function BreadcrumbEdit( {
 		( _showTerms && ! hasTermsAssigned );
 	if ( showPlaceholder ) {
 		const placeholderItems = [];
-		if ( showHomeLink ) {
+		if ( showHomeItem ) {
 			placeholderItems.push( __( 'Home' ) );
 		}
 		if ( templateSlug && ! postId ) {
@@ -168,7 +168,7 @@ export default function BreadcrumbEdit( {
 							</a>
 						</li>
 					) ) }
-					{ showLastItem && (
+					{ showCurrentItem && (
 						<li>
 							<span aria-current="page">{ __( 'Current' ) }</span>
 						</li>
@@ -185,48 +185,48 @@ export default function BreadcrumbEdit( {
 					resetAll={ () => {
 						setAttributes( {
 							separator: separatorDefaultValue,
-							showHomeLink: true,
-							showLastItem: true,
+							showHomeItem: true,
+							showCurrentItem: true,
 						} );
 					} }
 					dropdownMenuProps={ dropdownMenuProps }
 				>
 					<ToolsPanelItem
-						label={ __( 'Show home link' ) }
+						label={ __( 'Show home breadcrumb' ) }
 						isShownByDefault
-						hasValue={ () => ! showHomeLink }
+						hasValue={ () => ! showHomeItem }
 						onDeselect={ () =>
 							setAttributes( {
-								showHomeLink: true,
+								showHomeItem: true,
 							} )
 						}
 					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Show home link' ) }
+							label={ __( 'Show home breadcrumb' ) }
 							onChange={ ( value ) =>
-								setAttributes( { showHomeLink: value } )
+								setAttributes( { showHomeItem: value } )
 							}
-							checked={ showHomeLink }
+							checked={ showHomeItem }
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem
-						label={ __( 'Show last item' ) }
+						label={ __( 'Show current breadcrumb' ) }
 						isShownByDefault
-						hasValue={ () => ! showLastItem }
+						hasValue={ () => ! showCurrentItem }
 						onDeselect={ () =>
 							setAttributes( {
-								showLastItem: true,
+								showCurrentItem: true,
 							} )
 						}
 					>
 						<ToggleControl
 							__nextHasNoMarginBottom
-							label={ __( 'Show last item' ) }
+							label={ __( 'Show current breadcrumb' ) }
 							onChange={ ( value ) =>
-								setAttributes( { showLastItem: value } )
+								setAttributes( { showCurrentItem: value } )
 							}
-							checked={ showLastItem }
+							checked={ showCurrentItem }
 						/>
 					</ToolsPanelItem>
 					<ToolsPanelItem