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.

Sign up for GitHub

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

Add block class name to the list block #56469

Merged
merged 28 commits into from
May 9, 2024
Merged

Add block class name to the list block #56469

Show file tree
Hide file tree
Changes from 27 commits
Commits
Show all changes
28 commits
Select commit Hold shift + click to select a range
df25bf5
Add server-side block class names to the list blocks
carolinan Nov 23, 2023
01105c7
fix CS issues
carolinan Nov 23, 2023
b870eed
Deprecate the block version that has the className block support set …
carolinan Nov 24, 2023
60d225d
Merge branch 'trunk' into add/list-block-class
carolinan Nov 24, 2023
ad1a68d
Merge branch 'trunk' into add/list-block-class
carolinan Nov 24, 2023
71332b4
Try to update tests by adding bock class names
carolinan Nov 24, 2023
e9dd993
Revert list-item changes
carolinan Nov 27, 2023
9f7b68f
Remove the experimental selector from block.json
carolinan Nov 27, 2023
eb6341c
Add fixture for deprecation v3
carolinan Nov 27, 2023
b1d4d0d
Update list class names in test files
carolinan Nov 27, 2023
a205584
Update list class names in native test files
carolinan Nov 27, 2023
ba7bb78
change experimentalSelector for the list-item block
carolinan Nov 27, 2023
95640c9
Merge branch 'trunk' into add/list-block-class
carolinan Jan 2, 2024
a44b0da
Try to fix spacing CS issues in test fixture
carolinan Jan 2, 2024
20fd490
Update blocks-raw-handling.native.js
carolinan Jan 2, 2024
ebdd180
Merge branch 'trunk' into add/list-block-class
carolinan Jan 15, 2024
f8a55e9
Merge branch 'trunk' into add/list-block-class
carolinan Jan 18, 2024
24032dd
Merge branch 'trunk' into add/list-block-class
carolinan Jan 25, 2024
7d97dad
Merge branch 'trunk' into add/list-block-class
carolinan Feb 14, 2024
a9325d3
Merge branch 'trunk' into add/list-block-class
carolinan Feb 22, 2024
c2c5a94
Update core-blocks.md
carolinan Feb 27, 2024
69d41a3
Merge branch 'trunk' into add/list-block-class
carolinan Feb 28, 2024
6d71391
Merge branch 'trunk' into add/list-block-class
carolinan Apr 12, 2024
a126c43
Remove index.php from the list block
carolinan Apr 12, 2024
f4cd398
Merge branch 'trunk' into add/list-block-class
carolinan Apr 19, 2024
18684f1
e2e Specs: Add the block class name to the markup in list.spec.js.
carolinan Apr 19, 2024
70adc20
Merge branch 'trunk' into add/list-block-class
carolinan May 7, 2024
a242f0a
Re-add the index.php file.
carolinan May 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
View file
Open in desktop
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 packages/block-library/src/heading/test/__snapshots__/transforms.native.js.snap
View file
Open in desktop
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
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,8 +21,8 @@
},
"supports": {
"className": false,
"__experimentalSelector": ".wp-block-list > li",
Copy link
Contributor

Choose a reason for hiding this comment

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

Just noting this should have used the selectors API which landed at the end of 2022, rather than the deprecated __experimentalSelector.

For example:

{
    ...
    "selectors": {
        "root": ".wp-block-list > li"
    }
}

Copy link
Contributor

Choose a reason for hiding this comment

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

I'm in the process of dusting off an old PR to add color support to the List Item block. I can switch this over to use selectors as part of that.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

thank you!

Copy link
Member

Choose a reason for hiding this comment

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

Thanks for following up on this!

"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
Open in desktop
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
Open in desktop
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 ];
22 changes: 11 additions & 11 deletions packages/block-library/src/list/test/__snapshots__/edit.native.js.snap
View file
Open in desktop
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
Open in desktop
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
Loading