Skip to content

Commit

Permalink
Feedback changes
Browse files Browse the repository at this point in the history
  • Loading branch information
karthick-murugan committed Feb 7, 2025
1 parent 09e1907 commit 7bd4c9e
Show file tree
Hide file tree
Showing 4 changed files with 12 additions and 44 deletions.
29 changes: 0 additions & 29 deletions docs/how-to-guides/themes/global-settings-and-styles.md
Original file line number Diff line number Diff line change
Expand Up @@ -1057,35 +1057,6 @@ A block can have a "style variation," as defined in the [block.json specificatio

Note that variations are a "block concept"—they only exist when bound to blocks. The `theme.json` specification respects this distinction by only allowing `variations` at the block level, not the top level. It’s also worth highlighting that only variations defined in the `block.json` file of the block or via `register_block_style` on the server are considered "registered" for `theme.json` styling purposes.

For example, this is how to provide styles for the existing `plain` variation for the `core/quote` block:

```json
{
"version": 3,
"styles": {
"blocks": {
"core/quote": {
"variations": {
"plain": {
"color": {
"background": "red"
}
}
}
}
}
}
}
```

The resulting CSS output is:

```css
.wp-block-quote.is-style-plain {
background-color: red;
}
```

It is also possible for multiple block types to share the same variation styles. There are two recommended ways to define such shared styles:

1. `theme.json` partial files
Expand Down
7 changes: 4 additions & 3 deletions packages/block-library/src/quote/theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -21,9 +21,10 @@
border: none;
padding-left: 0;
}
// .is-style-plain, .is-style-large and .is-large are kept for backwards compatibility.
// They are not wrapped in `:where()` to keep specificity as it was before
// they were deprecated.
// The following classes are kept for backward compatibility:
// - .is-style-plain (deprecated)
// - .is-style-large
// - .is-large
&:where(.is-style-plain),
&.is-style-large,
&.is-large {
Expand Down
7 changes: 0 additions & 7 deletions test/e2e/specs/editor/various/patterns.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -600,13 +600,6 @@ test.describe( 'Synced pattern', () => {
editor.canvas.getByRole( 'document', { name: 'Block: Quote' } )
);

// The quote block should have a visible preview in the sidebar for this test to be valid.
await expect(
page
.getByRole( 'region', { name: 'Editor settings' } )
.getByRole( 'button', { name: 'Styles', exact: true } )
).toBeVisible();

await page.click( 'role=menuitem[name="Plain Style"i]' ); // Update the selector based on UI changes.

Check failure on line 603 in test/e2e/specs/editor/various/patterns.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 4

[chromium] › editor/various/patterns.spec.js:590:2 › Synced pattern › should allow a block with styles to be converted to a reusable block

1) [chromium] › editor/various/patterns.spec.js:590:2 › Synced pattern › should allow a block with styles to be converted to a reusable block TimeoutError: page.click: Timeout 10000ms exceeded. Call log: - waiting for locator('role=menuitem[name="Plain Style"i]') 601 | ); 602 | > 603 | await page.click( 'role=menuitem[name="Plain Style"i]' ); // Update the selector based on UI changes. | ^ 604 | 605 | await editor.clickBlockOptionsMenuItem( 'Create pattern' ); 606 | at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/patterns.spec.js:603:14

Check failure on line 603 in test/e2e/specs/editor/various/patterns.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 4

[chromium] › editor/various/patterns.spec.js:590:2 › Synced pattern › should allow a block with styles to be converted to a reusable block

1) [chromium] › editor/various/patterns.spec.js:590:2 › Synced pattern › should allow a block with styles to be converted to a reusable block Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── TimeoutError: page.click: Timeout 10000ms exceeded. Call log: - waiting for locator('role=menuitem[name="Plain Style"i]') 601 | ); 602 | > 603 | await page.click( 'role=menuitem[name="Plain Style"i]' ); // Update the selector based on UI changes. | ^ 604 | 605 | await editor.clickBlockOptionsMenuItem( 'Create pattern' ); 606 | at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/patterns.spec.js:603:14

Check failure on line 603 in test/e2e/specs/editor/various/patterns.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 4

[chromium] › editor/various/patterns.spec.js:590:2 › Synced pattern › should allow a block with styles to be converted to a reusable block

1) [chromium] › editor/various/patterns.spec.js:590:2 › Synced pattern › should allow a block with styles to be converted to a reusable block Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── TimeoutError: page.click: Timeout 10000ms exceeded. Call log: - waiting for locator('role=menuitem[name="Plain Style"i]') 601 | ); 602 | > 603 | await page.click( 'role=menuitem[name="Plain Style"i]' ); // Update the selector based on UI changes. | ^ 604 | 605 | await editor.clickBlockOptionsMenuItem( 'Create pattern' ); 606 | at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/patterns.spec.js:603:14

await editor.clickBlockOptionsMenuItem( 'Create pattern' );
Expand Down
13 changes: 8 additions & 5 deletions test/e2e/specs/editor/various/style-variation.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@ test.describe( 'adding blocks', () => {
test( 'Should switch to the plain style of the quote block', async ( {
admin,
editor,
page,
} ) => {
await admin.createNewPost();

Expand All @@ -17,10 +16,6 @@ test.describe( 'adding blocks', () => {
attributes: { value: '<p>Quote content</p>' },
} );

await editor.clickBlockToolbarButton( 'Quote' );

await page.click( 'role=menuitem[name="Plain"i]' );

// Check the content
const content = await editor.getEditedPostContent();
expect( content ).toBe(

Check failure on line 21 in test/e2e/specs/editor/various/style-variation.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 5

[chromium] › editor/various/style-variation.spec.js:7:2 › adding blocks › Should switch to the plain style of the quote block

1) [chromium] › editor/various/style-variation.spec.js:7:2 › adding blocks › Should switch to the plain style of the quote block Error: expect(received).toBe(expected) // Object.is equality - Expected - 2 + Received + 2 - <!-- wp:quote {"className":"is-style-plain"} --> + <!-- wp:quote --> - <blockquote class="wp-block-quote is-style-plain"><!-- wp:paragraph --> + <blockquote class="wp-block-quote"><!-- wp:paragraph --> <p>Quote content</p> <!-- /wp:paragraph --></blockquote> <!-- /wp:quote --> 19 | // Check the content 20 | const content = await editor.getEditedPostContent(); > 21 | expect( content ).toBe( | ^ 22 | `<!-- wp:quote {"className":"is-style-plain"} --> 23 | <blockquote class="wp-block-quote is-style-plain"><!-- wp:paragraph --> 24 | <p>Quote content</p> at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/style-variation.spec.js:21:21

Check failure on line 21 in test/e2e/specs/editor/various/style-variation.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 5

[chromium] › editor/various/style-variation.spec.js:7:2 › adding blocks › Should switch to the plain style of the quote block

1) [chromium] › editor/various/style-variation.spec.js:7:2 › adding blocks › Should switch to the plain style of the quote block Retry #1 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(received).toBe(expected) // Object.is equality - Expected - 2 + Received + 2 - <!-- wp:quote {"className":"is-style-plain"} --> + <!-- wp:quote --> - <blockquote class="wp-block-quote is-style-plain"><!-- wp:paragraph --> + <blockquote class="wp-block-quote"><!-- wp:paragraph --> <p>Quote content</p> <!-- /wp:paragraph --></blockquote> <!-- /wp:quote --> 19 | // Check the content 20 | const content = await editor.getEditedPostContent(); > 21 | expect( content ).toBe( | ^ 22 | `<!-- wp:quote {"className":"is-style-plain"} --> 23 | <blockquote class="wp-block-quote is-style-plain"><!-- wp:paragraph --> 24 | <p>Quote content</p> at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/style-variation.spec.js:21:21

Check failure on line 21 in test/e2e/specs/editor/various/style-variation.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 5

[chromium] › editor/various/style-variation.spec.js:7:2 › adding blocks › Should switch to the plain style of the quote block

1) [chromium] › editor/various/style-variation.spec.js:7:2 › adding blocks › Should switch to the plain style of the quote block Retry #2 ─────────────────────────────────────────────────────────────────────────────────────── Error: expect(received).toBe(expected) // Object.is equality - Expected - 2 + Received + 2 - <!-- wp:quote {"className":"is-style-plain"} --> + <!-- wp:quote --> - <blockquote class="wp-block-quote is-style-plain"><!-- wp:paragraph --> + <blockquote class="wp-block-quote"><!-- wp:paragraph --> <p>Quote content</p> <!-- /wp:paragraph --></blockquote> <!-- /wp:quote --> 19 | // Check the content 20 | const content = await editor.getEditedPostContent(); > 21 | expect( content ).toBe( | ^ 22 | `<!-- wp:quote {"className":"is-style-plain"} --> 23 | <blockquote class="wp-block-quote is-style-plain"><!-- wp:paragraph --> 24 | <p>Quote content</p> at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/various/style-variation.spec.js:21:21
Expand All @@ -31,4 +26,12 @@ test.describe( 'adding blocks', () => {
<!-- /wp:quote -->`
);
} );

test( 'Should render the Quote block without style variations', async ( {
editor,
} ) => {
await editor.insertBlock( { name: 'core/quote' } );
const quoteBlock = await editor.getBlock( 'core/quote' );
expect( quoteBlock ).toBeTruthy(); // Verify the block is inserted
} );
} );

0 comments on commit 7bd4c9e

Please sign in to comment.