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

List: use nested blocks #42711

Merged
merged 17 commits into from
Aug 24, 2022
Merged
4 changes: 2 additions & 2 deletions lib/experimental/block-editor-settings-mobile.php
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
27 changes: 0 additions & 27 deletions lib/experimental/blocks.php

This file was deleted.

12 changes: 0 additions & 12 deletions lib/experiments-page.php
Original file line number Diff line number Diff line change
Expand Up @@ -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'
Expand Down
1 change: 0 additions & 1 deletion lib/load.php
Original file line number Diff line number Diff line change
Expand Up @@ -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';

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 );
Expand Down
5 changes: 1 addition & 4 deletions packages/block-library/src/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 )
Expand Down
15 changes: 2 additions & 13 deletions packages/block-library/src/index.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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,
Expand All @@ -261,7 +250,7 @@ export const registerCoreBlocks = ( blocksFlags ) => {
video,
nextpage,
separator,
listCheck( list, blocksFlags ),
list,
listItem,
quote,
mediaText,
Expand Down
1 change: 0 additions & 1 deletion packages/block-library/src/list-item/block.json
Original file line number Diff line number Diff line change
@@ -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",
Expand Down
12 changes: 10 additions & 2 deletions packages/block-library/src/list-item/hooks/use-space.js
Original file line number Diff line number Diff line change
Expand Up @@ -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
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh, I just saw this. So this is how indent/outdent now currently works:

  • indent: hit space at the beggining of the list item (either empty list item or item with text)
  • outdent: hit backspace at the beginning of the list item

I remember that there were conversations about certain shortcuts conflicting with browser's shortcuts but don't remember the details. Perhaps that's why the CTRL+M one was removed?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yes, ctrl+m conflicts with minimise on mac.

) {
return;
}

const selectionStart = getSelectionStart();
const selectionEnd = getSelectionEnd();
if (
Expand Down
72 changes: 71 additions & 1 deletion packages/block-library/src/list/deprecated.js
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down Expand Up @@ -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.
Expand All @@ -76,4 +146,4 @@ const v0 = {
*
* See block-deprecation.md
*/
export default [ v0 ];
export default [ v1, v0 ];
Loading