List: use nested blocks (#42711)

Co-authored-by: André <[email protected]>

lib/experimental/block-editor-settings-mobile.php

@@ -29,8 +29,8 @@ function gutenberg_get_block_editor_settings_mobile( $settings ) {
  // To tell mobile that the site uses quote v2 (inner blocks).
  // See https://github.com/WordPress/gutenberg/pull/25892.
  $settings['__experimentalEnableQuoteBlockV2'] = true;
- // To be set to true when the web makes quote v2 (inner blocks) the default.
- $settings['__experimentalEnableListBlockV2'] = gutenberg_is_list_v2_enabled();
+ // To tell mobile that the site uses list v2 (inner blocks).
+ $settings['__experimentalEnableListBlockV2'] = true;
  }
 
  return $settings;

lib/experiments-page.php

@@ -40,18 +40,6 @@ function gutenberg_initialize_experiments_settings() {
  'gutenberg_display_experiment_section',
  'gutenberg-experiments'
  );
-
- add_settings_field(
- 'gutenberg-list-v2',
- __( 'List block v2', 'gutenberg' ),
- 'gutenberg_display_experiment_field',
- 'gutenberg-experiments',
- 'gutenberg_experiments_section',
- array(
- 'label' => __( 'Test a new list block that uses nested list item blocks (Warning: The new block is not ready. You may experience content loss, avoid using it on production sites)', 'gutenberg' ),
- 'id' => 'gutenberg-list-v2',
- )
- );
  register_setting(
  'gutenberg-experiments',
  'gutenberg-experiments'

lib/load.php

@@ -103,7 +103,6 @@ function gutenberg_is_experiment_enabled( $name ) {
 require __DIR__ . '/experimental/class-wp-webfonts-provider.php';
 require __DIR__ . '/experimental/class-wp-webfonts-provider-local.php';
 require __DIR__ . '/experimental/webfonts.php';
-require __DIR__ . '/experimental/blocks.php';
 require __DIR__ . '/experimental/navigation-theme-opt-in.php';
 require __DIR__ . '/experimental/navigation-page.php';
 

packages/block-editor/src/components/block-list/use-block-props/use-focus-first-element.js

@@ -85,7 +85,7 @@ export function useFocusFirstElement( clientId ) {
  const { ownerDocument } = ref.current;
 
  // Do not focus the block if it already contains the active element.
- if ( ref.current.contains( ownerDocument.activeElement ) ) {
+ if ( isInsideRootBlock( ref.current, ownerDocument.activeElement ) ) {
  return;
  }
 

packages/block-editor/src/components/writing-flow/use-select-all.js

@@ -37,28 +37,25 @@ export default function useSelectAll() {
  return;
  }
 
+ event.preventDefault();
+
  const [ firstSelectedClientId ] = selectedClientIds;
  const rootClientId = getBlockRootClientId( firstSelectedClientId );
- let blockClientIds = getBlockOrder( rootClientId );
+ const blockClientIds = getBlockOrder( rootClientId );
 
  // If we have selected all sibling nested blocks, try selecting up a
  // level. See: https://github.com/WordPress/gutenberg/pull/31859/
  if ( selectedClientIds.length === blockClientIds.length ) {
- blockClientIds = getBlockOrder(
- getBlockRootClientId( rootClientId )
- );
- }
-
- const firstClientId = first( blockClientIds );
- const lastClientId = last( blockClientIds );
-
- if ( firstClientId === lastClientId ) {
- selectBlock( firstClientId );
+ if ( rootClientId ) {
+ node.ownerDocument.defaultView
+ .getSelection()
+ .removeAllRanges();
+ selectBlock( rootClientId );
+ }
  return;
  }
 
- multiSelect( firstClientId, lastClientId );
- event.preventDefault();
+ multiSelect( first( blockClientIds ), last( blockClientIds ) );
  }
 
  node.addEventListener( 'keydown', onKeyDown );

packages/block-library/src/index.js

@@ -290,10 +290,7 @@ export const registerCoreBlocks = (
 export const __experimentalRegisterExperimentalCoreBlocks = process.env
  .IS_GUTENBERG_PLUGIN
  ? ( { enableFSEBlocks } = {} ) => {
- const enabledExperiments = [
- window.__experimentalEnableListBlockV2 ? 'list-v2' : null,
- enableFSEBlocks ? 'fse' : null,
- ];
+ const enabledExperiments = [ enableFSEBlocks ? 'fse' : null ];
  getAllBlocks()
  .filter( ( { metadata } ) =>
  isBlockMetadataExperimental( metadata )

packages/block-library/src/index.native.js

@@ -186,14 +186,6 @@ const devOnly = ( block ) => ( !! __DEV__ ? block : null );
 const iOSOnly = ( block ) =>
  Platform.OS === 'ios' ? block : devOnly( block );
 
-// To be removed once List V2 is released on the web editor.
-function listCheck( listBlock, blocksFlags ) {
- if ( blocksFlags?.__experimentalEnableListBlockV2 ) {
- listBlock.settings = listBlock?.settingsV2;
- }
- return listBlock;
-}
-
 // Hide the Classic block and SocialLink block
 addFilter(
  'blocks.registerBlockType',
@@ -245,11 +237,8 @@ addFilter(
  *
  * registerCoreBlocks();
  * ```
- * @param {Object} [blocksFlags] Experimental flags
- *
- *
  */
-export const registerCoreBlocks = ( blocksFlags ) => {
+export const registerCoreBlocks = () => {
  // When adding new blocks to this list please also consider updating /src/block-support/supported-blocks.json in the Gutenberg-Mobile repo
  [
  paragraph,
@@ -261,7 +250,7 @@ export const registerCoreBlocks = ( blocksFlags ) => {
  video,
  nextpage,
  separator,
- listCheck( list, blocksFlags ),
+ list,
  listItem,
  quote,
  mediaText,

packages/block-library/src/list-item/block.json

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

packages/block-library/src/list-item/hooks/use-space.js

@@ -19,13 +19,21 @@ export default function useSpace( clientId ) {
  return useRefEffect(
  ( element ) => {
  function onKeyDown( event ) {
+ const { keyCode, shiftKey, altKey, metaKey, ctrlKey } = event;
+
  if (
  event.defaultPrevented ||
- event.keyCode !== SPACE ||
- ! canIndent
+ ! canIndent ||
+ keyCode !== SPACE ||
+ // Only override when no modifiers are pressed.
+ shiftKey ||
+ altKey ||
+ metaKey ||
+ ctrlKey
  ) {
  return;
  }
+
  const selectionStart = getSelectionStart();
  const selectionEnd = getSelectionEnd();
  if (

packages/block-library/src/list/deprecated.js

@@ -7,6 +7,7 @@ import { RichText, useBlockProps } from '@wordpress/block-editor';
  * Internal dependencies
  */
 import migrateFontFamily from '../utils/migrate-font-family';
+import { migrateToListV2 } from './utils';
 
 const v0 = {
  attributes: {
@@ -68,6 +69,75 @@ const v0 = {
  },
 };
 
+const v1 = {
+ attributes: {
+ ordered: {
+ type: 'boolean',
+ default: false,
+ __experimentalRole: 'content',
+ },
+ values: {
+ type: 'string',
+ source: 'html',
+ selector: 'ol,ul',
+ multiline: 'li',
+ __unstableMultilineWrapperTags: [ 'ol', 'ul' ],
+ default: '',
+ __experimentalRole: 'content',
+ },
+ type: {
+ type: 'string',
+ },
+ start: {
+ type: 'number',
+ },
+ reversed: {
+ type: 'boolean',
+ },
+ placeholder: {
+ type: 'string',
+ },
+ },
+ supports: {
+ anchor: true,
+ className: false,
+ typography: {
+ fontSize: true,
+ __experimentalFontFamily: true,
+ lineHeight: true,
+ __experimentalFontStyle: true,
+ __experimentalFontWeight: true,
+ __experimentalLetterSpacing: true,
+ __experimentalTextTransform: true,
+ __experimentalDefaultControls: {
+ fontSize: true,
+ },
+ },
+ color: {
+ gradients: true,
+ link: true,
+ __experimentalDefaultControls: {
+ background: true,
+ text: true,
+ },
+ },
+ __unstablePasteTextInline: true,
+ __experimentalSelector: 'ol,ul',
+ __experimentalSlashInserter: true,
+ },
+ save( { attributes } ) {
+ const { ordered, values, type, reversed, start } = attributes;
+ const TagName = ordered ? 'ol' : 'ul';
+
+ return (
+ <TagName { ...useBlockProps.save( { type, reversed, start } ) }>
+ <RichText.Content value={ values } multiline="li" />
+ </TagName>
+ );
+ },
+ migrate: migrateToListV2,
+};
+
 /**
  * New deprecations need to be placed first
  * for them to have higher priority.
@@ -76,4 +146,4 @@ const v0 = {
  *
  * See block-deprecation.md
  */
-export default [ v0 ];
+export default [ v1, v0 ];