Skip to content

Commit

Permalink
Polish
Browse files Browse the repository at this point in the history
  • Loading branch information
@ellatrix
ellatrix committed Nov 2, 2021
1 parent e7ae886 commit 77c93de
Show file tree
Hide file tree
Showing 4 changed files with 35 additions and 58 deletions.
2 changes: 1 addition & 1 deletion packages/block-editor/src/components/writing-flow/use-tab-nav.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ export default function useTabNav() {
return;
}

if ( event.target.getAttribute( 'aria-pressed' ) === 'true' ) {
if ( event.target.shadowRoot ) {
return;
}

Expand Down
24 changes: 12 additions & 12 deletions packages/e2e-tests/specs/editor/blocks/gallery.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,15 @@ import {
clickButton,
} from '@wordpress/e2e-test-utils';

async function placeholderUpload() {
const input = await page.waitForFunction( () =>
document
.querySelector( '.wp-block-editor-placeholder' )
?.shadowRoot.querySelector( 'input[type="file"]' )
);
return upload( input );
}

async function upload( handle ) {
const testImagePath = path.join(
__dirname,
Expand All @@ -42,10 +51,7 @@ describe( 'Gallery', () => {

it( 'can be created using uploaded images', async () => {
await insertBlock( 'Gallery' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-gallery [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const filename = await upload( inputHandle );
const filename = await placeholderUpload();

const regex = new RegExp(
`<!-- wp:gallery {\\"linkTo\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-gallery has-nested-images columns-default is-cropped\\"><!-- wp:image {\\"id\\":\\d+,\\"sizeSlug\\":\\"full\\",\\"linkDestination\\":\\"none\\"} -->\\s*<figure class=\\"wp-block-image size-full\\"><img src=\\"[^"]+\/${ filename }\.png\\" alt=\\"\\" class=\\"wp-image-\\d+\\"\/><\/figure>\\s*<!-- \/wp:image --><\/figure>\\s*<!-- \/wp:gallery -->`
Expand All @@ -57,10 +63,7 @@ describe( 'Gallery', () => {
const galleryCaption = 'Tested gallery caption';

await insertBlock( 'Gallery' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-gallery [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
await upload( inputHandle );
await placeholderUpload();

await page.click( '.wp-block-gallery>.blocks-gallery-caption' );
await page.keyboard.type( galleryCaption );
Expand All @@ -72,10 +75,7 @@ describe( 'Gallery', () => {

it( "uploaded images' captions can be edited", async () => {
await insertBlock( 'Gallery' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-gallery [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
await upload( inputHandle );
await placeholderUpload();

const figureElement = await page.waitForSelector(
'.wp-block-gallery .wp-block-image'
Expand Down
59 changes: 19 additions & 40 deletions packages/e2e-tests/specs/editor/blocks/image.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,15 @@ import {
pressKeyWithModifier,
} from '@wordpress/e2e-test-utils';

async function placeholderUpload() {
const input = await page.waitForFunction( () =>
document
.querySelector( '.wp-block-editor-placeholder' )
?.shadowRoot.querySelector( 'input[type="file"]' )
);
return upload( input );
}

async function upload( handle ) {
const testImagePath = path.join(
__dirname,
Expand Down Expand Up @@ -63,10 +72,7 @@ describe( 'Image', () => {

it( 'can be inserted', async () => {
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const filename = await upload( inputHandle );
const filename = await placeholderUpload();
await waitForImage( filename );

const regex = new RegExp(
Expand All @@ -77,10 +83,7 @@ describe( 'Image', () => {

it( 'should replace, reset size, and keep selection', async () => {
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const filename1 = await upload( inputHandle );
const filename1 = await placeholderUpload();
await waitForImage( filename1 );

const regex1 = new RegExp(
Expand Down Expand Up @@ -118,10 +121,7 @@ describe( 'Image', () => {

it.skip( 'should place caret at end of caption after merging empty paragraph', async () => {
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const fileName = await upload( inputHandle );
const fileName = await placeholderUpload();
await waitForImage( fileName );
await page.keyboard.type( '1' );
await page.keyboard.press( 'Enter' );
Expand All @@ -135,10 +135,7 @@ describe( 'Image', () => {

it( 'should allow soft line breaks in caption', async () => {
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const fileName = await upload( inputHandle );
const fileName = await placeholderUpload();
await waitForImage( fileName );
await page.keyboard.type( '12' );
await page.keyboard.press( 'ArrowLeft' );
Expand All @@ -151,10 +148,7 @@ describe( 'Image', () => {

it( 'should have keyboard navigable toolbar for caption', async () => {
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const fileName = await upload( inputHandle );
const fileName = await placeholderUpload();
await waitForImage( fileName );
// Navigate to More, Link, Italic and finally Bold.
await pressKeyWithModifier( 'shift', 'Tab' );
Expand Down Expand Up @@ -215,10 +209,7 @@ describe( 'Image', () => {
it( 'allows zooming using the crop tools', async () => {
// Insert the block, upload a file and crop.
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const filename = await upload( inputHandle );
const filename = await placeholderUpload();
await waitForImage( filename );

// Assert that the image is initially unscaled and unedited.
Expand Down Expand Up @@ -263,10 +254,7 @@ describe( 'Image', () => {
it( 'allows changing aspect ratio using the crop tools', async () => {
// Insert the block, upload a file and crop.
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const filename = await upload( inputHandle );
const filename = await placeholderUpload();
await waitForImage( filename );

// Assert that the image is initially unscaled and unedited.
Expand Down Expand Up @@ -303,10 +291,7 @@ describe( 'Image', () => {
it( 'allows rotating using the crop tools', async () => {
// Insert the block, upload a file and crop.
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const filename = await upload( inputHandle );
const filename = await placeholderUpload();
await waitForImage( filename );

// Assert that the image is initially unscaled and unedited.
Expand Down Expand Up @@ -337,10 +322,7 @@ describe( 'Image', () => {
await insertBlock( 'Image' );

// Upload an initial image.
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const filename = await upload( inputHandle );
const filename = await placeholderUpload();

// Resize the Uploaded Image.
await openDocumentSettingsSidebar();
Expand Down Expand Up @@ -385,10 +367,7 @@ describe( 'Image', () => {

it( 'should undo without broken temporary state', async () => {
await insertBlock( 'Image' );
const inputHandle = await page.evaluateHandle(
`document.querySelector('.wp-block-image [role="button"]').shadowRoot.querySelector('input[type="file"]')`
);
const fileName = await upload( inputHandle );
const fileName = await placeholderUpload();
await waitForImage( fileName );
await pressKeyWithModifier( 'primary', 'z' );
// Expect an empty image block (placeholder) rather than one with a
Expand Down
8 changes: 3 additions & 5 deletions packages/e2e-tests/specs/widgets/customizing-widgets.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -539,12 +539,10 @@ describe( 'Widgets Customizer', () => {
await footer1Section.click();

const legacyWidgetBlock = await addBlock( 'Legacy Widget' );
const selectLegacyWidgets = await page.evaluateHandle( () =>
const selectLegacyWidgets = await page.waitForFunction( () =>
document
.querySelector(
'.wp-block-legacy-widget [aria-label="Legacy Widget"]'
)
.shadowRoot.querySelector( 'select' )
.querySelector( '.wp-block-editor-placeholder' )
?.shadowRoot.querySelector( 'select' )
);
await selectLegacyWidgets.select( 'test_widget' );

Expand Down

0 comments on commit 77c93de

Please sign in to comment.