diff --git a/docs/how-to-guides/themes/global-settings-and-styles.md b/docs/how-to-guides/themes/global-settings-and-styles.md index 205a3ee862ce6b..ecd5716cf4f190 100644 --- a/docs/how-to-guides/themes/global-settings-and-styles.md +++ b/docs/how-to-guides/themes/global-settings-and-styles.md @@ -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 diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss index 24068d36b82e6c..441b5f3d55cf13 100644 --- a/packages/block-library/src/quote/theme.scss +++ b/packages/block-library/src/quote/theme.scss @@ -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 { diff --git a/test/e2e/specs/editor/various/patterns.spec.js b/test/e2e/specs/editor/various/patterns.spec.js index 16f04f09a073d3..4b0a1a831242e9 100644 --- a/test/e2e/specs/editor/various/patterns.spec.js +++ b/test/e2e/specs/editor/various/patterns.spec.js @@ -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. await editor.clickBlockOptionsMenuItem( 'Create pattern' ); diff --git a/test/e2e/specs/editor/various/style-variation.spec.js b/test/e2e/specs/editor/various/style-variation.spec.js index 136b8284b1ecff..f334c0907bc655 100644 --- a/test/e2e/specs/editor/various/style-variation.spec.js +++ b/test/e2e/specs/editor/various/style-variation.spec.js @@ -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(); @@ -17,10 +16,6 @@ test.describe( 'adding blocks', () => { attributes: { value: '

Quote content

' }, } ); - await editor.clickBlockToolbarButton( 'Quote' ); - - await page.click( 'role=menuitem[name="Plain"i]' ); - // Check the content const content = await editor.getEditedPostContent(); expect( content ).toBe( @@ -31,4 +26,12 @@ test.describe( 'adding blocks', () => { ` ); } ); + + 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 + } ); } );