From 25f82acc6275e3d4a9670612421eb19fdbeccfb4 Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Fri, 11 Oct 2024 14:02:29 +0900 Subject: [PATCH 1/3] Change block API version to 3 --- src/block.json | 2 +- src/components/controls/style.scss | 8 ++++++-- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/block.json b/src/block.json index 46e75b5..1761318 100644 --- a/src/block.json +++ b/src/block.json @@ -1,6 +1,6 @@ { "$schema": "https://schemas.wp.org/trunk/block.json", - "apiVersion": 2, + "apiVersion": 3, "name": "piano-block/piano", "title": "Piano", "description": "Play the melody.", diff --git a/src/components/controls/style.scss b/src/components/controls/style.scss index 80bb1d2..34502b7 100644 --- a/src/components/controls/style.scss +++ b/src/components/controls/style.scss @@ -50,7 +50,11 @@ } // Backwards compatible styles for WordPress 6.6 and below - .components-base-control:has(.components-button-group) .components-base-control__label { - display: block; + .components-base-control:has(.components-button-group), + .components-range-control { + + .components-base-control__label { + display: block; + } } } From 90f467acdcafb793e308137e427d54bede10fe1f Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Fri, 11 Oct 2024 14:09:51 +0900 Subject: [PATCH 2/3] Try to fix e2e test --- test/e2e/test.spec.ts | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/test/e2e/test.spec.ts b/test/e2e/test.spec.ts index a0cc1f1..177acdd 100644 --- a/test/e2e/test.spec.ts +++ b/test/e2e/test.spec.ts @@ -10,24 +10,23 @@ test.describe( 'Block', () => { test( 'should update attributes related to sound using only keyboard', async ( { editor, - page, pageUtils, } ) => { await editor.insertBlock( { name: 'piano-block/piano' } ); // Volume await pageUtils.pressKeys( 'ArrowRight', { times: 2 } ); - await expect( page.getByRole( 'slider', { name: 'Volume' } ) ).toBeFocused(); + await expect( editor.canvas.getByRole( 'slider', { name: 'Volume' } ) ).toBeFocused(); await pageUtils.pressKeys( 'ArrowLeft', { times: 3 } ); // Octave Offset await pageUtils.pressKeys( 'Tab', { times: 2 } ); - await expect( page.getByRole( 'button', { name: '-2' } ) ).toBeFocused(); + await expect( editor.canvas.getByRole( 'button', { name: '-2' } ) ).toBeFocused(); await pageUtils.pressKeys( 'ArrowRight' ); await pageUtils.pressKeys( 'Enter' ); // Pressing a piano key should not remove focus. await pageUtils.pressKeys( 'z' ); // Instrument await pageUtils.pressKeys( 'ArrowRight', { times: 4 } ); - await expect( page.getByRole( 'combobox', { name: 'Instrument' } ) ).toBeFocused(); + await expect( editor.canvas.getByRole( 'combobox', { name: 'Instrument' } ) ).toBeFocused(); await pageUtils.pressKeys( 'Enter' ); await pageUtils.pressKeys( 'ArrowDown', { times: 14 } ); await pageUtils.pressKeys( 'Enter' ); @@ -35,9 +34,13 @@ test.describe( 'Block', () => { await pageUtils.pressKeys( 'z' ); // Synthesizer Setting await pageUtils.pressKeys( 'ArrowRight' ); - await expect( page.getByRole( 'button', { name: 'Synthesizer Setting' } ) ).toBeFocused(); + await expect( + editor.canvas.getByRole( 'button', { name: 'Synthesizer Setting' } ) + ).toBeFocused(); await pageUtils.pressKeys( 'Enter' ); - await expect( page.getByRole( 'combobox', { name: 'Oscillator Type' } ) ).toBeFocused(); + await expect( + editor.canvas.getByRole( 'combobox', { name: 'Oscillator Type' } ) + ).toBeFocused(); await pageUtils.pressKeys( 'ArrowDown', { times: 2 } ); for ( let index = 0; index < 4; index++ ) { await pageUtils.pressKeys( 'Tab' ); @@ -48,13 +51,13 @@ test.describe( 'Block', () => { await pageUtils.pressKeys( 'z' ); // Key Layout await pageUtils.pressKeys( 'ArrowRight' ); - await expect( page.getByRole( 'combobox', { name: 'Key Layout' } ) ).toBeFocused(); + await expect( editor.canvas.getByRole( 'combobox', { name: 'Key Layout' } ) ).toBeFocused(); await pageUtils.pressKeys( 'Enter' ); await pageUtils.pressKeys( 'ArrowDown' ); await pageUtils.pressKeys( 'Enter' ); // Key Indicator await pageUtils.pressKeys( 'ArrowRight' ); - await expect( page.getByRole( 'combobox', { name: 'Key Indicator' } ) ).toBeFocused(); + await expect( editor.canvas.getByRole( 'combobox', { name: 'Key Indicator' } ) ).toBeFocused(); await pageUtils.pressKeys( 'Enter' ); await pageUtils.pressKeys( 'ArrowDown' ); await pageUtils.pressKeys( 'Enter' ); From f9fc1c5f9bb20dbfaf5fbcfc7d688172e5bc0cda Mon Sep 17 00:00:00 2001 From: Aki Hamano Date: Fri, 11 Oct 2024 15:09:31 +0900 Subject: [PATCH 3/3] Try to fix e2e test --- test/e2e/test.spec.ts | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/test/e2e/test.spec.ts b/test/e2e/test.spec.ts index 177acdd..3cd902a 100644 --- a/test/e2e/test.spec.ts +++ b/test/e2e/test.spec.ts @@ -10,6 +10,7 @@ test.describe( 'Block', () => { test( 'should update attributes related to sound using only keyboard', async ( { editor, + page, pageUtils, } ) => { await editor.insertBlock( { name: 'piano-block/piano' } ); @@ -17,6 +18,7 @@ test.describe( 'Block', () => { await pageUtils.pressKeys( 'ArrowRight', { times: 2 } ); await expect( editor.canvas.getByRole( 'slider', { name: 'Volume' } ) ).toBeFocused(); await pageUtils.pressKeys( 'ArrowLeft', { times: 3 } ); + // Octave Offset await pageUtils.pressKeys( 'Tab', { times: 2 } ); await expect( editor.canvas.getByRole( 'button', { name: '-2' } ) ).toBeFocused(); @@ -24,6 +26,7 @@ test.describe( 'Block', () => { await pageUtils.pressKeys( 'Enter' ); // Pressing a piano key should not remove focus. await pageUtils.pressKeys( 'z' ); + // Instrument await pageUtils.pressKeys( 'ArrowRight', { times: 4 } ); await expect( editor.canvas.getByRole( 'combobox', { name: 'Instrument' } ) ).toBeFocused(); @@ -32,29 +35,34 @@ test.describe( 'Block', () => { await pageUtils.pressKeys( 'Enter' ); // Pressing a piano key should not remove focus. await pageUtils.pressKeys( 'z' ); + // Synthesizer Setting await pageUtils.pressKeys( 'ArrowRight' ); await expect( editor.canvas.getByRole( 'button', { name: 'Synthesizer Setting' } ) ).toBeFocused(); await pageUtils.pressKeys( 'Enter' ); - await expect( - editor.canvas.getByRole( 'combobox', { name: 'Oscillator Type' } ) - ).toBeFocused(); + await expect( page.getByRole( 'combobox', { name: 'Oscillator Type' } ) ).toBeFocused(); await pageUtils.pressKeys( 'ArrowDown', { times: 2 } ); for ( let index = 0; index < 4; index++ ) { await pageUtils.pressKeys( 'Tab' ); await pageUtils.pressKeys( 'ArrowRight', { times: 2 } ); } await pageUtils.pressKeys( 'Escape' ); + // Pressing the escape key in a popover rendered in the iframe editor does not + // return focus to the anchor element, so explicitly focus the anchor element. + // see: https://github.com/WordPress/gutenberg/issues/55413 + await editor.canvas.getByRole( 'button', { name: 'Synthesizer Setting' } ).focus(); // Pressing a piano key should not remove focus. await pageUtils.pressKeys( 'z' ); + // Key Layout await pageUtils.pressKeys( 'ArrowRight' ); await expect( editor.canvas.getByRole( 'combobox', { name: 'Key Layout' } ) ).toBeFocused(); await pageUtils.pressKeys( 'Enter' ); await pageUtils.pressKeys( 'ArrowDown' ); await pageUtils.pressKeys( 'Enter' ); + // Key Indicator await pageUtils.pressKeys( 'ArrowRight' ); await expect( editor.canvas.getByRole( 'combobox', { name: 'Key Indicator' } ) ).toBeFocused(); @@ -65,7 +73,7 @@ test.describe( 'Block', () => { expect( await editor.getEditedPostContent() ).toMatchSnapshot(); } ); - test.skip( 'should update attributes in the block sidebar', async ( { editor, page } ) => { + test( 'should update attributes in the block sidebar', async ( { editor, page } ) => { await editor.insertBlock( { name: 'piano-block/piano' } ); await editor.openDocumentSettingsSidebar(); await page.getByLabel( 'Display on the front end' ).click();