Skip to content
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.

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

Change block API version to 3 #58

Merged
merged 3 commits into from
Oct 11, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
2 changes: 1 addition & 1 deletion src/block.json
Original file line number Diff line number Diff line change
@@ -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.",
Expand Down
8 changes: 6 additions & 2 deletions src/components/controls/style.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}
}
25 changes: 18 additions & 7 deletions test/e2e/test.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,31 @@ test.describe( 'Block', () => {
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' );
// Pressing a piano key should not remove focus.
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 pageUtils.pressKeys( 'ArrowDown', { times: 2 } );
Expand All @@ -44,25 +49,31 @@ test.describe( 'Block', () => {
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( 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' );

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();
Expand Down
Loading