Remove the Large style option from the quote block (#37580)

* Remove the large quote style option Co-authored-by: ntsekouras <ntsekouras@outlook.com>
WordPress · Jan 27, 2022 · 262d467 · 262d467
1 parent 7e23960
commit 262d467
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 19 deletions.
diff --git a/packages/block-library/src/quote/block.json b/packages/block-library/src/quote/block.json
@@ -49,8 +49,7 @@
 			"label": "Default",
 			"isDefault": true
 		},
-		{ "name": "plain", "label": "Plain" },
-		{ "name": "large", "label": "Large" }
+		{ "name": "plain", "label": "Plain" }
 	],
 	"editorStyle": "wp-block-quote-editor",
 	"style": "wp-block-quote"

diff --git a/packages/block-library/src/quote/index.js b/packages/block-library/src/quote/index.js
@@ -24,7 +24,6 @@ export const settings = {
 			value:
 				'<p>' + __( 'In quoting others, we cite ourselves.' ) + '</p>',
 			citation: 'Julio Cortázar',
-			className: 'is-style-large',
 		},
 	},
 	transforms,

diff --git a/packages/block-library/src/quote/style.scss b/packages/block-library/src/quote/style.scss
@@ -1,8 +1,8 @@
 .wp-block-quote {
 	overflow-wrap: break-word; // Break long strings of text without spaces so they don't overflow the block.
-
-	&.is-style-large,
-	&.is-large {
+	// .is-style-large and .is-large are kept for backwards compatibility. The :not pseudo-class is used to enable switching styles. See PR #37580.
+	&.is-style-large:not(.is-style-plain),
+	&.is-large:not(.is-style-plain) {
 		margin-bottom: 1em;
 		padding: 0 1em;
 

diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
@@ -22,7 +22,7 @@
 		border: none;
 		padding-left: 0;
 	}
-
+	// .is-style-large and .is-large are kept for backwards compatibility.
 	&.is-style-plain,
 	&.is-style-large,
 	&.is-large {

diff --git a/packages/e2e-tests/specs/editor/various/__snapshots__/style-variation.test.js.snap b/packages/e2e-tests/specs/editor/various/__snapshots__/style-variation.test.js.snap
diff --git a/packages/e2e-tests/specs/editor/various/style-variation.test.js b/packages/e2e-tests/specs/editor/various/style-variation.test.js
@@ -13,20 +13,24 @@ describe( 'adding blocks', () => {
 		await createNewPost();
 	} );
 
-	it( 'Should switch to the large style of the quote block', async () => {
+	it( 'Should switch to the plain style of the quote block', async () => {
 		// Inserting a quote block
 		await insertBlock( 'Quote' );
 		await page.keyboard.type( 'Quote content' );
 
 		await clickBlockToolbarButton( 'Quote' );
 
-		const largeStyleButton = await page.waitForXPath(
-			'//*[@role="menuitem"][contains(., "Large")]'
+		const plainStyleButton = await page.waitForXPath(
+			'//*[@role="menuitem"][contains(., "Plain")]'
 		);
-		await largeStyleButton.click();
+		await plainStyleButton.click();
 
 		// Check the content
 		const content = await getEditedPostContent();
-		expect( content ).toMatchSnapshot();
+		expect( content ).toMatchInlineSnapshot( `
+		"<!-- wp:quote {\\"className\\":\\"is-style-plain\\"} -->
+		<blockquote class=\\"wp-block-quote is-style-plain\\"><p>Quote content</p></blockquote>
+		<!-- /wp:quote -->"
+	` );
 	} );
 } );