Details Block: Remove experimental flag and stabilize (#50997)

* Details Block: Enable by default on Gutenberg plugin without opt-in

* Add fixture

* Stabilize the block

Author: t-hamano

docs/reference-guides/core-blocks.md

@@ -247,7 +247,6 @@ Add an image or video with a text overlay. ([Source](https://github.com/WordPres
 Hide and show additional content. ([Source](https://github.com/WordPress/gutenberg/tree/trunk/packages/block-library/src/details))
 
 -	**Name:** core/details
--	**Experimental:** true
 -	**Category:** text
 -	**Supports:** align (full, wide), color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
 -	**Attributes:** showContent, summary

lib/experimental/editor-settings.php

@@ -86,9 +86,6 @@ function gutenberg_enable_experiments() {
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-group-grid-variation', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableGroupGridVariation = true', 'before' );
 	}
-	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-details-blocks', $gutenberg_experiments ) ) {
-		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnableDetailsBlocks = true', 'before' );
-	}
 	if ( $gutenberg_experiments && array_key_exists( 'gutenberg-pattern-enhancements', $gutenberg_experiments ) ) {
 		wp_add_inline_script( 'wp-block-editor', 'window.__experimentalEnablePatternEnhancements = true', 'before' );
 	}

lib/experiments-page.php

@@ -77,18 +77,6 @@ function gutenberg_initialize_experiments_settings() {
 		)
 	);
 
-	add_settings_field(
-		'gutenberg-details-blocks',
-		__( 'Details block', 'gutenberg' ),
-		'gutenberg_display_experiment_field',
-		'gutenberg-experiments',
-		'gutenberg_experiments_section',
-		array(
-			'label' => __( 'Test the Details block', 'gutenberg' ),
-			'id'    => 'gutenberg-details-blocks',
-		)
-	);
-
 	add_settings_field(
 		'gutenberg-theme-previews',
 		__( 'Block Theme Previews', 'gutenberg' ),

packages/block-library/src/details/block.json

@@ -1,7 +1,6 @@
 {
 	"$schema": "https://schemas.wp.org/trunk/block.json",
 	"apiVersion": 2,
-	"__experimental": true,
 	"name": "core/details",
 	"title": "Details",
 	"category": "text",

packages/block-library/src/index.js

@@ -147,6 +147,7 @@ const getAllBlocks = () => {
 		columns,
 		commentAuthorAvatar,
 		cover,
+		details,
 		embed,
 		file,
 		group,
@@ -226,9 +227,6 @@ const getAllBlocks = () => {
 		queryTitle,
 		postAuthorBiography,
 	];
-	if ( window?.__experimentalEnableDetailsBlocks ) {
-		blocks.push( details );
-	}
 	return blocks.filter( Boolean );
 };
 

test/integration/fixtures/blocks/core__details.html

@@ -0,0 +1,7 @@
+<!-- wp:details {"summary":"Details Summary"} -->
+<details class="wp-block-details"><summary>Details Summary</summary>
+	<!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
+	<p>Details Content</p>
+	<!-- /wp:paragraph -->
+</details>
+<!-- /wp:details -->

test/integration/fixtures/blocks/core__details.json

@@ -0,0 +1,22 @@
+[
+	{
+		"name": "core/details",
+		"isValid": true,
+		"attributes": {
+			"showContent": false,
+			"summary": "Details Summary"
+		},
+		"innerBlocks": [
+			{
+				"name": "core/paragraph",
+				"isValid": true,
+				"attributes": {
+					"content": "Details Content",
+					"dropCap": false,
+					"placeholder": "Type / to add a hidden block"
+				},
+				"innerBlocks": []
+			}
+		]
+	}
+]

test/integration/fixtures/blocks/core__details.parsed.json

@@ -0,0 +1,25 @@
+[
+	{
+		"blockName": "core/details",
+		"attrs": {
+			"summary": "Details Summary"
+		},
+		"innerBlocks": [
+			{
+				"blockName": "core/paragraph",
+				"attrs": {
+					"placeholder": "Type / to add a hidden block"
+				},
+				"innerBlocks": [],
+				"innerHTML": "\n\t<p>Details Content</p>\n\t",
+				"innerContent": [ "\n\t<p>Details Content</p>\n\t" ]
+			}
+		],
+		"innerHTML": "\n<details class=\"wp-block-details\"><summary>Details Summary</summary>\n\t\n</details>\n",
+		"innerContent": [
+			"\n<details class=\"wp-block-details\"><summary>Details Summary</summary>\n\t",
+			null,
+			"\n</details>\n"
+		]
+	}
+]

test/integration/fixtures/blocks/core__details.serialized.html

@@ -0,0 +1,5 @@
+<!-- wp:details {"summary":"Details Summary"} -->
+<details class="wp-block-details"><summary>Details Summary</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
+<p>Details Content</p>
+<!-- /wp:paragraph --></details>
+<!-- /wp:details -->