Skip to content

Typography: Switch to ToolsPanel for block support UI #33744

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
aaronrobertshaw merged 3 commits into from
Oct 22, 2021
Merged

Typography: Switch to ToolsPanel for block support UI #33744

Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e79628d
Switch typography block support to use ToolsPanel
aaronrobertshaw Oct 20, 2021
eaac5c4
Update font size picker reset e2e tests for ToolsPanel
aaronrobertshaw Oct 21, 2021
6d2e2f0
Update typography panel resetAllFilter after font-family attribute ch…
aaronrobertshaw Oct 21, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
Update font size picker reset e2e tests for ToolsPanel
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Oct 21, 2021
commit eaac5c4e027d512e4a07dd66d41645f030799c8e
35 changes: 19 additions & 16 deletions packages/e2e-tests/specs/editor/various/font-size-picker.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,13 @@ const openFontSizeSelectControl = async () => {
return selectControl.click();
};

const openTypographyToolsPanelMenu = async () => {
const toggleSelector =
"//div[contains(@class, 'typography-block-support-panel')]//button[contains(@class, 'components-dropdown-menu__toggle')]";
const toggle = await page.waitForXPath( toggleSelector );
return toggle.click();
};

const FONT_SIZE_TOGGLE_GROUP_SELECTOR =
"//div[contains(@class, 'components-font-size-picker__controls')]//div[contains(@class, 'components-toggle-group-control')]";

Expand Down Expand Up @@ -122,31 +129,29 @@ describe( 'Font Size Picker', () => {
<!-- /wp:paragraph -->"
` );
} );
it( 'should reset a named font size using the reset button', async () => {
it( 'should reset a named font size using the tools panel menu', async () => {
// Create a paragraph block with some content.
await clickBlockAppender();
await page.keyboard.type(
'Paragraph with font size reset using button'
'Paragraph with font size reset using tools panel menu'
);

await openFontSizeSelectControl();
await pressKeyTimes( 'ArrowDown', 3 );
await page.keyboard.press( 'Enter' );
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph {\\"fontSize\\":\\"normal\\"} -->
<p class=\\"has-normal-font-size\\">Paragraph with font size reset using button</p>
<p class=\\"has-normal-font-size\\">Paragraph with font size reset using tools panel menu</p>
<!-- /wp:paragraph -->"
` );

await toggleCustomInput( true );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
// Open Typography ToolsPanel, font size will be first in menu and gain focus.
await openTypographyToolsPanelMenu();

await page.keyboard.press( 'Enter' );
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>Paragraph with font size reset using button</p>
<p>Paragraph with font size reset using tools panel menu</p>
<!-- /wp:paragraph -->"
` );
} );
Expand Down Expand Up @@ -205,29 +210,27 @@ describe( 'Font Size Picker', () => {
` );
} );

it( 'should reset a named font size using the reset button', async () => {
it( 'should reset a named font size using the tools panel menu', async () => {
// Create a paragraph block with some content.
await clickBlockAppender();
await page.keyboard.type(
'Paragraph with font size reset using button'
'Paragraph with font size reset using tools panel menu'
);

await clickFontSizeButtonByLabel( 'Small' );
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph {\\"fontSize\\":\\"small\\"} -->
<p class=\\"has-small-font-size\\">Paragraph with font size reset using button</p>
<p class=\\"has-small-font-size\\">Paragraph with font size reset using tools panel menu</p>
<!-- /wp:paragraph -->"
` );

await toggleCustomInput( true );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
await page.keyboard.press( 'Tab' );
// Open Typography ToolsPanel, font size will be first in menu and gain focus.
await openTypographyToolsPanelMenu();

await page.keyboard.press( 'Enter' );
expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
"<!-- wp:paragraph -->
<p>Paragraph with font size reset using button</p>
<p>Paragraph with font size reset using tools panel menu</p>
<!-- /wp:paragraph -->"
` );
} );
Expand Down