Skip to content

Commit

Permalink
Add block class name to the list block (#56469)
Browse files Browse the repository at this point in the history 
Adds the `wp-block-list` class name to the list block in the editor and front. This means that global styles applied to `core/list` affects the list block, instead of affecting all lists.
Ensures that pre-existing list blocks use the class name on the front, `<ol>` is transformed to `<ol class="wp-block-list">`.
Deprecates the version of the list block that did not support `className`.
The ` __experimentalSelector` on the list item block is changed to `.wp-block-list > li`,
Updates tests and test fixtures that use the list block.


Co-authored-by: carolinan <[email protected]>
Co-authored-by: tellthemachines <[email protected]>
Co-authored-by: mtias <[email protected]>
Co-authored-by: oandregal <[email protected]>
Co-authored-by: fabiankaegy <[email protected]>
  • Loading branch information
@carolinan @tellthemachines
@mtias @oandregal @fabiankaegy
6 people authored May 9, 2024
1 parent 802519e commit 83ddbfb
Show file tree
Hide file tree
Showing 39 changed files with 406 additions and 168 deletions.
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -415,7 +415,7 @@ Create a bulleted or numbered list. ([Source](https://github.com/WordPress/guten
- **Name:** core/list
- **Category:** text
- **Allowed Blocks:** core/list-item
- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~, ~~html~~
- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), interactivity (clientNavigation), spacing (margin, padding), typography (fontSize, lineHeight), ~~html~~
- **Attributes:** ordered, placeholder, reversed, start, type, values

## List item
Expand Down
2 changes: 1 addition & 1 deletion lib/blocks.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,6 @@ function gutenberg_reregister_core_block_types() {
'form-submit-button',
'group',
'html',
'list',
'list-item',
'missing',
'more',
Expand Down Expand Up @@ -76,6 +75,7 @@ function gutenberg_reregister_core_block_types() {
'heading.php' => 'core/heading',
'latest-comments.php' => 'core/latest-comments',
'latest-posts.php' => 'core/latest-posts',
'list.php' => 'core/list',
'loginout.php' => 'core/loginout',
'media-text.php' => 'core/media-text',
'navigation.php' => 'core/navigation',
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ exports[`Heading block transforms to Group block 1`] = `

exports[`Heading block transforms to List block 1`] = `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Example text</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->"
Expand Down
2 changes: 1 addition & 1 deletion packages/block-library/src/list-item/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
},
"supports": {
"className": false,
"__experimentalSelector": ".wp-block-list > li",
"splitting": true,
"__experimentalSelector": "li",
"spacing": {
"margin": true,
"padding": true,
Expand Down
2 changes: 0 additions & 2 deletions packages/block-library/src/list/block.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@
"supports": {
"anchor": true,
"html": false,
"className": false,
"typography": {
"fontSize": true,
"lineHeight": true,
Expand Down Expand Up @@ -70,7 +69,6 @@
}
},
"__unstablePasteTextInline": true,
"__experimentalSelector": "ol,ul",
"__experimentalOnMerge": true,
"__experimentalSlashInserter": true,
"interactivity": {
Expand Down
89 changes: 88 additions & 1 deletion packages/block-library/src/list/deprecated.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,6 +219,93 @@ const v2 = {
migrate: migrateTypeToInlineStyle,
};

// Version without block support 'className: true'.
const v3 = {
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,
lineHeight: true,
__experimentalFontFamily: true,
__experimentalFontWeight: true,
__experimentalFontStyle: true,
__experimentalTextTransform: true,
__experimentalTextDecoration: true,
__experimentalLetterSpacing: true,
__experimentalDefaultControls: {
fontSize: true,
},
},
color: {
gradients: true,
link: true,
__experimentalDefaultControls: {
background: true,
text: true,
},
},
spacing: {
margin: true,
padding: true,
__experimentalDefaultControls: {
margin: false,
padding: false,
},
},
__unstablePasteTextInline: true,
__experimentalSelector: 'ol,ul',
__experimentalOnMerge: 'true',
__experimentalSlashInserter: true,
},
save( { attributes } ) {
const { ordered, type, reversed, start } = attributes;
const TagName = ordered ? 'ol' : 'ul';
return (
<TagName
{ ...useBlockProps.save( {
reversed,
start,
style: {
listStyleType:
ordered && type !== 'decimal' ? type : undefined,
},
} ) }
>
<InnerBlocks.Content />
</TagName>
);
},
};

/**
* New deprecations need to be placed first
* for them to have higher priority.
Expand All @@ -227,4 +314,4 @@ const v2 = {
*
* See block-deprecation.md
*/
export default [ v2, v1, v0 ];
export default [ v3, v2, v1, v0 ];
54 changes: 54 additions & 0 deletions packages/block-library/src/list/index.php
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
<?php
/**
* Adds the wp-block-list class to the rendered list block.
*
* @package WordPress
*/

/**
* Adds the wp-block-list class to the rendered list block.
* Ensures that pre-existing list blocks use the class name on the front.
* For example, <ol> is transformed to <ol class="wp-block-list">.
*
* @since 6.6.0
*
* @see https://github.com/WordPress/gutenberg/issues/12420
*
* @param array $attributes Attributes of the block being rendered.
* @param string $content Content of the block being rendered.
*
* @return string The content of the block being rendered.
*/
function block_core_list_render( $attributes, $content ) {
if ( ! $content ) {
return $content;
}

$processor = new WP_HTML_Tag_Processor( $content );

$list_tags = array( 'OL', 'UL' );
while ( $processor->next_tag() ) {
if ( in_array( $processor->get_tag(), $list_tags, true ) ) {
$processor->add_class( 'wp-block-list' );
break;
}
}

return $processor->get_updated_html();
}

/**
* Registers the `core/list` block on server.
*
* @since 6.6.0
*/
function register_block_core_list() {
register_block_type_from_metadata(
__DIR__ . '/list',
array(
'render_callback' => 'block_core_list_render',
)
);
}

add_action( 'init', 'register_block_core_list' );
22 changes: 11 additions & 11 deletions packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@

exports[`List block adds one item to the list 1`] = `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>First list item</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->"
`;

exports[`List block changes the indentation level 1`] = `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Item 1<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Item 2</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list --></li>
Expand All @@ -22,7 +22,7 @@ exports[`List block changes the indentation level 1`] = `

exports[`List block changes to ordered list 1`] = `
"<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<ol class="wp-block-list"><!-- wp:list-item -->
<li>Item 1</li>
<!-- /wp:list-item -->
Expand All @@ -38,7 +38,7 @@ exports[`List block changes to ordered list 1`] = `

exports[`List block changes to reverse ordered list 1`] = `
"<!-- wp:list {"ordered":true,"reversed":true} -->
<ol reversed><!-- wp:list-item -->
<ol reversed class="wp-block-list"><!-- wp:list-item -->
<li>Item 1</li>
<!-- /wp:list-item -->
Expand All @@ -54,15 +54,15 @@ exports[`List block changes to reverse ordered list 1`] = `

exports[`List block inserts block 1`] = `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li></li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->"
`;

exports[`List block removes the indentation level 1`] = `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Item 1</li>
<!-- /wp:list-item -->
Expand All @@ -74,7 +74,7 @@ exports[`List block removes the indentation level 1`] = `

exports[`List block sets a start value to an ordered list 1`] = `
"<!-- wp:list {"ordered":true,"start":25} -->
<ol start="25"><!-- wp:list-item -->
<ol start="25" class="wp-block-list"><!-- wp:list-item -->
<li>Item 1</li>
<!-- /wp:list-item -->
Expand All @@ -90,19 +90,19 @@ exports[`List block sets a start value to an ordered list 1`] = `

exports[`List block shows different indentation levels 1`] = `
"<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>List item 1</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>List item 2<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>List item nested 1</li>
<!-- /wp:list-item -->
<!-- wp:list-item -->
<li>List item nested 2<!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>Extra item 1</li>
<!-- /wp:list-item -->
Expand Down
6 changes: 3 additions & 3 deletions packages/block-library/src/list/test/__snapshots__/transforms.native.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ exports[`List block transforms to Columns block 1`] = `
"<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"width":"100%"} -->
<div class="wp-block-column" style="flex-basis:100%"><!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>First Item</li>
<!-- /wp:list-item -->
Expand All @@ -23,7 +23,7 @@ exports[`List block transforms to Columns block 1`] = `
exports[`List block transforms to Group block 1`] = `
"<!-- wp:group {"layout":{"type":"constrained"}} -->
<div class="wp-block-group"><!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>First Item</li>
<!-- /wp:list-item -->
Expand Down Expand Up @@ -69,7 +69,7 @@ exports[`List block transforms to Paragraph block 1`] = `
exports[`List block transforms to Quote block 1`] = `
"<!-- wp:quote -->
<blockquote class="wp-block-quote"><!-- wp:list -->
<ul><!-- wp:list-item -->
<ul class="wp-block-list"><!-- wp:list-item -->
<li>First Item</li>
<!-- /wp:list-item -->
Expand Down
Loading

0 comments on commit 83ddbfb

Please sign in to comment.