Added a "plain" style for quote blocks

[Baelx]

Description

• Implements Plain quote style (indent) #28524

How has this been tested?

Ran npm run test. All tests passing.

Screenshots

Types of changes

Simply adds a "Plain" style to quotes to allow them(in part) to function as text indentation. Selecting "Plain" will set border-left: none in the code.

Checklist:

• [ X ] My code is tested.
• [ X ] My code follows the WordPress code style.
• [ X ] My code follows the accessibility standards.
• [ X ] I've tested my changes with keyboard and screen readers.
• [ N/A ] My code has proper inline documentation.
• [ N/A ] I've included developer documentation if appropriate.
• [ N/A ] I've updated all React Native files affected by any refactorings/renamings in this PR.

[github-actions]

👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @Baelx! In case you missed it, we'd love to have you join us in our Slack community, where we hold regularly weekly meetings open to anyone to coordinate with each other.

If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information.

[Baelx]

I feel like npm run test should have caught the error here given it runs npm run test-e2e. Nevertheless, I'm now having a lot of difficulty generating a new snapshot for the quote block but that's all that's needed at this point. If someone with a fully-functional test framework for Gutenberg feels like pulling this branch, updating the snapshot, that'd be appreciated. Otherwise, I'll delete this PR until I'm up and running. Cheers.

[talldan]

@Baelx Thanks for working on this, looks good in my testing.

I think this test is going to be troublesome because of the way it uses an index to click on a style:

gutenberg/packages/e2e-tests/specs/editor/various/style-variation.test.js

Line 26 in 8c95aed

await styleVariations[ 1 ].click();

If other styles are added it'll fail again. It'd be better to use the style's name. I updated the file to the following and it passes (the test description was also wrong so including it in my code snippet below):

describe( 'Block styles', () => {
	beforeAll( async () => {
		await createNewPost();
	} );

	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 largeStyleButton = await page.waitForXPath(
			'//*[@role="menuitem"][contains(., "Large")]'
		);
		await largeStyleButton.click();

		// Check the content
		const content = await getEditedPostContent();
		expect( content ).toMatchSnapshot();
	} );
} );

FWIW-I usually update snapshots using watch mode (npm run test-e2e:watch), sometimes I use the filters provided by watch mode to only run the test in the file in question.

[Baelx]

@Baelx Thanks for working on this, looks good in my testing.

I think this test is going to be troublesome because of the way it uses an index to click on a style:

gutenberg/packages/e2e-tests/specs/editor/various/style-variation.test.js

Line 26 in 8c95aed

await styleVariations[ 1 ].click();

If other styles are added it'll fail again. It'd be better to use the style's name. I updated the file to the following and it passes (the test description was also wrong so including it in my code snippet below):

describe( 'Block styles', () => {
	beforeAll( async () => {
		await createNewPost();
	} );

	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 largeStyleButton = await page.waitForXPath(
			'//*[@role="menuitem"][contains(., "Large")]'
		);
		await largeStyleButton.click();

		// Check the content
		const content = await getEditedPostContent();
		expect( content ).toMatchSnapshot();
	} );
} );

FWIW-I usually update snapshots using watch mode (npm run test-e2e:watch), sometimes I use the filters provided by watch mode to only run the test in the file in question.

Thanks a lot for that, @talldan. That makes sense!

[talldan]

@Baelx Just checking in, will you be able to update that test?

[Mamaduka]

Hi, @Baelx

I just wanted to check in if you have time to rebase and update the test?

Thanks

[mkaz]

It looks like this one just needed a push to get over the hump. I rebased and moved the updated style definition to block.json.

I also updated the test and snapshot per @talldan.

So I think this makes it good to go.

[github-actions]

Congratulations on your first merged pull request, @Baelx! We'd like to credit you for your contribution in the post announcing the next WordPress release, but we can't find a WordPress.org profile associated with your GitHub account. When you have a moment, visit the following URL and click "link your GitHub account" under "GitHub Username" to link your accounts:

https://profiles.wordpress.org/me/profile/edit/

And if you don't have a WordPress.org account, you can create one on this page:

https://login.wordpress.org/register

Kudos!