@wordpress/block-library 9.27.1-next.46f643fa0.0 → 9.28.1-next.0f6f9d12c.0

package/src/accordions/block.json

@@ -0,0 +1,69 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/accordions",
+	"title": "Accordions",
+	"category": "design",
+	"description": "A group of Accordion headers and associated expandable content.",
+	"example": {},
+	"__experimental": true,
+	"supports": {
+		"html": false,
+		"align": [ "wide", "full" ],
+		"background": {
+			"backgroundImage": true,
+			"backgroundSize": true,
+			"__experimentalDefaultControls": {
+				"backgroundImage": true
+			}
+		},
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"spacing": {
+			"padding": true,
+			"margin": [ "top", "bottom" ],
+			"blockGap": true
+		},
+		"shadow": true,
+		"layout": true,
+		"interactivity": true
+	},
+	"attributes": {
+		"iconPosition": {
+			"type": "string",
+			"default": "right"
+		},
+		"showIcon": {
+			"type": "boolean",
+			"default": true
+		},
+		"autoclose": {
+			"type": "boolean",
+			"default": false
+		},
+		"allowedBlocks": {
+			"type": "array"
+		}
+	},
+	"providesContext": {
+		"core/accordion-icon-position": "iconPosition",
+		"core/accordion-show-icon": "showIcon"
+	},
+	"allowedBlocks": [ "core/accordion-item" ],
+	"textdomain": "default",
+	"style": "wp-block-accordions"
+}

package/src/accordions/edit.js

@@ -0,0 +1,133 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	InspectorControls,
+} from '@wordpress/block-editor';
+import { __ } from '@wordpress/i18n';
+import {
+	ToggleControl,
+	__experimentalToggleGroupControl as ToggleGroupControl,
+	__experimentalToggleGroupControlOption as ToggleGroupControlOption,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
+const ACCORDION_BLOCK_NAME = 'core/accordion-item';
+const ACCORDION_BLOCK = {
+	name: ACCORDION_BLOCK_NAME,
+};
+
+export default function Edit( {
+	attributes: { autoclose, iconPosition, showIcon },
+	setAttributes,
+} ) {
+	const blockProps = useBlockProps();
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const innerBlocksProps = useInnerBlocksProps( blockProps, {
+		template: [ [ ACCORDION_BLOCK_NAME ], [ ACCORDION_BLOCK_NAME ] ],
+		defaultBlock: ACCORDION_BLOCK,
+		directInsert: true,
+		templateInsertUpdatesSelection: true,
+	} );
+
+	return (
+		<>
+			<InspectorControls key="setting">
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( {
+							autoclose: false,
+							showIcon: true,
+							iconPosition: 'right',
+						} );
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Auto-close' ) }
+						isShownByDefault
+						hasValue={ () => !! autoclose }
+						onDeselect={ () =>
+							setAttributes( { autoclose: false } )
+						}
+					>
+						<ToggleControl
+							isBlock
+							__nextHasNoMarginBottom
+							label={ __( 'Auto-close' ) }
+							onChange={ ( value ) => {
+								setAttributes( {
+									autoclose: value,
+								} );
+							} }
+							checked={ autoclose }
+							help={ __(
+								'Automatically close accordions when a new one is opened.'
+							) }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Show icon' ) }
+						isShownByDefault
+						hasValue={ () => ! showIcon }
+						onDeselect={ () => setAttributes( { showIcon: true } ) }
+					>
+						<ToggleControl
+							isBlock
+							__nextHasNoMarginBottom
+							label={ __( 'Show icon' ) }
+							onChange={ ( value ) => {
+								setAttributes( {
+									showIcon: value,
+								} );
+							} }
+							checked={ showIcon }
+							help={ __(
+								'Display a plus icon next to the accordion header.'
+							) }
+						/>
+					</ToolsPanelItem>
+					<ToolsPanelItem
+						label={ __( 'Icon Position' ) }
+						isShownByDefault
+						hasValue={ () => iconPosition !== 'right' }
+						onDeselect={ () =>
+							setAttributes( { iconPosition: 'right' } )
+						}
+					>
+						<ToggleGroupControl
+							__nextHasNoMarginBottom
+							__next40pxDefaultSize
+							isBlock
+							label={ __( 'Icon Position' ) }
+							value={ iconPosition }
+							onChange={ ( value ) => {
+								setAttributes( { iconPosition: value } );
+							} }
+						>
+							<ToggleGroupControlOption
+								label={ __( 'Left' ) }
+								value="left"
+							/>
+							<ToggleGroupControlOption
+								label={ __( 'Right' ) }
+								value="right"
+							/>
+						</ToggleGroupControl>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</InspectorControls>
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/accordions/index.js

@@ -0,0 +1,24 @@
+/**
+ * WordPress dependencies
+ */
+import { accordion } from '@wordpress/icons';
+/**
+ * Internal dependencies
+ */
+import edit from './edit';
+import save from './save';
+import metadata from './block.json';
+import initBlock from '../utils/init-block';
+
+const { name } = metadata;
+
+export { metadata, name };
+
+export const settings = {
+	icon: accordion,
+	example: {},
+	edit,
+	save,
+};
+
+export const init = () => initBlock( { name, metadata, settings } );

package/src/accordions/index.php

@@ -0,0 +1,61 @@
+<?php
+/**
+ * Server-side rendering of the `core/accordions` block.
+ *
+ * @package WordPress
+ * @since 6.6.0
+ *
+ * @param array $attributes The block attributes.
+ * @param string $content The block content.
+ *
+ * @return string Returns the updated markup.
+ */
+function render_block_core_accordions( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$suffix = wp_scripts_get_suffix();
+	if ( defined( 'IS_GUTENBERG_PLUGIN' ) && IS_GUTENBERG_PLUGIN ) {
+		$module_url = gutenberg_url( '/build-module/block-library/accordions/view.min.js' );
+	}
+
+	wp_register_script_module(
+		'@wordpress/block-library/accordions',
+		isset( $module_url ) ? $module_url : includes_url( "blocks/accordions/view{$suffix}.js" ),
+		array( '@wordpress/interactivity' ),
+		defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
+	);
+
+	wp_enqueue_script_module( '@wordpress/block-library/accordions' );
+
+	$p             = new WP_HTML_Tag_Processor( $content );
+	$autoclose     = $attributes['autoclose'] ? 'true' : 'false';
+	$icon          = $attributes['icon'] ?? 'plus';
+	$icon_position = $attributes['iconPosition'] ?? 'right';
+
+	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordions' ) ) ) {
+		$p->set_attribute( 'data-wp-interactive', 'core/accordion' );
+		$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen": [], "icon": "' . $icon . '", "iconPosition": "' . $icon_position . '" }' );
+
+		// Only modify content if directives have been set.
+		$content = $p->get_updated_html();
+	}
+
+	return $content;
+}
+
+/**
+ * Registers the `core/accordions` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_accordions() {
+	register_block_type_from_metadata(
+		__DIR__ . '/accordions',
+		array(
+			'render_callback' => 'render_block_core_accordions',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_accordions' );

package/src/accordions/init.js

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

package/src/accordions/save.js

@@ -0,0 +1,23 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { useBlockProps, useInnerBlocksProps } from '@wordpress/block-editor';
+
+export default function save( { attributes } ) {
+	const { iconPosition } = attributes;
+	const blockProps = useBlockProps.save();
+	const className = clsx(
+		{
+			'icon-position-left': iconPosition === 'left',
+		},
+		blockProps.className
+	);
+
+	return (
+		<div { ...useInnerBlocksProps.save( { ...blockProps, className } ) } />
+	);
+}

package/src/accordions/style.scss

@@ -0,0 +1,91 @@
+.wp-block-accordion-item {
+	display: grid;
+	grid-template-rows: max-content 0fr;
+}
+
+.wp-block-accordion-item.is-open {
+	grid-template-rows: max-content 1fr;
+}
+
+.accordion-item__heading {
+	margin-block-start: 0;
+	margin-block-end: 0;
+}
+
+.accordion-item__toggle {
+	font-family: inherit;
+	font-size: inherit;
+	font-weight: inherit;
+	line-height: inherit;
+	letter-spacing: inherit;
+	text-transform: inherit;
+	text-decoration: inherit;
+	word-spacing: inherit;
+	background: none;
+	border: none;
+	color: inherit;
+	padding: var(--wp--preset--spacing--20, 1em) 0;
+	cursor: pointer;
+	outline: none;
+	display: flex;
+	align-items: center;
+	text-align: inherit;
+	position: relative;
+	width: 100%;
+}
+
+.accordion-item__toggle > span {
+	width: 100%;
+}
+
+.is-layout-flow > .wp-block-accordion-panel,
+.wp-block-accordion-panel {
+	overflow: hidden;
+	margin: 0;
+}
+
+.accordion-panel__wrapper {
+	padding-bottom: var(--wp--preset--spacing--20, 1em);
+}
+
+/* No icon block style */
+.is-style-no-icon .accordion-item__toggle-icon {
+	background-color: unset;
+}
+
+.wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- This should be refactored to not use the row-reverse value. */
+	flex-direction: row-reverse;
+}
+
+/* RTL language support */
+[dir="rtl"] .wp-block-accordion-header:not(.icon-position-left) .accordion-item__toggle {
+	/* stylelint-disable-next-line declaration-property-value-allowed-list -- Automatically adjust icon position for RTL languages. */
+	flex-direction: row-reverse;
+}
+
+[dir="rtl"] .wp-block-accordion-header.icon-position-left .accordion-item__toggle {
+	flex-direction: row;
+}
+
+.accordion-item__toggle:focus-visible {
+	outline: 2px solid -webkit-focus-ring-color;
+	outline-offset: 2px;
+}
+
+/* Add transitions only for users who do not prefer reduced motion */
+@media (prefers-reduced-motion: no-preference) {
+	.wp-block-accordion-item .accordion-item__toggle-icon {
+		transition: transform 0.2s ease-in-out;
+	}
+
+	.wp-block-accordion-item {
+		transition: grid-template-rows 0.3s ease-out;
+	}
+}
+
+.is-open {
+	.accordion-item__toggle-icon.has-icon-plus {
+		transform: rotate(45deg);
+	}
+}

package/src/accordions/view.js

@@ -0,0 +1,38 @@
+/**
+ * WordPress dependencies
+ */
+import { store, getContext } from '@wordpress/interactivity';
+
+const { state } = store( 'core/accordion', {
+	state: {
+		get isOpen() {
+			const { isOpen, id } = getContext();
+			return isOpen.includes( id );
+		},
+	},
+	actions: {
+		toggle: () => {
+			const context = getContext();
+			const { id, autoclose } = context;
+
+			if ( autoclose ) {
+				context.isOpen = state.isOpen ? [] : [ id ];
+			} else if ( state.isOpen ) {
+				context.isOpen = context.isOpen.filter(
+					( item ) => item !== id
+				);
+			} else {
+				context.isOpen.push( id );
+			}
+		},
+	},
+	callbacks: {
+		initIsOpen: () => {
+			const context = getContext();
+			const { id, openByDefault } = context;
+			if ( openByDefault ) {
+				context.isOpen.push( id );
+			}
+		},
+	},
+} );

package/src/block/index.php

@@ -1,4 +1,4 @@
-<?php
+<?php // phpcs:ignore WordPress.Files.FileName.InvalidClassFileName // Needed for WP_Block_Cloner helper class.
 /**
  * Server-side rendering of the `core/block` block.
  *
@@ -16,7 +16,7 @@
  *
  * @return string Rendered HTML of the referenced block.
  */
-function render_block_core_block( $attributes ) {
+function render_block_core_block( $attributes, $content, $block_instance ) {
 	static $seen_refs = array();
 
 	if ( empty( $attributes['ref'] ) ) {
@@ -73,30 +73,45 @@ function render_block_core_block( $attributes ) {
 		$attributes['content'] = $attributes['overrides'];
 	}
 
+	// Apply Block Hooks.
+	$content = apply_block_hooks_to_content_from_post_object( $content, $reusable_block );
+
 	/**
-	 * We set the `pattern/overrides` context through the `render_block_context`
-	 * filter so that it is available when a pattern's inner blocks are
-	 * rendering via do_blocks given it only receives the inner content.
+	 * We attach the blocks from $content as inner blocks to the Synced Pattern block instance.
+	 * This ensures that block context available to the Synced Pattern block instance is provided to
+	 * those blocks.
 	 */
-	$has_pattern_overrides = isset( $attributes['content'] ) && null !== get_block_bindings_source( 'core/pattern-overrides' );
-	if ( $has_pattern_overrides ) {
-		$filter_block_context = static function ( $context ) use ( $attributes ) {
-			$context['pattern/overrides'] = $attributes['content'];
-			return $context;
-		};
-		add_filter( 'render_block_context', $filter_block_context, 1 );
+	$block_instance->parsed_block['innerBlocks']  = parse_blocks( $content );
+	$block_instance->parsed_block['innerContent'] = array_fill( 0, count( $block_instance->parsed_block['innerBlocks'] ), null );
+	if ( method_exists( $block_instance, 'refresh_context_dependents' ) ) {
+		// WP_Block::refresh_context_dependents() was introduced in WordPress 6.8.
+		$block_instance->refresh_context_dependents();
+	} else {
+		// This branch can be removed once Gutenberg requires WordPress 6.8 or later.
+		if ( ! class_exists( 'WP_Block_Cloner' ) ) {
+			// phpcs:ignore Gutenberg.Commenting.SinceTag.MissingClassSinceTag
+			class WP_Block_Cloner extends WP_Block {
+				/**
+				 * Static methods of subclasses have access to protected properties
+				 * of instances of the parent class.
+				 * In this case, this gives us access to `available_context` and `registry`.
+				 */
+				// phpcs:ignore Gutenberg.Commenting.SinceTag.MissingMethodSinceTag
+				public static function clone_instance( $instance ) {
+					return new WP_Block(
+						$instance->parsed_block,
+						$instance->available_context,
+						$instance->registry
+					);
+				}
+			}
+		}
+		$block_instance = WP_Block_Cloner::clone_instance( $block_instance );
 	}
 
-	// Apply Block Hooks.
-	$content = apply_block_hooks_to_content_from_post_object( $content, $reusable_block );
-
-	$content = do_blocks( $content );
+	$content = $block_instance->render( array( 'dynamic' => false ) );
 	unset( $seen_refs[ $attributes['ref'] ] );
 
-	if ( $has_pattern_overrides ) {
-		remove_filter( 'render_block_context', $filter_block_context, 1 );
-	}
-
 	return $content;
 }
 

package/src/cover/block.json

@@ -8,7 +8,8 @@
 	"textdomain": "default",
 	"attributes": {
 		"url": {
-			"type": "string"
+			"type": "string",
+			"role": "content"
 		},
 		"useFeaturedImage": {
 			"type": "boolean",

package/src/cover/edit/index.js

@@ -120,9 +120,14 @@ function CoverEdit( {
 			return {
 				media:
 					featuredImage && useFeaturedImage
-						? select( coreStore ).getMedia( featuredImage, {
-								context: 'view',
-						  } )
+						? select( coreStore ).getEntityRecord(
+								'postType',
+								'attachment',
+								featuredImage,
+								{
+									context: 'view',
+								}
+						  )
 						: undefined,
 			};
 		},

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

@@ -131,7 +131,12 @@ export default function CoverInspectorControls( {
 	const image = useSelect(
 		( select ) =>
 			id && isImageBackground
-				? select( coreStore ).getMedia( id, { context: 'view' } )
+				? select( coreStore ).getEntityRecord(
+						'postType',
+						'attachment',
+						id,
+						{ context: 'view' }
+				  )
 				: null,
 		[ id, isImageBackground ]
 	);

package/src/file/edit.js

@@ -80,7 +80,11 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			media:
 				id === undefined
 					? undefined
-					: select( coreStore ).getMedia( id ),
+					: select( coreStore ).getEntityRecord(
+							'postType',
+							'attachment',
+							id
+					  ),
 		} ),
 		[ id ]
 	);
@@ -128,9 +132,10 @@ function FileEdit( { attributes, isSelected, setAttributes, clientId } ) {
 			return;
 		}
 
-		const isPdf = getFilename( newMedia.url )
-			.toLowerCase()
-			.endsWith( '.pdf' );
+		const isPdf =
+			// Media Library and REST API use different properties for mime type.
+			( newMedia.mime || newMedia.mime_type ) === 'application/pdf' ||
+			getFilename( newMedia.url ).toLowerCase().endsWith( '.pdf' );
 		const pdfAttributes = {
 			displayPreview: isPdf
 				? attributes.displayPreview ?? true

package/src/file/edit.native.js

@@ -583,7 +583,11 @@ export default compose( [
 		const isNotFileHref = id && getProtocol( href ) !== 'file:';
 		return {
 			media: isNotFileHref
-				? select( coreStore ).getMedia( id )
+				? select( coreStore ).getEntityRecord(
+						'postType',
+						'attachment',
+						id
+				  )
 				: undefined,
 			isSidebarOpened: isSelected && isEditorSidebarOpened(),
 			wasBlockJustInserted: select(

package/src/file/index.php

@@ -16,33 +16,39 @@
  * @return string Returns the block content.
  */
 function render_block_core_file( $attributes, $content ) {
+	if ( empty( $attributes['displayPreview'] ) ) {
+		return $content;
+	}
+
 	// If it's interactive, enqueue the script module and add the directives.
-	if ( ! empty( $attributes['displayPreview'] ) ) {
-		wp_enqueue_script_module( '@wordpress/block-library/file/view' );
+	wp_enqueue_script_module( '@wordpress/block-library/file/view' );
 
-		$processor = new WP_HTML_Tag_Processor( $content );
-		$processor->next_tag();
+	$processor = new WP_HTML_Tag_Processor( $content );
+	if ( $processor->next_tag() ) {
 		$processor->set_attribute( 'data-wp-interactive', 'core/file' );
-		$processor->next_tag( 'object' );
-		$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
-		$processor->set_attribute( 'hidden', true );
-
-		$filename     = $processor->get_attribute( 'aria-label' );
-		$has_filename = ! empty( $filename ) && 'PDF embed' !== $filename;
-		$label        = $has_filename ? sprintf(
-			/* translators: %s: filename. */
-			__( 'Embed of %s.' ),
-			$filename
-		) : __( 'PDF embed' );
-
-		// Update object's aria-label attribute if present in block HTML.
-		// Match an aria-label attribute from an object tag.
-		$processor->set_attribute( 'aria-label', $label );
-
-		return $processor->get_updated_html();
 	}
 
-	return $content;
+	// If there are no OBJECT elements, something might have already modified the block.
+	if ( ! $processor->next_tag( 'OBJECT' ) ) {
+		return $content;
+	}
+
+	$processor->set_attribute( 'data-wp-bind--hidden', '!state.hasPdfPreview' );
+	$processor->set_attribute( 'hidden', true );
+
+	$filename     = $processor->get_attribute( 'aria-label' );
+	$has_filename = is_string( $filename ) && ! empty( $filename ) && 'PDF embed' !== $filename;
+	$label        = $has_filename ? sprintf(
+		/* translators: %s: filename. */
+		__( 'Embed of %s.' ),
+		$filename
+	) : __( 'PDF embed' );
+
+	// Update object's aria-label attribute if present in block HTML.
+	// Match an aria-label attribute from an object tag.
+	$processor->set_attribute( 'aria-label', $label );
+
+	return $processor->get_updated_html();
 }
 
 /**