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

Add CSS class to paragraph block #47282

Open
wants to merge 41 commits into
base: trunk
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
af2a025
Adding the `.wp-block-paragraph` class to the paragraph block.
juanfra Jan 19, 2023
e558a1d
Fix tests and snapshots for #46863
juanfra Jan 19, 2023
acc7eaa
Fix tests for https://github.com/WordPress/gutenberg/pull/47282
juanfra Jan 23, 2023
87b1ed8
Update tests and snapshots to work with `wp-block-paragraph` class, u…
juanfra Jan 23, 2023
90c78e8
Merge branch 'master' into fix/46863
juanfra Jan 24, 2023
b24b59c
Fix tests and snapshots.
juanfra Jan 24, 2023
2d4e2b4
Merge branch 'master' into fix/46863
juanfra Feb 2, 2023
9bed42e
Fix test for the new paragraph block class.
juanfra Feb 2, 2023
1a1448c
Update snapshots.
juanfra Feb 2, 2023
759987a
Update tests and snapshots.
juanfra Feb 3, 2023
d5fb24e
Fix snapshots, remove code from merge.
juanfra Feb 3, 2023
745d238
Update snapshots.
juanfra Feb 3, 2023
c4d3196
Update the page click, so that it doesn't take the middle of the bloc…
juanfra Feb 3, 2023
28a828d
Merge branch 'master' into fix/46863
juanfra Mar 1, 2023
caf4c99
Merge branch 'master' into fix/46863
juanfra Mar 7, 2023
25f0537
Update tests and snapshots.
juanfra Mar 7, 2023
a3e75d3
Update snapshots.
juanfra Mar 7, 2023
ab4b0ae
Fix merge conflict.
juanfra Mar 7, 2023
1b8a9c3
Update tests and snapshots.
juanfra Mar 7, 2023
9e20c02
update initial html for react native editor.
juanfra Mar 7, 2023
5901620
Fix native test.
juanfra Mar 7, 2023
8f8a07f
Fix `serialize-raw-block` tests.
juanfra Mar 7, 2023
c39abb2
Merge branch 'master' into fix/46863
juanfra Mar 15, 2023
6762e2c
Update snapshots.
juanfra Mar 15, 2023
ae191eb
Merge branch 'master' into fix/46863
juanfra Mar 16, 2023
ee6286e
Merge branch 'master' into fix/46863
juanfra Mar 17, 2023
5ec63ae
Update tests and snapshots.
juanfra Mar 17, 2023
d8c527d
Fix old merge conflict.
juanfra Mar 17, 2023
0c253c5
Update native initial HTML to include the `wp-block-paragraph` class.
juanfra Mar 17, 2023
115baa8
Merge branch 'WordPress:trunk' into fix/46863
Mar 17, 2023
7fc8781
Merge branch 'master' into fix/46863
juanfra Apr 27, 2023
651519e
Update snapshots after merge.
juanfra Apr 27, 2023
9ee2654
Merge branch 'master' into fix/46863
juanfra May 4, 2023
256fd38
Merge branch 'master' into fix/46863
juanfra Aug 17, 2023
c7878ab
Fix typo from merge conflict.
juanfra Aug 17, 2023
92f8962
Fix typo from merge conflict.
juanfra Aug 17, 2023
a1f89be
Update fixture.
juanfra Aug 17, 2023
5160d4b
Fix tests for using the `wp-block-paragraph` class.
juanfra Aug 17, 2023
03c8e15
Merge branch 'master' into fix/46863
juanfra Aug 22, 2023
9059505
Merge branch 'master' into fix/46863
juanfra Aug 23, 2023
42c9320
Remove the click, as the element is already focused. And the click fu…
juanfra Aug 23, 2023
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/contributors/code/e2e/overusing-snapshots.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ Due to the lack of inline snapshots in Playwright, some migrated tests are using

```js
expect( await editor.getEditedPostContent() ).toBe( `<!-- wp:paragraph -->
<p>Paragraph</p>
<p class="wp-block-paragraph">Paragraph</p>
<!-- /wp:paragraph -->` );
```

Expand Down
2 changes: 1 addition & 1 deletion docs/reference-guides/core-blocks.md
Original file line number Diff line number Diff line change
Expand Up @@ -479,7 +479,7 @@ Start with the basic building block of all narrative. ([Source](https://github.c

- **Name:** core/paragraph
- **Category:** text
- **Supports:** __unstablePasteTextInline, anchor, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight), ~~className~~
- **Supports:** __unstablePasteTextInline, anchor, className, color (background, gradients, link, text), spacing (margin, padding), typography (fontSize, lineHeight)
- **Attributes:** align, content, direction, dropCap, placeholder

## Pattern placeholder
Expand Down
1 change: 1 addition & 0 deletions lib/blocks.php
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@ function gutenberg_reregister_core_block_types() {
'navigation-link.php' => 'core/navigation-link',
'navigation-submenu.php' => 'core/navigation-submenu',
'page-list.php' => 'core/page-list',
'paragraph.php' => 'core/paragraph',
'page-list-item.php' => 'core/page-list-item',
'pattern.php' => 'core/pattern',
'post-author.php' => 'core/post-author',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`BlockDraggable moves blocks: Initial order 1`] = `
"<!-- wp:paragraph -->
<p>This is a paragraph.</p>
<p class="wp-block-paragraph">This is a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"sizeSlug":"large"} -->
Expand Down Expand Up @@ -30,7 +30,7 @@ exports[`BlockDraggable moves blocks: Paragraph block moved from first to second
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This is a paragraph.</p>
<p class="wp-block-paragraph">This is a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
Expand Down Expand Up @@ -58,7 +58,7 @@ exports[`BlockDraggable moves blocks: Spacer block moved from third to first pos
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This is a paragraph.</p>
<p class="wp-block-paragraph">This is a paragraph.</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"linkTo":"none"} -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,7 @@ const BLOCKS = [
name: 'Paragraph',
html: `
<!-- wp:paragraph -->
<p>This is a paragraph.</p>
<p class="wp-block-paragraph">This is a paragraph.</p>
<!-- /wp:paragraph -->`,
layout: { x: 0, y: 0, width: 100, height: 100 },
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Block Mover Picker moving blocks disables the Move Down button for the last block 1`] = `
"<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
Expand All @@ -16,7 +16,7 @@ exports[`Block Mover Picker moving blocks disables the Move Down button for the

exports[`Block Mover Picker moving blocks disables the Move Up button for the first block 1`] = `
"<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
Expand All @@ -34,7 +34,7 @@ exports[`Block Mover Picker moving blocks moves blocks up and down 1`] = `
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

exports[`Block Actions Menu block options copies and pastes a block 1`] = `
"<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
Expand All @@ -28,13 +28,13 @@ exports[`Block Actions Menu block options cuts and pastes a block 1`] = `
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->"
`;

exports[`Block Actions Menu block options does not replace a non empty Paragraph block when pasting another block 1`] = `
"<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:heading -->
Expand All @@ -52,7 +52,7 @@ exports[`Block Actions Menu block options does not replace a non empty Paragraph

exports[`Block Actions Menu block options duplicates a block 1`] = `
"<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
Expand Down Expand Up @@ -84,7 +84,7 @@ exports[`Block Actions Menu block options transforms a Paragraph block into a Pu

exports[`Block Actions Menu moving blocks disables the Move Down button for the last block 1`] = `
"<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
Expand All @@ -98,7 +98,7 @@ exports[`Block Actions Menu moving blocks disables the Move Down button for the

exports[`Block Actions Menu moving blocks disables the Move Up button for the first block 1`] = `
"<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
Expand All @@ -116,7 +116,7 @@ exports[`Block Actions Menu moving blocks moves blocks up and down 1`] = `
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Hello!</p>
<p class="wp-block-paragraph">Hello!</p>
<!-- /wp:paragraph -->

<!-- wp:spacer -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ describe( 'Block Actions Menu', () => {
it( "renders the block name in the Picker's header", async () => {
const screen = await initializeEditor( {
initialHtml: `<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->`,
} );
const { getByRole } = screen;
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ exports[`Inserter can add blocks after another block 1`] = `
<!-- /wp:more -->

<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->"
`;

Expand All @@ -34,7 +34,7 @@ exports[`Inserter can add blocks before another block 1`] = `
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->"
`;

Expand All @@ -48,7 +48,7 @@ exports[`Inserter can add blocks creates a new Paragraph block tapping on the em
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->"
`;

Expand Down Expand Up @@ -94,7 +94,7 @@ exports[`Inserter can add blocks to the beginning 1`] = `
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->"
`;

Expand All @@ -108,7 +108,7 @@ exports[`Inserter can add blocks to the end 1`] = `
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->

<!-- wp:more -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -56,18 +56,18 @@ exports[`Align options for media block sets Wide width option 1`] = `

exports[`Align options for text block sets Align text center option 1`] = `
"<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"></p>
<p class="wp-block-paragraph has-text-align-center"></p>
<!-- /wp:paragraph -->"
`;

exports[`Align options for text block sets Align text left option 1`] = `
"<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"></p>
<p class="wp-block-paragraph has-text-align-left"></p>
<!-- /wp:paragraph -->"
`;

exports[`Align options for text block sets Align text right option 1`] = `
"<!-- wp:paragraph {"align":"right"} -->
<p class="has-text-align-right"></p>
<p class="wp-block-paragraph has-text-align-right"></p>
<!-- /wp:paragraph -->"
`;
2 changes: 1 addition & 1 deletion packages/block-library/src/block/test/edit.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ const getMockedReusableBlock = ( id ) => ( {
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p><strong>Bold</strong> <em>Italic</em> <s>Striked</s> Superscript<sup>(1)</sup> Subscript<sub>(2)</sub> <a href="http://www.wordpress.org" target="_blank" rel="noreferrer noopener">Link</a></p>
<p class="wp-block-paragraph"><strong>Bold</strong> <em>Italic</em> <s>Striked</s> Superscript<sup>(1)</sup> Subscript<sub>(2)</sub> <a href="http://www.wordpress.org" target="_blank" rel="noreferrer noopener">Link</a></p>
<!-- /wp:paragraph -->

!-- wp:heading {"level":4} -->
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ exports[`Buttons block when a button is shown adds another button using the inli
<!-- /wp:buttons -->

<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->"
`;

Expand All @@ -68,12 +68,12 @@ exports[`Buttons block when a button is shown adjusts the border radius 1`] = `

exports[`Buttons block when a button is shown removing button along with buttons block removes the button and buttons block when deleting the block using the block delete action 1`] = `
"<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->"
`;

exports[`Buttons block when a button is shown removing button along with buttons block removes the button and buttons block when deleting the block using the delete (backspace) key 1`] = `
"<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->"
`;
Original file line number Diff line number Diff line change
Expand Up @@ -62,7 +62,7 @@ exports[`Columns block removes column with the remove button 1`] = `

exports[`Columns block removes the only one left Column with the remove button 1`] = `
"<!-- wp:paragraph -->
<p></p>
<p class="wp-block-paragraph"></p>
<!-- /wp:paragraph -->"
`;

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -5,29 +5,29 @@ exports[`Columns block transforms to Group block 1`] = `
<div class="wp-block-group"><!-- wp:columns {"className":"gutenberg-landing\\u002d\\u002ddevelopers-columns has-2-columns"} -->
<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
<p class="wp-block-paragraph has-text-align-left"><strong>Built with modern technology.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
<p class="wp-block-paragraph has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
<p class="wp-block-paragraph has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
<p class="wp-block-paragraph has-text-align-left"><strong>Designed for compatibility.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
<p class="wp-block-paragraph has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
<p class="wp-block-paragraph has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns --></div>
Expand All @@ -36,26 +36,26 @@ exports[`Columns block transforms to Group block 1`] = `

exports[`Columns block transforms ungroups block 1`] = `
"<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
<p class="wp-block-paragraph has-text-align-left"><strong>Built with modern technology.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
<p class="wp-block-paragraph has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
<p class="wp-block-paragraph has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
<p class="wp-block-paragraph has-text-align-left"><strong>Designed for compatibility.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
<p class="wp-block-paragraph has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
<p class="wp-block-paragraph has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
<!-- /wp:paragraph -->"
`;
12 changes: 6 additions & 6 deletions packages/block-library/src/columns/test/transforms.native.js
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,29 @@ const initialHtml = `
<!-- wp:columns {"className":"gutenberg-landing\u002d\u002ddevelopers-columns has-2-columns"} -->
<div class="wp-block-columns gutenberg-landing--developers-columns has-2-columns"><!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>Built with modern technology.</strong></p>
<p class="wp-block-paragraph has-text-align-left"><strong>Built with modern technology.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
<p class="wp-block-paragraph has-text-align-left">Gutenberg was developed on GitHub using the WordPress REST API, JavaScript, and React.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
<p class="wp-block-paragraph has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/language/">Learn more</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column -->

<!-- wp:column -->
<div class="wp-block-column"><!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left"><strong>Designed for compatibility.</strong></p>
<p class="wp-block-paragraph has-text-align-left"><strong>Designed for compatibility.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
<p class="wp-block-paragraph has-text-align-left">We recommend migrating features to blocks, but support for existing WordPress functionality remains. There will be transition paths for shortcodes, meta-boxes, and Custom Post Types.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"left","fontSize":"small"} -->
<p class="has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
<p class="wp-block-paragraph has-text-align-left has-small-font-size"><a href="https://wordpress.org/gutenberg/handbook/reference/faq/">Learn more</a></p>
<!-- /wp:paragraph --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->`;
Expand Down
Loading