Gutenberg experiments settings page. (#16626)

* Gutenberg experiments settings page.

* Address PR feedback.

* Fix labels and heading semantics

* UI improvements and disable by default.

* Updated docs.

* Address review feedback.

* Changed feature flag logic

* Remove check for test env

* Merge experiments settings with existing settings.

* Enable experimental blocks in test.

* Prettify.

* Docs updates

* Remove extra whitespace.

* Change function name.

gutenberg.php

@@ -43,14 +43,16 @@ function gutenberg_menu() {
 		'gutenberg'
 	);
 
-	add_submenu_page(
-		'gutenberg',
-		__( 'Widgets (beta)', 'gutenberg' ),
-		__( 'Widgets (beta)', 'gutenberg' ),
-		'edit_theme_options',
-		'gutenberg-widgets',
-		'the_gutenberg_widgets'
-	);
+	if ( get_option( 'gutenberg-experiments' ) && array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) ) {
+		add_submenu_page(
+			'gutenberg',
+			__( 'Widgets (beta)', 'gutenberg' ),
+			__( 'Widgets (beta)', 'gutenberg' ),
+			'edit_theme_options',
+			'gutenberg-widgets',
+			'the_gutenberg_widgets'
+		);
+	}
 
 	if ( current_user_can( 'edit_posts' ) ) {
 		$submenu['gutenberg'][] = array(
@@ -65,6 +67,15 @@ function gutenberg_menu() {
 			'https://developer.wordpress.org/block-editor/',
 		);
 	}
+
+	add_submenu_page(
+		'gutenberg',
+		__( 'Experiments Settings', 'gutenberg' ),
+		__( 'Experiments', 'gutenberg' ),
+		'edit_posts',
+		'gutenberg-experiments',
+		'the_gutenberg_experiments'
+	);
 }
 add_action( 'admin_menu', 'gutenberg_menu' );
 

lib/experiments-page.php

@@ -0,0 +1,120 @@
+<?php
+/**
+ * Bootstraping the Gutenberg experiments page.
+ *
+ * @package gutenberg
+ */
+
+/**
+ * The main entry point for the Gutenberg experiments page.
+ *
+ * @since 6.3.0
+ *
+ * @param string $page The page name the function is being called for, `'gutenberg_customizer'` for the Customizer.
+ */
+function the_gutenberg_experiments( $page = 'gutenberg_page_gutenberg-experiments' ) {
+	?>
+	<div
+		id="experiments-editor"
+		class="wrap"
+	>
+	<h1><?php echo __( 'Experiment settings', 'gutenberg' ); ?></h1>
+	<?php settings_errors(); ?>
+	<form method="post" action="options.php">
+		<?php settings_fields( 'gutenberg-experiments' ); ?>
+		<?php do_settings_sections( 'gutenberg-experiments' ); ?>           
+		<?php submit_button(); ?>
+	</form>
+	</div>
+	<?php
+}
+
+/**
+ * Set up the experiments settings.
+ *
+ * @since 6.3.0
+ */
+function gutenberg_initialize_experiments_settings() {
+	add_settings_section(
+		'gutenberg_experiments_section',
+		// The empty string ensures the render function won't output a h2.
+		'',
+		'gutenberg_display_experiment_section',
+		'gutenberg-experiments'
+	);
+	add_settings_field(
+		'gutenberg-widget-experiments',
+		__( 'Widgets', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable Widgets Screen and Legacy Widget Block', 'gutenberg' ),
+			'id'    => 'gutenberg-widget-experiments',
+		)
+	);
+	add_settings_field(
+		'gutenberg-menu-block',
+		__( 'Menu Block', 'gutenberg' ),
+		'gutenberg_display_experiment_field',
+		'gutenberg-experiments',
+		'gutenberg_experiments_section',
+		array(
+			'label' => __( 'Enable Navigation Menu Block', 'gutenberg' ),
+			'id'    => 'gutenberg-menu-block',
+		)
+	);
+	register_setting(
+		'gutenberg-experiments',
+		'gutenberg-experiments'
+	);
+}
+
+add_action( 'admin_init', 'gutenberg_initialize_experiments_settings' );
+
+/**
+ * Display a checkbox field for a Gutenberg experiment.
+ *
+ * @since 6.3.0
+ *
+ * @param array $args ( $label, $id ).
+ */
+function gutenberg_display_experiment_field( $args ) {
+	$options = get_option( 'gutenberg-experiments' );
+	$value   = isset( $options[ $args['id'] ] ) ? 1 : 0;
+	?>
+		<label for="<?php echo $args['id']; ?>">
+			<input type="checkbox" name="<?php echo 'gutenberg-experiments[' . $args['id'] . ']'; ?>" id="<?php echo $args['id']; ?>" value="1" <?php checked( 1, $value ); ?> />
+			<?php echo $args['label']; ?>
+		</label>
+	<?php
+}
+
+/**
+ * Display the experiments section.
+ *
+ * @since 6.3.0
+ */
+function gutenberg_display_experiment_section() {
+	?>
+	<p><?php echo __( 'Gutenberg has some experimental features you can turn on. Simply select each you would like to use. These features are likely to change so it is inadvisable to use them in production.', 'gutenberg' ); ?></p>
+
+	<?php
+}
+
+/**
+ * Extends default editor settings with experiments settings.
+ *
+ * @param array $settings Default editor settings.
+ *
+ * @return array Filtered editor settings.
+ */
+function gutenberg_experiments_editor_settings( $settings ) {
+	$experiments_exist    = get_option( 'gutenberg-experiments' );
+	$experiments_settings = array(
+		'__experimentalEnableLegacyWidgetBlock' => $experiments_exist ? array_key_exists( 'gutenberg-widget-experiments', get_option( 'gutenberg-experiments' ) ) : false,
+		'__experimentalEnableMenuBlock'         => $experiments_exist ? array_key_exists( 'gutenberg-menu-block', get_option( 'gutenberg-experiments' ) ) : false,
+	);
+	return array_merge( $settings, $experiments_settings );
+}
+add_filter( 'block_editor_settings', 'gutenberg_experiments_editor_settings' );

lib/load.php

@@ -35,4 +35,5 @@
 require dirname( __FILE__ ) . '/demo.php';
 require dirname( __FILE__ ) . '/widgets.php';
 require dirname( __FILE__ ) . '/widgets-page.php';
+require dirname( __FILE__ ) . '/experiments-page.php';
 require dirname( __FILE__ ) . '/customizer.php';

packages/block-editor/README.md

@@ -382,7 +382,9 @@ The default editor settings
  bodyPlaceholder                        string        Empty post placeholder
  titlePlaceholder                       string        Empty title placeholder
  codeEditingEnabled                     string        Whether or not the user can switch to the code editor
- \_\_experimentalCanUserUseUnfilteredHTML string        Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+ **experimentalCanUserUseUnfilteredHTML string        Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+ **experimentalEnableLegacyWidgetBlock  boolean       Whether the user has enabled the Legacy Widget Block
+ \_\_experimentalEnableMenuBlock          boolean       Whether the user has enabled the Menu Block
 
 <a name="SkipToSelectedBlock" href="#SkipToSelectedBlock">#</a> **SkipToSelectedBlock**
 

packages/block-editor/src/store/defaults.js

@@ -28,6 +28,8 @@ export const PREFERENCES_DEFAULTS = {
  *  titlePlaceholder                       string        Empty title placeholder
  *  codeEditingEnabled                     string        Whether or not the user can switch to the code editor
  *  __experimentalCanUserUseUnfilteredHTML string        Whether the user should be able to use unfiltered HTML or the HTML should be filtered e.g., to remove elements considered insecure like iframes.
+ *  __experimentalEnableLegacyWidgetBlock  boolean       Whether the user has enabled the Legacy Widget Block
+ *  __experimentalEnableMenuBlock          boolean       Whether the user has enabled the Menu Block
  */
 export const SETTINGS_DEFAULTS = {
 	alignWide: false,
@@ -144,5 +146,7 @@ export const SETTINGS_DEFAULTS = {
 	availableLegacyWidgets: {},
 	hasPermissionsToManageWidgets: false,
 	__experimentalCanUserUseUnfilteredHTML: false,
+	__experimentalEnableLegacyWidgetBlock: false,
+	__experimentalEnableMenuBlock: false,
 };
 

packages/block-library/src/index.js

@@ -62,6 +62,23 @@ import * as tagCloud from './tag-cloud';
 
 import * as classic from './classic';
 
+/**
+ * Function to register an individual block.
+ *
+ * @param {Object} block The block to be registered.
+ *
+ */
+const registerBlock = ( block ) => {
+	if ( ! block ) {
+		return;
+	}
+	const { metadata, settings, name } = block;
+	if ( metadata ) {
+		unstable__bootstrapServerSideBlockDefinitions( { [ name ]: metadata } ); // eslint-disable-line camelcase
+	}
+	registerBlockType( name, settings );
+};
+
 /**
  * Function to register core blocks provided by the block editor.
  *
@@ -104,11 +121,8 @@ export const registerCoreBlocks = () => {
 		mediaText,
 		latestComments,
 		latestPosts,
-		process.env.GUTENBERG_PHASE === 2 ? legacyWidget : null,
 		missing,
 		more,
-		process.env.GUTENBERG_PHASE === 2 ? navigationMenu : null,
-		process.env.GUTENBERG_PHASE === 2 ? navigationMenuItem : null,
 		nextpage,
 		preformatted,
 		pullquote,
@@ -124,16 +138,7 @@ export const registerCoreBlocks = () => {
 		textColumns,
 		verse,
 		video,
-	].forEach( ( block ) => {
-		if ( ! block ) {
-			return;
-		}
-		const { metadata, settings, name } = block;
-		if ( metadata ) {
-			unstable__bootstrapServerSideBlockDefinitions( { [ name ]: metadata } ); // eslint-disable-line camelcase
-		}
-		registerBlockType( name, settings );
-	} );
+	].forEach( registerBlock );
 
 	setDefaultBlockName( paragraph.name );
 	if ( window.wp && window.wp.oldEditor ) {
@@ -145,3 +150,25 @@ export const registerCoreBlocks = () => {
 		setGroupingBlockName( group.name );
 	}
 };
+
+/**
+ * Function to register experimental core blocks depending on editor settings.
+ *
+ * @param {Object} settings Editor settings.
+ *
+ * @example
+ * ```js
+ * import { __experimentalRegisterExperimentalCoreBlocks } from '@wordpress/block-library';
+ *
+ * __experimentalRegisterExperimentalCoreBlocks( settings );
+ * ```
+ */
+export const __experimentalRegisterExperimentalCoreBlocks = process.env.GUTENBERG_PHASE === 2 ? ( settings ) => {
+	const { __experimentalEnableLegacyWidgetBlock, __experimentalEnableMenuBlock } = settings;
+
+	[
+		__experimentalEnableLegacyWidgetBlock ? legacyWidget : null,
+		__experimentalEnableMenuBlock ? navigationMenu : null,
+		__experimentalEnableMenuBlock ? navigationMenuItem : null,
+	].forEach( registerBlock );
+} : undefined;

packages/block-library/src/navigation-menu/index.js

@@ -26,7 +26,7 @@ export const settings = {
 		align: [ 'wide', 'full' ],
 		anchor: true,
 		html: false,
-		inserter: false,
+		inserter: true,
 	},
 
 	edit,

packages/e2e-test-utils/src/enable-experimental-features.js

@@ -0,0 +1,27 @@
+/**
+ * WordPress dependencies
+ */
+import { addQueryArgs } from '@wordpress/url';
+
+/**
+ * Internal dependencies
+ */
+import { visitAdminPage } from './visit-admin-page';
+
+/**
+ * Enables experimental features from the plugin settings section.
+ *
+ * @param {Array} features Array of {string} selectors of settings to enable. Assumes they can be enabled with one click.
+ */
+export async function enableExperimentalFeatures( features ) {
+	const query = addQueryArgs( '', {
+		page: 'gutenberg-experiments',
+	} );
+	await visitAdminPage( '/admin.php', query );
+
+	await Promise.all( features.map( async ( feature ) => {
+		await page.waitForSelector( feature );
+		await page.click( feature );
+		await page.click( '#submit' );
+	} ) );
+}

packages/e2e-test-utils/src/index.js

@@ -11,6 +11,7 @@ export { createURL } from './create-url';
 export { deactivatePlugin } from './deactivate-plugin';
 export { disablePrePublishChecks } from './disable-pre-publish-checks';
 export { dragAndResize } from './drag-and-resize';
+export { enableExperimentalFeatures } from './enable-experimental-features';
 export { enablePageDialogAccept } from './enable-page-dialog-accept';
 export { enablePrePublishChecks } from './enable-pre-publish-checks';
 export { ensureSidebarOpened } from './ensure-sidebar-opened';

packages/e2e-tests/specs/block-transforms.test.js

@@ -19,6 +19,7 @@ import {
 	getEditedPostContent,
 	hasBlockSwitcher,
 	createNewPost,
+	enableExperimentalFeatures,
 	setPostContent,
 	selectBlockByClientId,
 	transformBlockTo,
@@ -99,6 +100,7 @@ describe( 'Block transforms', () => {
 
 	const transformStructure = {};
 	beforeAll( async () => {
+		await enableExperimentalFeatures( [ '#gutenberg-widget-experiments', '#gutenberg-menu-block' ] );
 		await createNewPost();
 
 		for ( const fileBase of fileBasenames ) {

packages/edit-post/src/index.js

@@ -7,7 +7,7 @@ import '@wordpress/editor';
 import '@wordpress/nux';
 import '@wordpress/viewport';
 import '@wordpress/notices';
-import { registerCoreBlocks } from '@wordpress/block-library';
+import { registerCoreBlocks, __experimentalRegisterExperimentalCoreBlocks } from '@wordpress/block-library';
 import { render, unmountComponentAtNode } from '@wordpress/element';
 
 /**
@@ -65,8 +65,10 @@ export function reinitializeEditor( postType, postId, target, settings, initialE
 export function initializeEditor( id, postType, postId, settings, initialEdits ) {
 	const target = document.getElementById( id );
 	const reboot = reinitializeEditor.bind( null, postType, postId, target, settings, initialEdits );
-
 	registerCoreBlocks();
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		__experimentalRegisterExperimentalCoreBlocks( settings );
+	}
 
 	// Show a console log warning if the browser is not in Standards rendering mode.
 	const documentMode = document.compatMode === 'CSS1Compat' ? 'Standards' : 'Quirks';

packages/edit-widgets/src/index.js

@@ -3,7 +3,7 @@
  */
 import '@wordpress/notices';
 import { render } from '@wordpress/element';
-import { registerCoreBlocks } from '@wordpress/block-library';
+import { registerCoreBlocks, __experimentalRegisterExperimentalCoreBlocks } from '@wordpress/block-library';
 
 /**
  * Internal dependencies
@@ -21,6 +21,9 @@ import CustomizerEditWidgetsInitializer from './components/customizer-edit-widge
  */
 export function initialize( id, settings ) {
 	registerCoreBlocks();
+	if ( process.env.GUTENBERG_PHASE === 2 ) {
+		__experimentalRegisterExperimentalCoreBlocks( settings );
+	}
 	render(
 		<EditWidgetsInitializer
 			settings={ settings }

packages/editor/src/components/provider/index.js

@@ -99,6 +99,8 @@ class EditorProvider extends Component {
 				'template',
 				'templateLock',
 				'titlePlaceholder',
+				'__experimentalEnableLegacyWidgetBlock',
+				'__experimentalEnableMenuBlock',
 			] ),
 			__experimentalReusableBlocks: reusableBlocks,
 			__experimentalMediaUpload: hasUploadPermissions ? mediaUpload : undefined,