Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add Accordion Block #64119

Open
wants to merge 22 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
fe0aaee
Add initial accordion implementation.
jffng Jul 30, 2024
ebfc5f5
Refactor blocks for core loading.
jffng Jul 30, 2024
c58232f
Simplify state getter by storing id in the context.
jffng Aug 1, 2024
4698eee
Clean up tag processing and try to initialize state on the server.
jffng Aug 2, 2024
3c2c54b
Don't enqueue the frontend files if there's no content
luisherranz Aug 6, 2024
d4101b4
Stringify the autoclose value
luisherranz Aug 6, 2024
872ecf1
Refactor to populate `context.isOpen` on the server
luisherranz Aug 6, 2024
5f9e24a
Add comments to the server side rendering functions.
jffng Aug 6, 2024
b790e90
Improve the block editing UX
jffng Aug 6, 2024
7a05993
Reword the auto-close toggle help text.
jffng Aug 12, 2024
cea68d0
Add padding to the content and trigger by default.
jffng Aug 12, 2024
96c37c9
Fix aria-labelledby and aria-controls references.
jffng Aug 14, 2024
151655b
Allow HeadingLevelOptions to be extended.
jffng Aug 14, 2024
37315e4
Only allow bold, italic, image, and strikethrough for the Trigger.
jffng Aug 16, 2024
7f17891
Disable keyboard navigation for focusable elements when aria-hidden i…
jffng Aug 16, 2024
6c91e72
Fix __next40pxDefaultSize linting error.
jffng Aug 16, 2024
72fdd46
Refactor how state and context are initialized to avoid the need for …
jffng Aug 16, 2024
5967cf1
Use strings for openByDefault so boolean is in the generated JSON.
jffng Sep 3, 2024
db03ba8
Use inert instead of aria-hidden.
jffng Sep 3, 2024
93deeee
Rename Trigger and Content to Header and Panel.
jffng Sep 16, 2024
84112e3
Rename interactivity to script modules.
jffng Sep 16, 2024
542ac20
Remove unused watch directive for setting the tabIndex.
jffng Sep 16, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
45 changes: 45 additions & 0 deletions docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,51 @@ This page lists the blocks included in the block-library package.

<!-- START TOKEN Autogenerated - DO NOT EDIT -->

## Accordion Group

A group of headers and associated expandable content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-group))

- **Name:** core/accordion-group
- **Experimental:** true
- **Category:** design
- **Allowed Blocks:** core/accordion-item
- **Supports:** align (full, wide), background (backgroundImage, backgroundSize), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), ~~html~~
- **Attributes:** allowedBlocks, autoclose, iconPosition

## Accordion Header

Accordion header. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-header))

- **Name:** core/accordion-header
- **Experimental:** true
- **Category:** design
- **Parent:** core/accordion-item
- **Supports:** anchor, border, color (background, gradient, text), interactivity, layout, shadow, spacing (margin, padding), typography (fontSize, textAlign), ~~align~~
- **Attributes:** icon, iconPosition, level, levelOptions, openByDefault, textAlignment, title

## Accordion

A single accordion that displays a header and expandable content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-item))

- **Name:** core/accordion-item
- **Experimental:** true
- **Category:** design
- **Parent:** core/accordion-group
- **Allowed Blocks:** core/accordion-header, core/accordion-panel
- **Supports:** align (full, wide), color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin)
- **Attributes:** openByDefault

## Accordion Panel

Accordion Panel ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/accordion-panel))

- **Name:** core/accordion-panel
- **Experimental:** true
- **Category:** design
- **Parent:** core/accordion-item
- **Supports:** border, color (background, gradient, text), interactivity, layout, shadow, spacing (blockGap, margin, padding), typography (fontSize, lineHeight)
- **Attributes:** allowedBlocks, isSelected, openByDefault, templateLock

## Archives

Display a date archive of your posts. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/archives))
Expand Down
4 changes: 4 additions & 0 deletions lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ function gutenberg_reregister_core_block_types() {
$blocks_dirs = array(
__DIR__ . '/../build/block-library/blocks/' => array(
'block_folders' => array(
'accordion-header',
'accordion-panel',
'audio',
'button',
'buttons',
Expand Down Expand Up @@ -45,6 +47,8 @@ function gutenberg_reregister_core_block_types() {
'embed',
),
'block_names' => array(
'accordion-item.php' => 'core/accordion-item',
'accordion-group.php' => 'core/accordion-group',
'archives.php' => 'core/archives',
'avatar.php' => 'core/avatar',
'block.php' => 'core/block',
Expand Down
9 changes: 6 additions & 3 deletions lib/experimental/editor-settings.php
Original file line number Diff line number Diff line change
Expand Up @@ -28,15 +28,18 @@ function gutenberg_enable_experiments() {
if ( gutenberg_is_experiment_enabled( 'gutenberg-full-page-client-side-navigation' ) ) {
wp_add_inline_script( 'wp-block-library', 'window.__experimentalFullPageClientSideNavigation = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoomed-out-patterns-tab', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomedOutPatternsTab = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-quick-edit-dataviews', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalQuickEditDataViews = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-block-bindings-ui', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalBlockBindingsUI = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-media-processing', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalMediaProcessing = true', 'before' );
}
if ( $gutenberg_experiments && array_key_exists( 'gutenberg-zoom-out-experiment', $gutenberg_experiments ) ) {
wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableZoomOutExperiment = true', 'before' );
}
}

add_action( 'admin_init', 'gutenberg_enable_experiments' );
Expand Down
1 change: 1 addition & 0 deletions packages/block-library/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@
"{src,build,build-module}/*/init.js"
],
"wpScriptModuleExports": {
"./accordion-group/view": "./build-module/accordion-group/view.js",
"./file/view": "./build-module/file/view.js",
"./image/view": "./build-module/image/view.js",
"./navigation/view": "./build-module/navigation/view.js",
Expand Down
61 changes: 61 additions & 0 deletions packages/block-library/src/accordion-group/block.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
{
"$schema": "https://schemas.wp.org/trunk/block.json",
"apiVersion": 3,
"name": "core/accordion-group",
"title": "Accordion Group",
"category": "design",
"description": "A group of 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"
},
"autoclose": {
"type": "boolean",
"default": false
},
"allowedBlocks": {
"type": "array"
}
},
"allowedBlocks": [ "core/accordion-item" ],
"textdomain": "default",
"style": "wp-block-accordion-group"
}
49 changes: 49 additions & 0 deletions packages/block-library/src/accordion-group/edit.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* WordPress dependencies
*/
import {
useBlockProps,
useInnerBlocksProps,
InspectorControls,
} from '@wordpress/block-editor';
import { __ } from '@wordpress/i18n';
import { PanelBody, ToggleControl } from '@wordpress/components';

const ACCORDION_BLOCK_NAME = 'core/accordion-item';
const ACCORDION_BLOCK = {
name: ACCORDION_BLOCK_NAME,
};

export default function Edit( { attributes: { autoclose }, setAttributes } ) {
const blockProps = useBlockProps();

const innerBlocksProps = useInnerBlocksProps( blockProps, {
template: [ [ ACCORDION_BLOCK_NAME ], [ ACCORDION_BLOCK_NAME ] ],
defaultBlock: ACCORDION_BLOCK,
directInsert: true,
} );

return (
<>
<InspectorControls key="setting">
<PanelBody title={ __( 'Settings' ) } initialOpen>
<ToggleControl
isBlock
__nextHasNoMarginBottom
label={ __( 'Auto-close' ) }
onChange={ ( value ) => {
setAttributes( {
autoclose: value,
} );
} }
checked={ autoclose }
help={ __(
'Automatically close accordions when a new one is opened.'
) }
/>
</PanelBody>
</InspectorControls>
<div { ...innerBlocksProps } />
</>
);
}
49 changes: 49 additions & 0 deletions packages/block-library/src/accordion-group/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
/**
* WordPress dependencies
*/
import { SVG, Path } from '@wordpress/components';
/**
* Internal dependencies
*/
import edit from './edit';
import save from './save';
import metadata from './block.json';
import initBlock from '../utils/init-block';

const icon = (
<SVG
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M19.5 9.25L9.5 9.25L9.5 7.75L19.5 7.75L19.5 9.25Z"
fill="currentColor"
/>
<Path d="M4.5 6L8.5 8.5L4.5 11L4.5 6Z" fill="currentColor" />
<Path
fillRule="evenodd"
clipRule="evenodd"
d="M19.5 16.25L9.5 16.25L9.5 14.75L19.5 14.75L19.5 16.25Z"
fill="currentColor"
/>
<Path d="M4.5 13L8.5 15.5L4.5 18L4.5 13Z" fill="currentColor" />
</SVG>
);

const { name } = metadata;

export { metadata, name };

export const settings = {
icon,
example: {},
edit,
save,
};

export const init = () => initBlock( { name, metadata, settings } );
59 changes: 59 additions & 0 deletions packages/block-library/src/accordion-group/index.php
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
<?php
/**
* Server-side rendering of the `core/accordion-group` 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_accordion_group( $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/accordion-group/view.min.js' );
}

wp_register_script_module(
'@wordpress/block-library/accordion-group',
isset( $module_url ) ? $module_url : includes_url( "blocks/accordion-group/view{$suffix}.js" ),
array( '@wordpress/interactivity' ),
defined( 'GUTENBERG_VERSION' ) ? GUTENBERG_VERSION : get_bloginfo( 'version' )
);

wp_enqueue_script_module( '@wordpress/block-library/accordion-group' );

$p = new WP_HTML_Tag_Processor( $content );
$autoclose = $attributes['autoclose'] ? 'true' : 'false';
luisherranz marked this conversation as resolved.
Show resolved Hide resolved

if ( $p->next_tag( array( 'class_name' => 'wp-block-accordion-group' ) ) ) {
$p->set_attribute( 'data-wp-interactive', 'core/accordion' );
$p->set_attribute( 'data-wp-context', '{ "autoclose": ' . $autoclose . ', "isOpen": [] }' );

// Only modify content if directives have been set.
$content = $p->get_updated_html();
}

return $content;
}

/**
* Registers the `core/accordion-group` block on server.
*
* @since 6.6.0
*/
function register_block_core_accordion_group() {
register_block_type_from_metadata(
__DIR__ . '/accordion-group',
array(
'render_callback' => 'render_block_core_accordion_group',
)
);
}
add_action( 'init', 'register_block_core_accordion_group' );
6 changes: 6 additions & 0 deletions packages/block-library/src/accordion-group/init.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
/**
* Internal dependencies
*/
import { init } from './';

export default init();
23 changes: 23 additions & 0 deletions packages/block-library/src/accordion-group/save.js
Original file line number Diff line number Diff line change
@@ -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 } ) } />
);
}
Loading
Loading