Skip to content

Paragraph: Merge text settings into typography panel #36334

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 5 commits into from
Nov 15, 2021
Merged

Paragraph: Merge text settings into typography panel #36334

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
808e46c
Merge paragraph text settings into typography panel
aaronrobertshaw Nov 9, 2021
d2b0ef4
Update e2es relying on drop cap control
aaronrobertshaw Nov 11, 2021
3f56752
Change approach to maintaining spacing of control and help text
aaronrobertshaw Nov 12, 2021
f808cd4
Add explanatory comment as to the usage of last-child
aaronrobertshaw Nov 15, 2021
34fba4c
Add changelog
aaronrobertshaw Nov 15, 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 e2es relying on drop cap control
  • Loading branch information
@aaronrobertshaw
aaronrobertshaw committed Nov 15, 2021
commit d2b0ef4bfc055642f1848ad39a0aa4ded42d6d45
4 changes: 4 additions & 0 deletions packages/e2e-test-utils/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -532,6 +532,10 @@ _Returns_

Opens the publish panel.

### openTypographyToolsPanelMenu

Opens the Typography tools panel menu provided via block supports.

### pressKeyTimes

Presses the given keyboard key a number of times in sequence.
Expand Down
1 change: 1 addition & 0 deletions packages/e2e-test-utils/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,7 @@ export {
} from './observe-focus-loss';
export { openDocumentSettingsSidebar } from './open-document-settings-sidebar';
export { openPublishPanel } from './open-publish-panel';
export { openTypographyToolsPanelMenu } from './open-typography-tools-panel-menu';
export { trashAllPosts } from './posts';
export { pressKeyTimes } from './press-key-times';
export {
Expand Down
9 changes: 9 additions & 0 deletions packages/e2e-test-utils/src/open-typography-tools-panel-menu.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
/**
* Opens the Typography tools panel menu provided via block supports.
*/
export async function openTypographyToolsPanelMenu() {
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();
}
5 changes: 5 additions & 0 deletions packages/e2e-tests/specs/editor/various/change-detection.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
saveDraft,
openDocumentSettingsSidebar,
isCurrentURL,
openTypographyToolsPanelMenu,
} from '@wordpress/e2e-test-utils';

describe( 'Change detection', () => {
Expand Down Expand Up @@ -381,6 +382,10 @@ describe( 'Change detection', () => {

// Change the paragraph's `drop cap`.
await page.click( '[data-type="core/paragraph"]' );

await openTypographyToolsPanelMenu();
await page.click( 'button[aria-label="Show Drop cap"]' );

const [ dropCapToggle ] = await page.$x(
"//label[contains(text(), 'Drop cap')]"
);
Expand Down
7 changes: 7 additions & 0 deletions packages/e2e-tests/specs/editor/various/editor-modes.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
switchEditorModeTo,
pressKeyTimes,
pressKeyWithModifier,
openTypographyToolsPanelMenu,
} from '@wordpress/e2e-test-utils';

describe( 'Editing modes (visual/HTML)', () => {
Expand Down Expand Up @@ -54,6 +55,9 @@ describe( 'Editing modes (visual/HTML)', () => {

// The `drop cap` toggle for the paragraph block should appear, even in
// HTML editing mode.
await openTypographyToolsPanelMenu();
await page.click( 'button[aria-label="Show Drop cap"]' );

const dropCapToggle = await page.$x(
"//label[contains(text(), 'Drop cap')]"
);
Expand All @@ -74,6 +78,9 @@ describe( 'Editing modes (visual/HTML)', () => {
expect( htmlBlockContent ).toEqual( '<p>Hello world!</p>' );

// Change the `drop cap` using the sidebar.
await openTypographyToolsPanelMenu();
await page.click( 'button[aria-label="Show Drop cap"]' );

const [ dropCapToggle ] = await page.$x(
"//label[contains(text(), 'Drop cap')]"
);
Expand Down
8 changes: 1 addition & 7 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 @@ -8,6 +8,7 @@ import {
pressKeyWithModifier,
pressKeyTimes,
activateTheme,
openTypographyToolsPanelMenu,
} from '@wordpress/e2e-test-utils';

const openFontSizeSelectControl = async () => {
Expand All @@ -17,13 +18,6 @@ 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
4 changes: 4 additions & 0 deletions packages/e2e-tests/specs/widgets/customizing-widgets.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import {
clickBlockToolbarButton,
deleteAllWidgets,
createURL,
openTypographyToolsPanelMenu,
} from '@wordpress/e2e-test-utils';

/**
Expand Down Expand Up @@ -831,6 +832,9 @@ describe( 'Widgets Customizer', () => {
await showMoreSettingsButton.click();

// Change `drop cap` (Any change made in this section is sufficient; not required to be `drop cap`).
await openTypographyToolsPanelMenu();
await page.click( 'button[aria-label="Show Drop cap"]' );

const [ dropCapToggle ] = await page.$x(
"//label[contains(text(), 'Drop cap')]"
);
Expand Down