@wordpress/block-library 9.28.0 → 9.28.1-next.0f6f9d12c.0

package/src/accordion-item/index.php

@@ -0,0 +1,73 @@
+<?php
+
+/**
+ * Server-side rendering of the `core/accordion-item` 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 block_core_accordion_item_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$p         = new WP_HTML_Tag_Processor( $content );
+	$unique_id = wp_unique_id( 'accordion-item-' );
+
+	// Initialize the state of the item on the server using a closure,
+	// since we need to get derived state based on the current context.
+	wp_interactivity_state(
+		'core/accordion',
+		array(
+			'isOpen' => function () {
+				$context = wp_interactivity_get_context();
+				return $context['openByDefault'];
+			},
+		)
+	);
+
+	if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-item' ) ) ) {
+		$open_by_default = $attributes['openByDefault'] ? 'true' : 'false';
+		$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.initIsOpen' );
+
+		if ( $p->next_tag( array( 'class_name' => 'accordion-item__toggle' ) ) ) {
+			$p->set_attribute( 'data-wp-on--click', 'actions.toggle' );
+			$p->set_attribute( 'id', $unique_id );
+			$p->set_attribute( 'aria-controls', $unique_id . '-panel' );
+			$p->set_attribute( 'data-wp-bind--aria-expanded', 'state.isOpen' );
+
+			if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-panel' ) ) ) {
+				$p->set_attribute( 'id', $unique_id . '-panel' );
+				$p->set_attribute( 'aria-labelledby', $unique_id );
+				$p->set_attribute( 'data-wp-bind--inert', '!state.isOpen' );
+
+				// Only modify content if all directives have been set.
+				$content = $p->get_updated_html();
+			}
+		}
+	}
+
+	return $content;
+}
+
+/**
+ * Registers the `core/accordion-item` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_accordion_item() {
+	register_block_type_from_metadata(
+		__DIR__ . '/accordion-item',
+		array(
+			'render_callback' => 'block_core_accordion_item_render',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_accordion_item' );

package/src/accordion-item/init.js

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

package/src/accordion-item/save.js

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

package/src/accordion-panel/block.json

@@ -0,0 +1,74 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/accordion-panel",
+	"version": "0.1.0",
+	"title": "Accordion Panel",
+	"category": "design",
+	"description": "Accordion Panel",
+	"example": {},
+	"__experimental": true,
+	"parent": [ "core/accordion-item" ],
+	"supports": {
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"border": true,
+		"interactivity": true,
+		"spacing": {
+			"padding": true,
+			"margin": [ "top", "bottom" ],
+			"blockGap": true,
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"blockGap": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"typography": {
+			"fontSize": true,
+			"lineHeight": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true
+			}
+		},
+		"shadow": true
+	},
+	"attributes": {
+		"allowedBlocks": {
+			"type": "array"
+		},
+		"templateLock": {
+			"type": [ "string", "boolean" ],
+			"enum": [ "all", "insert", "contentOnly", false ],
+			"default": false
+		},
+		"openByDefault": {
+			"type": "boolean",
+			"default": false
+		},
+		"isSelected": {
+			"type": "boolean",
+			"default": false
+		}
+	},
+	"textdomain": "default"
+}

package/src/accordion-panel/edit.js

@@ -0,0 +1,61 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	__experimentalGetShadowClassesAndStyles as useShadowProps,
+} from '@wordpress/block-editor';
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+export default function Edit( { attributes } ) {
+	const { allowedBlocks, templateLock, openByDefault, isSelected } =
+		attributes;
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const shadowProps = useShadowProps( attributes );
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			className: 'accordion-content__wrapper',
+			style: {
+				...spacingProps.style,
+			},
+		},
+		{
+			allowedBlocks,
+			template: [ [ 'core/paragraph', {} ] ],
+			templateLock,
+		}
+	);
+
+	return (
+		<div
+			{ ...blockProps }
+			className={ clsx(
+				blockProps.className,
+				colorProps.className,
+				borderProps.className,
+				{
+					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
+				}
+			) }
+			style={ {
+				...borderProps.style,
+				...colorProps.style,
+				...shadowProps.style,
+			} }
+			aria-hidden={ ! isSelected && ! openByDefault }
+		>
+			<div { ...innerBlocksProps } />
+		</div>
+	);
+}

package/src/accordion-panel/index.js

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

package/src/accordion-panel/init.js

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

package/src/accordion-panel/save.js

@@ -0,0 +1,51 @@
+/**
+ * WordPress dependencies
+ */
+import {
+	InnerBlocks,
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+} from '@wordpress/block-editor';
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+export default function save( { attributes } ) {
+	const blockProps = useBlockProps.save();
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const colorProps = getColorClassesAndStyles( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
+
+	return (
+		<div
+			{ ...blockProps }
+			className={ clsx(
+				blockProps.className,
+				colorProps.className,
+				borderProps.className,
+				{
+					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
+				}
+			) }
+			style={ {
+				...borderProps.style,
+				...colorProps.style,
+				...shadowProps.style,
+			} }
+		>
+			<div
+				className="accordion-content__wrapper"
+				style={ {
+					...spacingProps.style,
+				} }
+			>
+				<InnerBlocks.Content />
+			</div>
+		</div>
+	);
+}

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