Details: Enable all non-interactive formats

[im3dabasia]

Closes: #68738

What?

PR removes hardcoded allowlist for RichText formats in the Details blocks. Now, all non-interactive formats are allowed within these blocks.

This changes matches the behaviour of the button, navigation block

Why?

Allows consumers to register custom formats that can be used with details blocks.

Testing instructions

1. Open a post or page.
2. Insert a details block.
3. Confirm that all non-interactive formats are visible for the details block.

Screenshots or screencast

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: im3dabasia <[email protected]>
Co-authored-by: carolinan <[email protected]>
Co-authored-by: Mamaduka <[email protected]>
Co-authored-by: shimotmk <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[carolinan]

Can you please test if you can make the language (and directional) option to work? When I try to use the "Apply" button, the details block opens and closes and the option does not seem to save.

Edit: its not only the apply button. If I click to select the language input field, it also closes or opens the details.

[Mamaduka]

@im3dabasia, do you mind rebasing on top of the latest trunk and resolving the merge conflict?

[im3dabasia]

I’d like to confirm that the language option does not seem to be working as expected. It appears that when the Apply button is clicked, the settings are not applied, and the modal remains open.

Language and direction option

Screen.Recording.2025-01-29.at.9.00.29.PM.mov

All other options

Screen.Recording.2025-01-29.at.8.59.37.PM.mov

I’m looking into this and will try to find a fix.

[im3dabasia]

Hey @Mamaduka,

After debugging for a while, I found that allowedFormats is specified by default for RichText unless explicitly overridden by passing custom options as an array.

I believe the issue is with the onClick event added to the <summary> element. By default, the browser handles the toggling of <details>, but in our case, the onClick on <summary> overrides this behavior, which might be causing issues.

After adjusting the code slightly, I was able to apply both the language and direction options without any issues. This happens because events are likely delegated or bubbled to a common parent, possibly the language modal and the summary element, causing unintended behavior.

Consider the following structure:

<div> <!-- Common Parent -->

    <div> <!-- Deep inside: Details & Summary Block -->
        <details>
            <summary>Click Me</summary>
            <p>Some extra details...</p>
        </details>
    </div>

    <div> <!-- Modal Wrapper -->
        <div class="modal">Language Settings</div>
    </div>

</div>

The modal's actions, such as onClick, are bubbling up to the common parent. Since the open/close state of <details> is managed manually using React state instead of the browser’s built-in handling, these bubbled events interfere with the summary’s behavior. This results in unexpected behavior, such as <details> toggling incorrectly when interacting with the modal.

Code change which worked for me

Used onToggle in the details block along with e.target.open.

diff --git a/packages/block-library/src/details/edit.js b/packages/block-library/src/details/edit.js
index ded12c15fc..693e0fb310 100644
--- a/packages/block-library/src/details/edit.js
+++ b/packages/block-library/src/details/edit.js
@@ -91,13 +91,12 @@ function DetailsEdit( { attributes, setAttributes } ) {
 					) }
 				/>
 			</InspectorControls>
-			<details { ...innerBlocksProps } open={ isOpen }>
-				<summary
-					onClick={ ( event ) => {
-						event.preventDefault();
-						setIsOpen( ! isOpen );
-					} }
-				>
+			<details
+				{ ...innerBlocksProps }
+				open={ isOpen }
+				onToggle={ ( event ) => setIsOpen( event.target.open ) }
+			>
+				<summary>
 					<RichText
 						identifier="summary"
 						aria-label={ __( 'Write summary' ) }

Screencast

Screen.Recording.2025-01-29.at.11.06.01.PM.mov

Let me know your thoughts!

[Mamaduka]

@im3dabasia, what's the status on this PR?

@shimotmk, did you get a chance to test this?

[im3dabasia]

@Mamaduka ,

I have made the code changes and updated the PR. I used onToggle on the details element rather than an onClick on the summary element. I explained my reasoning in my observations #68741 (comment).

Please let me know what you think about this approach.

I'm attaching a video reference to demonstrate that all formats now work correctly.

Screen.Recording.2025-03-28.at.12.14.46.PM.mov

[Mamaduka]

Thanks, @im3dabasia! Works like a charm ✅

[t-hamano]

This PR was not originally planned to be backported to WP 6.8.2, but was cherry-picked to resolve a conflict when cherry-picking other releases. See #70557 (comment) for more details.