diff --git a/cypress/e2e/container/container-block.cy.js b/cypress/e2e/container/container-block.cy.js
deleted file mode 100644
index eab06150f..000000000
--- a/cypress/e2e/container/container-block.cy.js
+++ /dev/null
@@ -1,66 +0,0 @@
-///
-
-describe( 'Container Block', () => {
- beforeEach( () => {
- cy.loginUser();
- cy.createNewPost();
- } );
-
- it( 'Container block should be initialized with default attributes', () => {
- cy.insertContainerBlock();
- cy.selectContainerBlock();
- cy.ensureSidebarOpened();
-
- // Fluid option should not be checked
- cy.getCheckboxByLabel( 'Fluid' ).should( 'not.be.checked' );
-
- // Fluid Breakpoint select field should be disabled
- cy.xpath(
- '//select[@disabled]/parent::div/preceding-sibling::div/label[contains(text(),"Fluid Breakpoint")]'
- ).should( 'exist' );
-
- // Margin After should be set
- cy.getSelectByLabel( 'Margin After' ).should( 'have.value', 'mb-2' );
-
- // Editor content should match snapshot
- cy.postContentMatchesSnapshot();
- } );
-
- it( 'Should be possible to enable fluid option', () => {
- cy.insertContainerBlock();
- cy.selectContainerBlock();
- cy.ensureSidebarOpened();
-
- // Change column size attributes
- cy.clickElementByText( 'label', 'Fluid', true );
-
- // Fluid checkbox should be selected
- cy.getCheckboxByLabel( 'Fluid' ).should( 'be.checked' );
-
- // Editor content should match snapshot
- cy.postContentMatchesSnapshot();
-
- // Fluid breakpoint option should be applied
- cy.getSelectByLabel( 'Fluid Breakpoint' ).select( 'lg' );
-
- // Editor content should match snapshot
- cy.postContentMatchesSnapshot();
- } );
-
- // Bootstrap 5 specific options
-
- it( 'Should display xxl breakpoint', () => {
- cy.insertContainerBlock();
- cy.selectContainerBlock();
- cy.ensureSidebarOpened();
-
- cy.xpath(
- `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option`
- ).should( 'have.length', 6 );
-
- // xxl option should exist
- cy.xpath(
- `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option[@value='xxl']`
- ).should( 'have.length', 1 );
- } );
-} );
diff --git a/cypress/e2e/container/container-bootstrap-v4.cy.js b/cypress/e2e/container/container-bootstrap-v4.cy.js
deleted file mode 100644
index 04fff9c5d..000000000
--- a/cypress/e2e/container/container-bootstrap-v4.cy.js
+++ /dev/null
@@ -1,33 +0,0 @@
-///
-
-describe( 'Container Block Bootstrap 4', () => {
- before( () => {
- cy.loginUser();
- cy.activatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
- } );
-
- after( () => {
- cy.loginUser();
- cy.deactivatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
- } );
-
- beforeEach( () => {
- cy.loginUser();
- cy.createNewPost();
- } );
-
- it( 'Should not display xxl breakpoint options if run with Bootstrap 4', () => {
- cy.insertContainerBlock();
- cy.selectContainerBlock();
- cy.ensureSidebarOpened();
-
- cy.xpath(
- `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option`
- ).should( 'have.length', 5 );
-
- // xxl option should not exist
- cy.xpath(
- `//label[contains(@class,"components-input-control__label")][contains(text(),"Fluid Breakpoint")]/parent::div/following-sibling::div/select[contains(@class,"components-select-control__input")]/option[@value='xxl']`
- ).should( 'not.exist' );
- } );
-} );
diff --git a/cypress/e2e/container/container-filters.cy.js b/cypress/e2e/container/container-filters.cy.js
deleted file mode 100644
index 049a1d1ef..000000000
--- a/cypress/e2e/container/container-filters.cy.js
+++ /dev/null
@@ -1,51 +0,0 @@
-///
-
-describe( 'Container Block Filters', () => {
- before( () => {
- cy.loginUser();
- cy.activatePlugin( 'wp-bootstrap-blocks-test-container-filters' );
- } );
-
- after( () => {
- cy.loginUser();
- cy.deactivatePlugin( 'wp-bootstrap-blocks-test-container-filters' );
- } );
-
- beforeEach( () => {
- cy.loginUser();
- cy.createNewPost();
- } );
-
- it( 'wpBootstrapBlocks.container.marginAfterOptions should add margin option', () => {
- cy.insertContainerBlock();
- cy.selectContainerBlock();
- cy.ensureSidebarOpened();
-
- // Additional padding option should be available
- cy.selectOptionIsAvailable( 'Margin After', 'mb-8' );
-
- // Margin option should be applied
- cy.getSelectByLabel( 'Margin After' ).select( 'mb-8' );
-
- // Editor content should match snapshot
- cy.postContentMatchesSnapshot();
- } );
-
- it( 'wp_bootstrap_blocks_container_default_attributes should override default attributes', () => {
- cy.insertContainerBlock();
- cy.selectContainerBlock();
- cy.ensureSidebarOpened();
-
- // Fluid options should be enabled
- cy.getCheckboxByLabel( 'Fluid' ).should( 'be.checked' );
-
- // Fluid Breakpoint should be selected
- cy.getSelectByLabel( 'Fluid Breakpoint' ).should( 'have.value', 'md' );
-
- // Margin should be selected
- cy.getSelectByLabel( 'Margin After' ).should( 'have.value', 'mb-3' );
-
- // Check if attributes are set correctly
- cy.postContentMatchesSnapshot();
- } );
-} );
diff --git a/playwright/e2e/container/__snapshots__/container-block-gets-initialized-with-default-attributes-chromium.txt b/playwright/e2e/container/__snapshots__/container-block-gets-initialized-with-default-attributes-chromium.txt
new file mode 100644
index 000000000..5dbd284d4
--- /dev/null
+++ b/playwright/e2e/container/__snapshots__/container-block-gets-initialized-with-default-attributes-chromium.txt
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/playwright/e2e/container/__snapshots__/enable-fluid-option-1-chromium.txt b/playwright/e2e/container/__snapshots__/enable-fluid-option-1-chromium.txt
new file mode 100644
index 000000000..3dd59b4d2
--- /dev/null
+++ b/playwright/e2e/container/__snapshots__/enable-fluid-option-1-chromium.txt
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/playwright/e2e/container/__snapshots__/enable-fluid-option-2-chromium.txt b/playwright/e2e/container/__snapshots__/enable-fluid-option-2-chromium.txt
new file mode 100644
index 000000000..ddcedc166
--- /dev/null
+++ b/playwright/e2e/container/__snapshots__/enable-fluid-option-2-chromium.txt
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/playwright/e2e/container/__snapshots__/wp-bootstrap-blocks-container-default-attributes-override-default-attributes-chromium.txt b/playwright/e2e/container/__snapshots__/wp-bootstrap-blocks-container-default-attributes-override-default-attributes-chromium.txt
new file mode 100644
index 000000000..5dbd284d4
--- /dev/null
+++ b/playwright/e2e/container/__snapshots__/wp-bootstrap-blocks-container-default-attributes-override-default-attributes-chromium.txt
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/playwright/e2e/container/__snapshots__/wpBootstrapBlocks-container-marginAfterOptions-adds-margin-option-chromium.txt b/playwright/e2e/container/__snapshots__/wpBootstrapBlocks-container-marginAfterOptions-adds-margin-option-chromium.txt
new file mode 100644
index 000000000..774cfc7c6
--- /dev/null
+++ b/playwright/e2e/container/__snapshots__/wpBootstrapBlocks-container-marginAfterOptions-adds-margin-option-chromium.txt
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/playwright/e2e/container/__snapshots__/xxl-breakpoint-is-available-chromium.txt b/playwright/e2e/container/__snapshots__/xxl-breakpoint-is-available-chromium.txt
new file mode 100644
index 000000000..84e2fda67
--- /dev/null
+++ b/playwright/e2e/container/__snapshots__/xxl-breakpoint-is-available-chromium.txt
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/playwright/e2e/container/container-block.spec.ts b/playwright/e2e/container/container-block.spec.ts
new file mode 100644
index 000000000..48560d6fa
--- /dev/null
+++ b/playwright/e2e/container/container-block.spec.ts
@@ -0,0 +1,96 @@
+import { editorSettingsSelectOption } from '../../commands/editor-settings-select-option';
+import { openSidebarPanelWithTitle } from '../../commands/open-sidebar-panel-with-title';
+
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Container Block', () => {
+ test.beforeEach( async ( { admin, editor } ) => {
+ await admin.createNewPost();
+ await editor.insertBlock( {
+ name: 'wp-bootstrap-blocks/container',
+ } );
+ } );
+
+ test( 'Container block gets initialized with default attributes', async ( {
+ editor,
+ page,
+ } ) => {
+ // Fluid option should not be checked
+ expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Fluid', { exact: true } )
+ .isChecked()
+ ).toBeFalsy();
+
+ // Fluid Breakpoint select field should be disabled
+ await expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Fluid Breakpoint', { exact: true } )
+ ).toBeDisabled();
+
+ // Margin After should be set
+ expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Margin After' )
+ .inputValue()
+ ).toBe( 'mb-2' );
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'container-block-gets-initialized-with-default-attributes.txt'
+ );
+ } );
+
+ test( 'Enable fluid option', async ( { editor, page } ) => {
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Fluid', { exact: true } )
+ .check();
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'enable-fluid-option-1.txt'
+ );
+
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Fluid breakpoint' )
+ .selectOption( 'lg' );
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'enable-fluid-option-2.txt'
+ );
+ } );
+
+ // Bootstrap 5 specific options
+ test( 'Xxl breakpoint is available', async ( { editor, page } ) => {
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Fluid', { exact: true } )
+ .check();
+
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Fluid breakpoint' )
+ .selectOption( 'xxl' );
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'xxl-breakpoint-is-available.txt'
+ );
+ } );
+} );
diff --git a/playwright/e2e/container/container-filters.spec.ts b/playwright/e2e/container/container-filters.spec.ts
new file mode 100644
index 000000000..adf0ee774
--- /dev/null
+++ b/playwright/e2e/container/container-filters.spec.ts
@@ -0,0 +1,81 @@
+import { editorSettingsSelectOption } from '../../commands/editor-settings-select-option';
+import { openSidebarPanelWithTitle } from '../../commands/open-sidebar-panel-with-title';
+
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Container Filters', () => {
+ test.beforeAll( async ( { requestUtils } ) => {
+ await requestUtils.activatePlugin(
+ 'wp-bootstrap-blocks-test-container-filters'
+ );
+ } );
+
+ test.afterAll( async ( { requestUtils } ) => {
+ await requestUtils.deactivatePlugin(
+ 'wp-bootstrap-blocks-test-container-filters'
+ );
+ } );
+
+ test.beforeEach( async ( { admin, editor } ) => {
+ await admin.createNewPost();
+ await editor.insertBlock( {
+ name: 'wp-bootstrap-blocks/container',
+ } );
+ } );
+
+ test( 'wpBootstrapBlocks.container.marginAfterOptions adds margin option', async ( {
+ editor,
+ page,
+ } ) => {
+ // Additional padding option should be available
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Margin After' )
+ .selectOption( 'mb-8' );
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'wpBootstrapBlocks.container.marginAfterOptions-adds-margin-option.txt'
+ );
+ } );
+
+ test( 'wp_bootstrap_blocks_container_default_attributes override default attributes', async ( {
+ editor,
+ page,
+ } ) => {
+ // Fluid options should be enabled
+ expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Fluid', { exact: true } )
+ .isChecked()
+ ).toBeTruthy();
+
+ // Fluid Breakpoint should be selected
+ expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Fluid Breakpoint' )
+ .inputValue()
+ ).toBe( 'md' );
+
+ // Margin should be selected
+ expect(
+ await page
+ .getByRole( 'region', {
+ name: 'Editor settings',
+ } )
+ .getByLabel( 'Margin After' )
+ .inputValue()
+ ).toBe( 'mb-3' );
+
+ expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+ 'wp_bootstrap_blocks_container_default_attributes-override-default-attributes.txt'
+ );
+ } );
+} );