@wordpress/block-library 9.28.0 → 9.29.0

package/src/accordion-content/edit.js

@@ -0,0 +1,149 @@
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import {
+	useBlockProps,
+	useInnerBlocksProps,
+	InspectorControls,
+	store as blockEditorStore,
+} from '@wordpress/block-editor';
+import { useDispatch, useSelect } from '@wordpress/data';
+import { useEffect } from '@wordpress/element';
+import {
+	ToggleControl,
+	__experimentalToolsPanel as ToolsPanel,
+	__experimentalToolsPanelItem as ToolsPanelItem,
+} from '@wordpress/components';
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+
+/**
+ * Internal dependencies
+ */
+import { useToolsPanelDropdownMenuProps } from '../utils/hooks';
+
+export default function Edit( {
+	attributes: { openByDefault },
+	clientId,
+	setAttributes,
+} ) {
+	const dropdownMenuProps = useToolsPanelDropdownMenuProps();
+
+	const { isSelected, getBlockOrder } = useSelect(
+		( select ) => {
+			const {
+				isBlockSelected,
+				hasSelectedInnerBlock,
+				getBlockOrder: getBlockOrderSelector,
+			} = select( blockEditorStore );
+			return {
+				isSelected:
+					isBlockSelected( clientId ) ||
+					hasSelectedInnerBlock( clientId, true ),
+				getBlockOrder: getBlockOrderSelector,
+			};
+		},
+		[ clientId ]
+	);
+
+	const contentBlockClientId = getBlockOrder( clientId )[ 1 ];
+	const { updateBlockAttributes, __unstableMarkNextChangeAsNotPersistent } =
+		useDispatch( blockEditorStore );
+
+	useEffect( () => {
+		if ( contentBlockClientId ) {
+			__unstableMarkNextChangeAsNotPersistent();
+			updateBlockAttributes( contentBlockClientId, {
+				isSelected,
+			} );
+		}
+	}, [
+		isSelected,
+		contentBlockClientId,
+		__unstableMarkNextChangeAsNotPersistent,
+		updateBlockAttributes,
+	] );
+
+	const blockProps = useBlockProps();
+	const innerBlocksProps = useInnerBlocksProps(
+		{
+			...blockProps,
+			className: clsx( blockProps.className, {
+				'is-open': openByDefault || isSelected,
+			} ),
+		},
+		{
+			template: [
+				[ 'core/accordion-header', {} ],
+				[
+					'core/accordion-panel',
+					{
+						openByDefault,
+					},
+				],
+			],
+			templateLock: 'all',
+			directInsert: true,
+			templateInsertUpdatesSelection: true,
+		}
+	);
+
+	return (
+		<>
+			<InspectorControls key="setting">
+				<ToolsPanel
+					label={ __( 'Settings' ) }
+					resetAll={ () => {
+						setAttributes( { openByDefault: false } );
+						if ( contentBlockClientId ) {
+							updateBlockAttributes( contentBlockClientId, {
+								openByDefault: false,
+							} );
+						}
+					} }
+					dropdownMenuProps={ dropdownMenuProps }
+				>
+					<ToolsPanelItem
+						label={ __( 'Open by default' ) }
+						isShownByDefault
+						hasValue={ () => !! openByDefault }
+						onDeselect={ () => {
+							setAttributes( { openByDefault: false } );
+							if ( contentBlockClientId ) {
+								updateBlockAttributes( contentBlockClientId, {
+									openByDefault: false,
+								} );
+							}
+						} }
+					>
+						<ToggleControl
+							label={ __( 'Open by default' ) }
+							__nextHasNoMarginBottom
+							onChange={ ( value ) => {
+								setAttributes( {
+									openByDefault: value,
+								} );
+								if ( contentBlockClientId ) {
+									updateBlockAttributes(
+										contentBlockClientId,
+										{
+											openByDefault: value,
+										}
+									);
+								}
+							} }
+							checked={ openByDefault }
+							help={ __(
+								'Accordion content will be displayed by default.'
+							) }
+						/>
+					</ToolsPanelItem>
+				</ToolsPanel>
+			</InspectorControls>
+			<div { ...innerBlocksProps } />
+		</>
+	);
+}

package/src/accordion-content/icon.js

@@ -0,0 +1,28 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.5 9.5L9.5 9.5L9.5 8L19.5 8L19.5 9.5Z"
+			fill="currentColor"
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.5 13L9.5 13L9.5 11.5L19.5 11.5L19.5 13Z"
+			fill="currentColor"
+		/>
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.5 16.3999L9.5 16.3999L9.5 14.8999L19.5 14.8999L19.5 16.3999Z"
+			fill="currentColor"
+		/>
+		<Path d="M4.5 6.25L8.5 8.75L4.5 11.25L4.5 6.25Z" fill="currentColor" />
+	</SVG>
+);

package/src/accordion-content/icons.js

@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { createElement } from '@wordpress/element';
+
+export const plus = ( { width, height } ) => {
+	return createElement(
+		'span',
+		{
+			style: {
+				display: 'inline-block',
+				width: width || 24,
+				height: height || 24,
+				lineHeight: `${ height || 24 }px`,
+				textAlign: 'center',
+				fontSize: `${ ( height || 24 ) * 0.6 }px`,
+				fontWeight: 'bold',
+				color: 'currentColor',
+			},
+		},
+		'+'
+	);
+};

package/src/accordion-content/index.js

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

package/src/accordion-content/index.php

@@ -0,0 +1,73 @@
+<?php
+
+/**
+ * Server-side rendering of the `core/accordion-content` 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_content_render( $attributes, $content ) {
+	if ( ! $content ) {
+		return $content;
+	}
+
+	$p         = new WP_HTML_Tag_Processor( $content );
+	$unique_id = wp_unique_id( 'accordion-content-' );
+
+	// 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-content' ) ) ) {
+		$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-content__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-content` block on server.
+ *
+ * @since 6.6.0
+ */
+function register_block_core_accordion_content() {
+	register_block_type_from_metadata(
+		__DIR__ . '/accordion-content',
+		array(
+			'render_callback' => 'block_core_accordion_content_render',
+		)
+	);
+}
+add_action( 'init', 'register_block_core_accordion_content' );

package/src/accordion-content/init.js

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

package/src/accordion-content/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-header/block.json

@@ -0,0 +1,93 @@
+{
+	"$schema": "https://schemas.wp.org/trunk/block.json",
+	"apiVersion": 3,
+	"name": "core/accordion-header",
+	"version": "0.1.0",
+	"title": "Accordion Header",
+	"category": "design",
+	"description": "Displays an accordion header.",
+	"example": {},
+	"__experimental": true,
+	"parent": [ "core/accordion-content" ],
+	"usesContext": [
+		"core/accordion-icon-position",
+		"core/accordion-show-icon"
+	],
+	"supports": {
+		"anchor": true,
+		"color": {
+			"background": true,
+			"gradient": true
+		},
+		"align": false,
+		"border": true,
+		"interactivity": true,
+		"spacing": {
+			"padding": true,
+			"margin": [ "top", "bottom" ],
+			"__experimentalDefaultControls": {
+				"padding": true,
+				"margin": true
+			}
+		},
+		"__experimentalBorder": {
+			"color": true,
+			"radius": true,
+			"style": true,
+			"width": true,
+			"__experimentalDefaultControls": {
+				"color": true,
+				"radius": true,
+				"style": true,
+				"width": true
+			}
+		},
+		"typography": {
+			"textAlign": true,
+			"fontSize": true,
+			"__experimentalFontFamily": true,
+			"__experimentalFontWeight": true,
+			"__experimentalFontStyle": true,
+			"__experimentalTextTransform": true,
+			"__experimentalTextDecoration": true,
+			"__experimentalLetterSpacing": true,
+			"__experimentalDefaultControls": {
+				"fontSize": true,
+				"fontFamily": true
+			}
+		},
+		"shadow": true
+	},
+	"attributes": {
+		"openByDefault": {
+			"type": "boolean",
+			"default": false
+		},
+		"title": {
+			"type": "rich-text",
+			"source": "rich-text",
+			"selector": "span"
+		},
+		"level": {
+			"type": "number",
+			"default": 3
+		},
+		"levelOptions": {
+			"type": "array"
+		},
+		"textAlignment": {
+			"type": "string",
+			"default": "left"
+		},
+		"iconPosition": {
+			"type": "string",
+			"enum": [ "left", "right" ],
+			"default": "right"
+		},
+		"showIcon": {
+			"type": "boolean",
+			"default": true
+		}
+	},
+	"textdomain": "default"
+}

package/src/accordion-header/edit.js

@@ -0,0 +1,131 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import { __ } from '@wordpress/i18n';
+import { useEffect } from '@wordpress/element';
+import {
+	useBlockProps,
+	__experimentalUseBorderProps as useBorderProps,
+	__experimentalUseColorProps as useColorProps,
+	__experimentalGetSpacingClassesAndStyles as useSpacingProps,
+	__experimentalGetShadowClassesAndStyles as useShadowProps,
+	BlockControls,
+	HeadingLevelDropdown,
+	RichText,
+} from '@wordpress/block-editor';
+import { ToolbarGroup } from '@wordpress/components';
+/**
+ * Internal dependencies
+ */
+import { plus } from '../accordion-content/icons';
+
+const ICONS = {
+	plus,
+};
+
+export default function Edit( { attributes, setAttributes, context } ) {
+	const { level, title, textAlign, levelOptions } = attributes;
+	const {
+		'core/accordion-icon-position': iconPosition,
+		'core/accordion-show-icon': showIcon,
+	} = context;
+	const TagName = 'h' + level;
+
+	// Set icon attributes.
+	useEffect( () => {
+		if ( iconPosition !== undefined && showIcon !== undefined ) {
+			setAttributes( {
+				iconPosition,
+				showIcon,
+			} );
+		}
+	}, [ iconPosition, showIcon, setAttributes ] );
+
+	const blockProps = useBlockProps();
+	const borderProps = useBorderProps( attributes );
+	const colorProps = useColorProps( attributes );
+	const spacingProps = useSpacingProps( attributes );
+	const shadowProps = useShadowProps( attributes );
+
+	const Icon = ICONS.plus;
+	const shouldShowIcon = showIcon && Icon;
+
+	return (
+		<>
+			<BlockControls>
+				<ToolbarGroup>
+					<HeadingLevelDropdown
+						value={ level }
+						options={ levelOptions }
+						onChange={ ( newLevel ) =>
+							setAttributes( { level: newLevel } )
+						}
+					/>
+				</ToolbarGroup>
+			</BlockControls>
+			<TagName
+				{ ...blockProps }
+				className={ clsx(
+					blockProps.className,
+					colorProps.className,
+					borderProps.className,
+					'accordion-content__heading',
+					{
+						[ `has-custom-font-size` ]: blockProps.style.fontSize,
+						[ `icon-position-left` ]: iconPosition === 'left',
+						[ `has-text-align-${ textAlign }` ]: textAlign,
+					}
+				) }
+				style={ {
+					...borderProps.style,
+					...colorProps.style,
+					...shadowProps.style,
+				} }
+			>
+				<button
+					className={ clsx( 'accordion-content__toggle' ) }
+					style={ {
+						...spacingProps.style,
+					} }
+				>
+					<RichText
+						allowedFormats={ [
+							'core/bold',
+							'core/italic',
+							'core/image',
+							'core/strikethrough',
+						] }
+						disableLineBreaks
+						tagName="span"
+						value={ title }
+						onChange={ ( newTitle ) =>
+							setAttributes( { title: newTitle } )
+						}
+						placeholder={ __( 'Accordion title' ) }
+					/>
+					{ shouldShowIcon && (
+						<span
+							className={ clsx(
+								`accordion-content__toggle-icon`,
+								{
+									'has-icon-plus': true,
+								}
+							) }
+							style={ {
+								// TO-DO: make this configurable
+								width: `1.2em`,
+								height: `1.2em`,
+							} }
+						>
+							{ Icon && <Icon width="1.2em" height="1.2em" /> }
+						</span>
+					) }
+				</button>
+			</TagName>
+		</>
+	);
+}

package/src/accordion-header/icon.js

@@ -0,0 +1,16 @@
+/**
+ * WordPress dependencies
+ */
+import { SVG, Path } from '@wordpress/primitives';
+
+export default (
+	<SVG xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
+		<Path
+			fillRule="evenodd"
+			clipRule="evenodd"
+			d="M19.5 12.75L9.5 12.75L9.5 11.25L19.5 11.25L19.5 12.75Z"
+			fill="currentColor"
+		/>
+		<Path d="M4.5 9.5L8.5 12L4.5 14.5L4.5 9.5Z" fill="currentColor" />
+	</SVG>
+);

package/src/accordion-header/index.js

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

package/src/accordion-header/init.js

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

package/src/accordion-header/save.js

@@ -0,0 +1,79 @@
+/**
+ * External dependencies
+ */
+import clsx from 'clsx';
+/**
+ * WordPress dependencies
+ */
+import {
+	useBlockProps,
+	__experimentalGetBorderClassesAndStyles as getBorderClassesAndStyles,
+	__experimentalGetColorClassesAndStyles as getColorClassesAndStyles,
+	__experimentalGetSpacingClassesAndStyles as getSpacingClassesAndStyles,
+	__experimentalGetShadowClassesAndStyles as getShadowClassesAndStyles,
+	RichText,
+} from '@wordpress/block-editor';
+/**
+ * Internal dependencies
+ */
+import { plus } from '../accordion-content/icons';
+
+const ICONS = {
+	plus,
+};
+
+export default function save( { attributes } ) {
+	const { level, title, iconPosition, textAlign, showIcon } = attributes;
+	const TagName = 'h' + level;
+
+	const blockProps = useBlockProps.save();
+	const borderProps = getBorderClassesAndStyles( attributes );
+	const colorProps = getColorClassesAndStyles( attributes );
+	const spacingProps = getSpacingClassesAndStyles( attributes );
+	const shadowProps = getShadowClassesAndStyles( attributes );
+
+	const Icon = ICONS.plus;
+
+	return (
+		<TagName
+			{ ...blockProps }
+			className={ clsx(
+				blockProps.className,
+				colorProps.className,
+				borderProps.className,
+				'accordion-content__heading',
+				{
+					[ `has-custom-font-size` ]: blockProps?.style?.fontSize,
+					[ `icon-position-left` ]: iconPosition === 'left',
+					[ `has-text-align-${ textAlign }` ]: textAlign,
+				}
+			) }
+			style={ {
+				...borderProps.style,
+				...colorProps.style,
+				...shadowProps.style,
+			} }
+		>
+			<button
+				className={ clsx( 'accordion-content__toggle' ) }
+				style={ {
+					...spacingProps.style,
+				} }
+			>
+				<RichText.Content tagName="span" value={ title } />
+				<span
+					className={ clsx( `accordion-content__toggle-icon`, {
+						'has-icon-plus': showIcon,
+					} ) }
+					style={ {
+						// TO-DO: make this configurable
+						width: `1.2em`,
+						height: `1.2em`,
+					} }
+				>
+					{ showIcon && <Icon width="1.2em" height="1.2em" /> }
+				</span>
+			</button>
+		</TagName>
+	);
+}