diff --git a/src/controls/color-control.tsx b/src/controls/color-control.tsx
index 2a5bd8f..43678e9 100644
--- a/src/controls/color-control.tsx
+++ b/src/controls/color-control.tsx
@@ -76,28 +76,22 @@ export default function ColorControl( {
{ __( 'Reset', 'flexible-table-block' ) }
-
-
-
-
- { isPickerOpen && (
-
-
-
- ) }
-
-
-
+
+ { isPickerOpen && (
+
+
+
+ ) }
{ /* @ts-ignore Slot is not currently typed on Popover */ }
diff --git a/src/controls/style.scss b/src/controls/style.scss
index 65284bc..b3be1b2 100644
--- a/src/controls/style.scss
+++ b/src/controls/style.scss
@@ -192,7 +192,6 @@
// Controls styles.
.ftb-border-color-control__controls,
-.ftb-color-control__controls,
.ftb-border-spacing-control__controls {
display: flex;
align-items: flex-start;
@@ -213,7 +212,6 @@
// Controls row styles.
.ftb-border-color-control__controls-row,
-.ftb-color-control__controls-row,
.ftb-border-spacing-control__controls-row {
display: flex;
align-items: center;
diff --git a/test/e2e/specs/global-setting.spec.ts b/test/e2e/specs/global-setting.spec.ts
index 1a157b1..8abeb8b 100644
--- a/test/e2e/specs/global-setting.spec.ts
+++ b/test/e2e/specs/global-setting.spec.ts
@@ -49,7 +49,7 @@ test.describe( 'Global Setting', () => {
for ( let i = 0; i < tableColors.length; i++ ) {
await page
.getByRole( 'dialog', { name: 'Flexible Table Block Global setting' } )
- .getByRole( 'button', { name: 'All' } )
+ .getByRole( 'button', { name: 'Color' } )
.nth( i )
.click();
await pageUtils.pressKeys( 'Enter' );
@@ -69,7 +69,7 @@ test.describe( 'Global Setting', () => {
for ( let i = 0; i < cellColors.length; i++ ) {
await page
.getByRole( 'dialog', { name: 'Flexible Table Block Global setting' } )
- .getByRole( 'button', { name: 'All' } )
+ .getByRole( 'button', { name: 'Color' } )
.nth( i )
.click();
await pageUtils.pressKeys( 'Enter' );
@@ -82,7 +82,7 @@ test.describe( 'Global Setting', () => {
await page.getByRole( 'spinbutton', { name: 'Right' } ).fill( '2' );
await page.getByRole( 'spinbutton', { name: 'Bottom' } ).fill( '3' );
await page.getByRole( 'spinbutton', { name: 'Left' } ).fill( '4' );
- // Change cell border with.
+ // Change cell border width.
await page.getByRole( 'spinbutton', { name: 'All' } ).fill( '2' );
// Change cell border style.
await page.getByRole( 'button', { name: 'Dotted' } ).click();
diff --git a/test/e2e/specs/table-style.spec.ts b/test/e2e/specs/table-style.spec.ts
index ca64d4e..992103a 100644
--- a/test/e2e/specs/table-style.spec.ts
+++ b/test/e2e/specs/table-style.spec.ts
@@ -24,7 +24,7 @@ async function applyCellStyles( page, pageUtils ) {
const cellTextColorId = await page.getByText( 'Cell text color' ).getAttribute( 'id' );
await page
.locator( `[aria-labelledby="${ cellTextColorId }"]` )
- .getByRole( 'button', { name: 'All' } )
+ .getByRole( 'button', { name: 'Color' } )
.click();
await pageUtils.pressKeys( 'Enter' );
await page.getByRole( 'textbox', { name: 'Hex color' } ).fill( '111111' );
@@ -34,7 +34,7 @@ async function applyCellStyles( page, pageUtils ) {
.getAttribute( 'id' );
await page
.locator( `[aria-labelledby="${ cellBackgroundColorId }"]` )
- .getByRole( 'button', { name: 'All' } )
+ .getByRole( 'button', { name: 'Color' } )
.click();
await pageUtils.pressKeys( 'Enter' );
await page.getByRole( 'textbox', { name: 'Hex color' } ).fill( '333333' );