Added a "plain" style for quote blocks (#29856)

* Added a "plain" style for quote blocks * Update test and snapshot for plain style quotes * Remove obsolete snapshot Co-authored-by: Alex <awintschel@gmail.com> Co-authored-by: Marcus Kazmierczak <marcus@mkaz.com>
WordPress · Oct 16, 2021 · e306701 · e306701
1 parent 96b3508
commit e306701
Show file tree

Hide file tree

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

diff --git a/packages/block-library/src/quote/theme.scss b/packages/block-library/src/quote/theme.scss
@@ -23,6 +23,7 @@
 		padding-left: 0;
 	}
 
+	&.is-style-plain,
 	&.is-style-large,
 	&.is-large {
 		border: none;

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
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`adding blocks Should switch the style of the quote block 1`] = `
+exports[`adding blocks Should switch to the large style of the quote block 1`] = `
 "<!-- wp:quote {\\"className\\":\\"is-style-large\\"} -->
 <blockquote class=\\"wp-block-quote is-style-large\\"><p>Quote content</p></blockquote>
 <!-- /wp:quote -->"

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,17 +13,17 @@ describe( 'adding blocks', () => {
 		await createNewPost();
 	} );
 
-	it( 'Should switch the style of the quote block', async () => {
+	it( 'Should switch to the large style of the quote block', async () => {
 		// Inserting a quote block
 		await insertBlock( 'Quote' );
 		await page.keyboard.type( 'Quote content' );
 
 		await clickBlockToolbarButton( 'Quote' );
 
-		const styleVariations = await page.$$(
-			'.block-editor-block-styles__item'
+		const largeStyleButton = await page.waitForXPath(
+			'//*[@role="menuitem"][contains(., "Large")]'
 		);
-		await styleVariations[ 1 ].click();
+		await largeStyleButton.click();
 
 		// Check the content
 		const content = await getEditedPostContent();