From 21d84ee99476d71ec0699aa512f5103dd839d8a0 Mon Sep 17 00:00:00 2001
From: Juerg Hunziker <juerg.hunziker@liip.ch>
Date: Sun, 19 Nov 2023 19:46:27 +0100
Subject: [PATCH] migrate first row block e2e tests to playwright

---
 .../e2e/row/row-block-backwards-compat.cy.js  | 137 ------
 cypress/e2e/row/row-block.cy.js               | 184 ---------
 cypress/e2e/settings/settings.cy.js           |  41 --
 .../apply-row-options-chromium.txt            |   5 +
 .../change-alignment-1-chromium.txt           |   5 +
 .../change-alignment-2-chromium.txt           |   5 +
 .../change-gutter-sizes-chromium.txt          |   5 +
 .../change-layout-1-chromium.txt              |   7 +
 .../change-layout-2-chromium.txt              |   5 +
 ...nable-column-layout-in-editor-chromium.txt |   5 +
 .../row-block-is-inserted-chromium.txt        |   5 +
 .../select-custom-layout-chromium.txt         |   5 +
 ...w-block-content-is-compatible-chromium.txt |  27 ++
 ...w-block-content-is-compatible-chromium.txt |  41 ++
 ...to-content-vertical-alignment-chromium.txt |  13 +
 .../e2e/row}/fixtures/row-1.0.0.js            |   0
 .../e2e/row}/fixtures/row-1.1.0.js            |   0
 .../e2e/row}/fixtures/row-1.4.0.js            |   0
 .../row}/fixtures/row-3.2.0-center-content.js |   0
 .../e2e/row}/fixtures/row-bootstrap5.js       |   0
 .../row/row-block-backwards-compat.spec.ts    | 389 ++++++++++++++++++
 playwright/e2e/row/row-block.spec.ts          | 264 ++++++++++++
 22 files changed, 781 insertions(+), 362 deletions(-)
 delete mode 100644 cypress/e2e/row/row-block-backwards-compat.cy.js
 delete mode 100644 cypress/e2e/row/row-block.cy.js
 delete mode 100644 cypress/e2e/settings/settings.cy.js
 create mode 100644 playwright/e2e/row/__snapshots__/apply-row-options-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/change-alignment-1-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/change-alignment-2-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/change-gutter-sizes-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/change-layout-1-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/change-layout-2-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/enable-column-layout-in-editor-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/row-block-is-inserted-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/select-custom-layout-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/v1-0-0-row-block-content-is-compatible-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/v1-1-0-row-block-content-is-compatible-chromium.txt
 create mode 100644 playwright/e2e/row/__snapshots__/v3-2-0-column-block-content-with-center-content-option-gets-migrated-to-content-vertical-alignment-chromium.txt
 rename {cypress => playwright/e2e/row}/fixtures/row-1.0.0.js (100%)
 rename {cypress => playwright/e2e/row}/fixtures/row-1.1.0.js (100%)
 rename {cypress => playwright/e2e/row}/fixtures/row-1.4.0.js (100%)
 rename {cypress => playwright/e2e/row}/fixtures/row-3.2.0-center-content.js (100%)
 rename {cypress => playwright/e2e/row}/fixtures/row-bootstrap5.js (100%)
 create mode 100644 playwright/e2e/row/row-block-backwards-compat.spec.ts
 create mode 100644 playwright/e2e/row/row-block.spec.ts

diff --git a/cypress/e2e/row/row-block-backwards-compat.cy.js b/cypress/e2e/row/row-block-backwards-compat.cy.js
deleted file mode 100644
index 0b5157088..000000000
--- a/cypress/e2e/row/row-block-backwards-compat.cy.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/// <reference types="Cypress" />
-
-import rowContent100 from '../../fixtures/row-1.0.0';
-import rowContent110 from '../../fixtures/row-1.1.0';
-import rowContent140 from '../../fixtures/row-1.4.0';
-import rowContentBootstrap5 from '../../fixtures/row-bootstrap5';
-import rowContent320CenterContent from '../../fixtures/row-3.2.0-center-content';
-import {
-	testVersion100RowFeatures,
-	testVersion100ColumnFeatures,
-	testVersion110RowFeatures,
-	testVersion110ColumnFeatures,
-	testVersion140ColumnFeatures,
-} from '../../support/row/feature-tests';
-
-context( 'Row Block Backwards Compatibility', () => {
-	beforeEach( () => {
-		cy.loginUser();
-	} );
-
-	it( 'v1.0.0 row block content should be compatible', () => {
-		cy.createNewPost();
-		cy.setPostContent( rowContent100 );
-
-		cy.ensureSidebarOpened();
-
-		// Row blocks should be successfully inserted
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"]'
-		).should( 'have.length', 2 );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"]'
-		).should( 'have.length', 4 );
-
-		cy.postContentMatchesSnapshot();
-
-		testVersion100RowFeatures();
-	} );
-
-	it( 'v1.0.0 column block content should be compatible', () => {
-		cy.createNewPost();
-		cy.setPostContent( rowContent100 );
-		cy.ensureSidebarOpened();
-
-		testVersion100ColumnFeatures();
-	} );
-
-	it( 'v1.1.0 row block content should be compatible', () => {
-		cy.createNewPost();
-		cy.setPostContent( rowContent110 );
-		cy.ensureSidebarOpened();
-
-		// Row blocks should be successfully inserted
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"]'
-		).should( 'have.length', 3 );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"]'
-		).should( 'have.length', 6 );
-
-		cy.postContentMatchesSnapshot();
-
-		testVersion100RowFeatures();
-
-		testVersion110RowFeatures();
-	} );
-
-	it( 'v1.1.0 column block content should be compatible', () => {
-		cy.createNewPost();
-		cy.setPostContent( rowContent110 );
-		cy.ensureSidebarOpened();
-
-		testVersion100ColumnFeatures();
-
-		testVersion110ColumnFeatures();
-	} );
-
-	it( 'v1.4.0 column block content should be compatible', () => {
-		cy.createNewPost();
-		cy.setPostContent( rowContent140 );
-		cy.ensureSidebarOpened();
-
-		testVersion100ColumnFeatures();
-
-		testVersion110ColumnFeatures();
-
-		testVersion140ColumnFeatures();
-	} );
-
-	it( 'Bootstrap 4 works with Bootstrap 5 settings', () => {
-		cy.activatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
-		cy.createNewPost();
-		cy.setPostContent( rowContentBootstrap5 );
-		cy.ensureSidebarOpened();
-
-		// Select 1. Column of 1. Row
-		cy.selectColumnBlock( 0, 0 );
-
-		// Check if row block could be inserted without error
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"]'
-		).should( 'exist' );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"]'
-		).should( 'have.length', 2 );
-
-		// Check if Bootstrap 4 values are set in inspector controls
-		cy.openSidebarPanelWithTitle( 'Column size' );
-		cy.getInputByLabel( 'Md Column count' ).should( 'have.value', '8' );
-		cy.deactivatePlugin( 'wp-bootstrap-blocks-test-bootstrap-v4' );
-	} );
-
-	it( 'v3.2.0 column block content with center content option should be migrated to content vertical alignment', () => {
-		cy.createNewPost();
-		cy.setPostContent( rowContent320CenterContent );
-		cy.ensureSidebarOpened();
-
-		// Select 1. Column of 1. Row
-		cy.selectColumnBlock( 0, 0 );
-
-		// Check if row block could be inserted without error
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"]'
-		).should( 'exist' );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"]'
-		).should( 'have.length', 2 );
-
-		// Check if center content option was migrated to content vertical alignment
-		cy.toolbarOptionIsActive(
-			'Change vertical alignment of content',
-			'Align content center'
-		);
-
-		cy.postContentMatchesSnapshot();
-	} );
-} );
diff --git a/cypress/e2e/row/row-block.cy.js b/cypress/e2e/row/row-block.cy.js
deleted file mode 100644
index 5792e7b97..000000000
--- a/cypress/e2e/row/row-block.cy.js
+++ /dev/null
@@ -1,184 +0,0 @@
-/// <reference types="Cypress" />
-
-context( 'Row Block', () => {
-	beforeEach( () => {
-		cy.loginUser();
-		cy.createNewPost();
-	} );
-
-	it( 'Row block should be available', () => {
-		cy.insertBlock( 'Bootstrap Row', 'Row' );
-
-		// Check if row block was inserted
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"]'
-		).should( 'exist' );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"]'
-		).should( 'have.length', 2 );
-
-		cy.postContentMatchesSnapshot();
-	} );
-
-	it( 'Should be possible to change alignment', () => {
-		cy.insertBlock( 'Bootstrap Row', 'Row' );
-		cy.selectBlockByName( 'wp-bootstrap-blocks/row' );
-
-		// Change horizontal alignment
-		cy.clickBlockToolbarButton( 'Change horizontal alignment of columns' );
-		cy.clickButton( 'Align columns right' );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"][data-alignment="right"]'
-		).should( 'exist' );
-		cy.postContentMatchesSnapshot();
-
-		// Change vertical alignment
-		cy.clickBlockToolbarButton( 'Change vertical alignment of columns' );
-		cy.clickButton( 'Align columns bottom' );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"][data-vertical-alignment="bottom"]'
-		).should( 'exist' );
-		cy.postContentMatchesSnapshot();
-	} );
-
-	it( 'Should be possible to change column layout', () => {
-		cy.insertRowBlock();
-		cy.selectRowBlock();
-		cy.ensureSidebarOpened();
-
-		// Layout options should be visible
-		cy.get( '.wp-bootstrap-blocks-template-selector-button' ).should(
-			'have.length',
-			5
-		);
-		cy.get(
-			'.wp-bootstrap-blocks-template-selector-button > button[aria-label="2 Columns (1:1)"].is-active'
-		).should( 'not.be.null' );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"][data-size-md="6"]'
-		).should( 'have.length', 2 );
-
-		// Template should be applied
-		cy.get(
-			'.wp-bootstrap-blocks-template-selector-button > button[aria-label="3 Columns (1:1:1)"]'
-		).click();
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"][data-size-md="4"]'
-		).should( 'have.length', 3 );
-		cy.postContentMatchesSnapshot();
-
-		cy.get(
-			'.wp-bootstrap-blocks-template-selector-button > button[aria-label="2 Columns (2:1)"]'
-		).click();
-		cy.postContentMatchesSnapshot();
-	} );
-
-	it( 'Should be possible to select custom template', () => {
-		cy.insertRowBlock();
-		cy.selectRowBlock();
-		cy.ensureSidebarOpened();
-
-		// Custom template should add block list appender (shouldn't change current layout)
-		cy.get(
-			'.wp-bootstrap-blocks-template-selector-button > button[aria-label="Custom"]'
-		).click();
-		cy.get(
-			'.wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender'
-		).should( 'exist' );
-		cy.postContentMatchesSnapshot();
-	} );
-
-	it( 'Should only be possible to add column in custom layout', () => {
-		cy.insertRowBlock();
-		cy.selectRowBlock();
-		cy.ensureSidebarOpened();
-
-		// Select custom template
-		cy.get(
-			'.wp-bootstrap-blocks-template-selector-button > button[aria-label="Custom"]'
-		).click();
-
-		// Add column block by clicking the block list appender
-		cy.get(
-			'.wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender > button'
-		).click();
-
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/column"]'
-		).should( 'have.length', 3 );
-	} );
-
-	it( 'Should be possible to apply row options', () => {
-		cy.insertRowBlock();
-		cy.selectRowBlock();
-		cy.ensureSidebarOpened();
-
-		// Enable no gutters option
-		cy.clickElementByText( 'label', 'No Gutters' );
-		cy.postContentMatchesSnapshot();
-	} );
-
-	it( 'Should be possible to enable column layout in editor', () => {
-		cy.insertRowBlock();
-		cy.selectRowBlock();
-		cy.ensureSidebarOpened();
-
-		// Enable editor stack columns
-		cy.clickElementByText( 'label', 'Editor: Display columns stacked' );
-		cy.get(
-			'.block-editor-block-list__block[data-type="wp-bootstrap-blocks/row"][data-editor-stack-columns="true"]'
-		).should( 'have.length', 1 );
-		cy.postContentMatchesSnapshot();
-	} );
-
-	// Bootstrap 5 specific options
-
-	it( 'Should display Bootstrap v5 options', () => {
-		cy.insertRowBlock();
-		cy.selectRowBlock();
-		cy.ensureSidebarOpened();
-
-		// Horizontal Gutters options should exist
-		cy.xpath(
-			'//label[contains(@class,"components-input-control__label")][contains(text(),"Horizontal Gutters")]'
-		).should( 'have.length', 1 );
-
-		// Vertical Gutters options should exist
-		cy.xpath(
-			'//label[contains(@class,"components-input-control__label")][contains(text(),"Vertical Gutters")]'
-		).should( 'have.length', 1 );
-	} );
-
-	it( 'Should be possible to change gutter sizes', () => {
-		cy.insertRowBlock();
-		cy.selectRowBlock();
-		cy.ensureSidebarOpened();
-
-		// Change horizontal gutter
-		cy.getSelectByLabel( 'Horizontal Gutters' ).select( 'gx-5' );
-
-		// Change vertical gutter
-		cy.getSelectByLabel( 'Vertical Gutters' ).select( 'gy-3' );
-
-		cy.postContentMatchesSnapshot();
-	} );
-
-	it( 'Should hide gutter options when no gutters is checked', () => {
-		cy.insertRowBlock();
-		cy.selectRowBlock();
-		cy.ensureSidebarOpened();
-
-		// Enable no gutters option
-		cy.clickElementByText( 'label', 'No Gutters' );
-
-		// Horizontal Gutters options should be hidden
-		cy.xpath(
-			'//label[contains(@class,"components-base-control__label")][contains(text(),"Horizontal Gutters")]'
-		).should( 'not.exist' );
-
-		// Vertical Gutters options should be hidden
-		cy.xpath(
-			'//label[contains(@class,"components-base-control__label")][contains(text(),"Vertical Gutters")]'
-		).should( 'not.exist' );
-	} );
-} );
diff --git a/cypress/e2e/settings/settings.cy.js b/cypress/e2e/settings/settings.cy.js
deleted file mode 100644
index ad54872fc..000000000
--- a/cypress/e2e/settings/settings.cy.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/// <reference types="Cypress" />
-
-describe( 'Settings page', () => {
-	beforeEach( () => {
-		cy.loginUser();
-	} );
-
-	it( 'Default values should be selected', () => {
-		cy.visitAdminPage(
-			'options-general.php?page=wp-bootstrap-blocks_settings'
-		);
-
-		cy.get(
-			'#wp-bootstrap-blocks_bootstrap_version option:selected'
-		).should( 'have.value', '5' );
-
-		cy.get( '#wp-bootstrap-blocks_enable_css_grid' )
-			.should( 'not.be.checked' )
-			.and( 'be.enabled' );
-	} );
-
-	it( 'Should respect constants', () => {
-		cy.activatePlugin( 'wp-bootstrap-blocks-test-css-grid' );
-		cy.visitAdminPage(
-			'options-general.php?page=wp-bootstrap-blocks_settings'
-		);
-
-		cy.get( '#wp-bootstrap-blocks_bootstrap_version' ).should(
-			'be.disabled'
-		);
-		cy.get(
-			'#wp-bootstrap-blocks_bootstrap_version option:selected'
-		).should( 'have.value', '5' );
-
-		cy.get( '#wp-bootstrap-blocks_enable_css_grid' )
-			.should( 'be.checked' )
-			.and( 'be.disabled' );
-
-		cy.deactivatePlugin( 'wp-bootstrap-blocks-test-css-grid' );
-	} );
-} );
diff --git a/playwright/e2e/row/__snapshots__/apply-row-options-chromium.txt b/playwright/e2e/row/__snapshots__/apply-row-options-chromium.txt
new file mode 100644
index 000000000..12f6b75d2
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/apply-row-options-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"noGutters":true} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/change-alignment-1-chromium.txt b/playwright/e2e/row/__snapshots__/change-alignment-1-chromium.txt
new file mode 100644
index 000000000..9f581f9ab
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/change-alignment-1-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"alignment":"right"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/change-alignment-2-chromium.txt b/playwright/e2e/row/__snapshots__/change-alignment-2-chromium.txt
new file mode 100644
index 000000000..f9e1833ac
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/change-alignment-2-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"alignment":"right","verticalAlignment":"bottom"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/change-gutter-sizes-chromium.txt b/playwright/e2e/row/__snapshots__/change-gutter-sizes-chromium.txt
new file mode 100644
index 000000000..53246714e
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/change-gutter-sizes-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"horizontalGutters":"gx-5","verticalGutters":"gy-3"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/change-layout-1-chromium.txt b/playwright/e2e/row/__snapshots__/change-layout-1-chromium.txt
new file mode 100644
index 000000000..4b0d33f51
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/change-layout-1-chromium.txt
@@ -0,0 +1,7 @@
+<!-- wp:wp-bootstrap-blocks/row {"template":"1-1-1"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/change-layout-2-chromium.txt b/playwright/e2e/row/__snapshots__/change-layout-2-chromium.txt
new file mode 100644
index 000000000..f5f93076c
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/change-layout-2-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"template":"2-1"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/enable-column-layout-in-editor-chromium.txt b/playwright/e2e/row/__snapshots__/enable-column-layout-in-editor-chromium.txt
new file mode 100644
index 000000000..0fbede871
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/enable-column-layout-in-editor-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"editorStackColumns":true} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/row-block-is-inserted-chromium.txt b/playwright/e2e/row/__snapshots__/row-block-is-inserted-chromium.txt
new file mode 100644
index 000000000..34e12f9e8
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/row-block-is-inserted-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/select-custom-layout-chromium.txt b/playwright/e2e/row/__snapshots__/select-custom-layout-chromium.txt
new file mode 100644
index 000000000..1f2a6d944
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/select-custom-layout-chromium.txt
@@ -0,0 +1,5 @@
+<!-- wp:wp-bootstrap-blocks/row {"template":"custom"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} /-->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/v1-0-0-row-block-content-is-compatible-chromium.txt b/playwright/e2e/row/__snapshots__/v1-0-0-row-block-content-is-compatible-chromium.txt
new file mode 100644
index 000000000..8a3d17d2a
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/v1-0-0-row-block-content-is-compatible-chromium.txt
@@ -0,0 +1,27 @@
+<!-- wp:wp-bootstrap-blocks/row {"template":"2-1","noGutters":true,"className":"additional-class-1 additional-class-2"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} -->
+<!-- wp:paragraph -->
+<p>row 1 col 1</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeXl":9,"sizeLg":8,"sizeMd":7,"sizeSm":6,"sizeXs":5} -->
+<!-- wp:paragraph -->
+<p>row 1 col 2</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- /wp:wp-bootstrap-blocks/row -->
+
+<!-- wp:wp-bootstrap-blocks/row {"alignment":"right","verticalAlignment":"bottom","align":"full"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} -->
+<!-- wp:paragraph -->
+<p>row 2 col 1</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} -->
+<!-- wp:paragraph -->
+<p>row 2 col 2</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/v1-1-0-row-block-content-is-compatible-chromium.txt b/playwright/e2e/row/__snapshots__/v1-1-0-row-block-content-is-compatible-chromium.txt
new file mode 100644
index 000000000..3ae486742
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/v1-1-0-row-block-content-is-compatible-chromium.txt
@@ -0,0 +1,41 @@
+<!-- wp:wp-bootstrap-blocks/row {"template":"2-1","noGutters":true,"className":"additional-class-1 additional-class-2"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8} -->
+<!-- wp:paragraph -->
+<p>row 1 col 1</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeXl":9,"sizeLg":8,"sizeMd":7,"sizeSm":6,"sizeXs":5,"bgColor":"primary","padding":"p-5","contentVerticalAlignment":"center"} -->
+<!-- wp:paragraph -->
+<p>row 1 col 2</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- /wp:wp-bootstrap-blocks/row -->
+
+<!-- wp:wp-bootstrap-blocks/row {"alignment":"right","verticalAlignment":"bottom","align":"full"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} -->
+<!-- wp:paragraph -->
+<p>row 2 col 1</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} -->
+<!-- wp:paragraph -->
+<p>row 2 col 2</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- /wp:wp-bootstrap-blocks/row -->
+
+<!-- wp:wp-bootstrap-blocks/row {"template":"custom"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} -->
+<!-- wp:paragraph -->
+<p>row 3 col 1</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":6} -->
+<!-- wp:paragraph -->
+<p>row 3 col 2</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/playwright/e2e/row/__snapshots__/v3-2-0-column-block-content-with-center-content-option-gets-migrated-to-content-vertical-alignment-chromium.txt b/playwright/e2e/row/__snapshots__/v3-2-0-column-block-content-with-center-content-option-gets-migrated-to-content-vertical-alignment-chromium.txt
new file mode 100644
index 000000000..383757a0e
--- /dev/null
+++ b/playwright/e2e/row/__snapshots__/v3-2-0-column-block-content-with-center-content-option-gets-migrated-to-content-vertical-alignment-chromium.txt
@@ -0,0 +1,13 @@
+<!-- wp:wp-bootstrap-blocks/row {"template":"2-1"} -->
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":8,"bgColor":"primary","contentVerticalAlignment":"center"} -->
+<!-- wp:paragraph -->
+<p>row 1 col 1</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+
+<!-- wp:wp-bootstrap-blocks/column {"sizeMd":4} -->
+<!-- wp:paragraph -->
+<p>row 1 col 2</p>
+<!-- /wp:paragraph -->
+<!-- /wp:wp-bootstrap-blocks/column -->
+<!-- /wp:wp-bootstrap-blocks/row -->
\ No newline at end of file
diff --git a/cypress/fixtures/row-1.0.0.js b/playwright/e2e/row/fixtures/row-1.0.0.js
similarity index 100%
rename from cypress/fixtures/row-1.0.0.js
rename to playwright/e2e/row/fixtures/row-1.0.0.js
diff --git a/cypress/fixtures/row-1.1.0.js b/playwright/e2e/row/fixtures/row-1.1.0.js
similarity index 100%
rename from cypress/fixtures/row-1.1.0.js
rename to playwright/e2e/row/fixtures/row-1.1.0.js
diff --git a/cypress/fixtures/row-1.4.0.js b/playwright/e2e/row/fixtures/row-1.4.0.js
similarity index 100%
rename from cypress/fixtures/row-1.4.0.js
rename to playwright/e2e/row/fixtures/row-1.4.0.js
diff --git a/cypress/fixtures/row-3.2.0-center-content.js b/playwright/e2e/row/fixtures/row-3.2.0-center-content.js
similarity index 100%
rename from cypress/fixtures/row-3.2.0-center-content.js
rename to playwright/e2e/row/fixtures/row-3.2.0-center-content.js
diff --git a/cypress/fixtures/row-bootstrap5.js b/playwright/e2e/row/fixtures/row-bootstrap5.js
similarity index 100%
rename from cypress/fixtures/row-bootstrap5.js
rename to playwright/e2e/row/fixtures/row-bootstrap5.js
diff --git a/playwright/e2e/row/row-block-backwards-compat.spec.ts b/playwright/e2e/row/row-block-backwards-compat.spec.ts
new file mode 100644
index 000000000..7f333e3f2
--- /dev/null
+++ b/playwright/e2e/row/row-block-backwards-compat.spec.ts
@@ -0,0 +1,389 @@
+import rowContent100 from './fixtures/row-1.0.0';
+import rowContent110 from './fixtures/row-1.1.0';
+import rowContent140 from './fixtures/row-1.4.0';
+import rowContentBootstrap5 from './fixtures/row-bootstrap5';
+import rowContent320CenterContent from './fixtures/row-3.2.0-center-content';
+
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Row Block - Backwards compatibility', () => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'wp-bootstrap-blocks/row',
+		} );
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test( 'v1.0.0 row block content is compatible', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.setContent( rowContent100 );
+
+		// Row blocks should be successfully inserted
+		expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/row"]' )
+		).toHaveLength( 2 );
+		expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/column"]' )
+		).toHaveLength( 4 );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'v1.0.0-row-block-content-is-compatible.txt'
+		);
+
+		await testVersion100RowFeatures( editor, page );
+	} );
+
+	test( 'v1.1.0 row block content is compatible', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.setContent( rowContent110 );
+
+		// Row blocks should be successfully inserted
+		expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/row"]' )
+		).toHaveLength( 3 );
+		expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/column"]' )
+		).toHaveLength( 6 );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'v1.1.0-row-block-content-is-compatible.txt'
+		);
+
+		await testVersion100RowFeatures( editor, page );
+
+		await testVersion110RowFeatures( editor, page );
+	} );
+
+	test( 'v1.1.0 column block content is compatible', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.setContent( rowContent110 );
+
+		await testVersion100ColumnFeatures( editor, page );
+
+		await testVersion110ColumnFeatures( editor, page );
+	} );
+
+	test( 'v1.4.0 column block content is compatible', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.setContent( rowContent140 );
+
+		await testVersion100ColumnFeatures( editor, page );
+
+		await testVersion110ColumnFeatures( editor, page );
+
+		await testVersion140ColumnFeatures( editor, page );
+	} );
+
+	test( 'v3.2.0 column block content with center content option gets migrated to content vertical alignment', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.setContent( rowContent320CenterContent );
+
+		// Select 1. Column of 1. Row
+		await editor.selectBlocks(
+			page
+				.locator( 'role=document[name="Block: Row (Bootstrap)"i]' )
+				.locator( 'nth=0' )
+				.locator( 'role=document[name="Block: Column (Bootstrap)"i]' )
+				.locator( 'nth=0' )
+		);
+
+		// Check if row block could be inserted without error
+		await expect(
+			await page.locator( '[data-type="wp-bootstrap-blocks/row"]' )
+		).toBeVisible();
+		await expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/column"]' )
+		).toHaveLength( 2 );
+
+		// Check if center content option was migrated to content vertical alignment
+		await editor.clickBlockToolbarButton(
+			'Change vertical alignment of content'
+		);
+		await expect(
+			await page.locator(
+				'button.is-active:text("Align content center")'
+			)
+		).toBeVisible();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'v3.2.0-column-block-content-with-center-content-option-gets-migrated-to-content-vertical-alignment.txt'
+		);
+	} );
+} );
+
+test.describe( 'Row Block - Backwards compatibility Bootstrap 4', () => {
+	test.beforeAll( async ( { requestUtils } ) => {
+		await requestUtils.activatePlugin(
+			'wp-bootstrap-blocks-test-bootstrap-v4'
+		);
+	} );
+
+	test.afterAll( async ( { requestUtils } ) => {
+		await requestUtils.deactivatePlugin(
+			'wp-bootstrap-blocks-test-bootstrap-v4'
+		);
+	} );
+
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'wp-bootstrap-blocks/row',
+		} );
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test( 'Bootstrap 4 works with Bootstrap 5 settings', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.setContent( rowContentBootstrap5 );
+
+		// Select 1. Column of 1. Row
+		await editor.selectBlocks(
+			page
+				.locator( 'role=document[name="Block: Row (Bootstrap)"i]' )
+				.locator( 'nth=0' )
+				.locator( 'role=document[name="Block: Column (Bootstrap)"i]' )
+				.locator( 'nth=0' )
+		);
+
+		// Check if row block could be inserted without error
+		await expect(
+			await page.locator( '[data-type="wp-bootstrap-blocks/row"]' )
+		).toBeVisible();
+		await expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/column"]' )
+		).toHaveLength( 2 );
+
+		// Check if Bootstrap 4 values are set in inspector controls
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'button', { name: 'Column size' } )
+			.click();
+
+		expect(
+			await page
+				.getByRole( 'spinbutton', { name: 'Md Column count' } )
+				.inputValue()
+		).toBe( '8' );
+	} );
+} );
+
+const testVersion100RowFeatures = async ( editor, page ) => {
+	// Select first row block
+	await editor.selectBlocks(
+		page.locator( 'role=document[name="Block: Row (Bootstrap)"i]' ).first()
+	);
+
+	// 2:1 template should be selected
+	await expect(
+		await page.locator(
+			'.wp-bootstrap-blocks-template-selector-button > button[aria-label="2 Columns (2:1)"].is-active'
+		)
+	).toBeVisible();
+
+	// No Gutters option should be checked
+	expect(
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'No Gutters', { exact: true } )
+			.isChecked()
+	).toBeTruthy();
+
+	// Select 2. Row
+	await editor.selectBlocks(
+		page
+			.locator( 'role=document[name="Block: Row (Bootstrap)"i]' )
+			.locator( 'nth=1' )
+	);
+
+	// Align columns right should be selected
+	await editor.clickBlockToolbarButton(
+		'Change horizontal alignment of columns'
+	);
+	await expect(
+		await page.locator( 'button.is-active:text("Align columns right")' )
+	).toBeVisible();
+
+	// Align columns bottom should be selected
+	await editor.clickBlockToolbarButton(
+		'Change vertical alignment of columns'
+	);
+	await expect(
+		await page.locator( 'button.is-active:text("Align columns bottom")' )
+	).toBeVisible();
+
+	// TODO fix
+	// Align full should be selected
+	/*await editor.clickBlockToolbarButton( 'Align' );
+	await expect(
+		await page.locator( 'button.is-active:text("Full width")' )
+	).toBeVisible();*/
+};
+
+const testVersion110RowFeatures = async ( editor, page ) => {
+	// Select 3. Row
+	await editor.selectBlocks(
+		page
+			.locator( 'role=document[name="Block: Row (Bootstrap)"i]' )
+			.locator( 'nth=2' )
+	);
+
+	// Custom template should be selected
+	await expect(
+		await page.locator(
+			'.wp-bootstrap-blocks-template-selector-button > button[aria-label="Custom"].is-active'
+		)
+	).toBeVisible();
+
+	// Column block appender should be visible
+	await expect(
+		page.locator(
+			'.wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender'
+		)
+	).toBeVisible();
+};
+
+const testVersion100ColumnFeatures = async ( editor, page ) => {
+	// Select 2. Column of 1. Row
+	await editor.selectBlocks(
+		page
+			.locator( 'role=document[name="Block: Row (Bootstrap)"i]' )
+			.locator( 'nth=0' )
+			.locator( 'role=document[name="Block: Column (Bootstrap)"i]' )
+			.locator( 'nth=1' )
+	);
+
+	// Check if default values are set in inspector controls
+	await page
+		.getByRole( 'region', {
+			name: 'Editor settings',
+		} )
+		.getByRole( 'button', { name: 'Column size' } )
+		.click();
+
+	expect(
+		await page
+			.getByRole( 'spinbutton', { name: 'Xs Column count' } )
+			.inputValue()
+	).toBe( '5' );
+	expect(
+		await page
+			.getByRole( 'spinbutton', { name: 'Sm Column count' } )
+			.inputValue()
+	).toBe( '6' );
+	expect(
+		await page
+			.getByRole( 'spinbutton', { name: 'Md Column count' } )
+			.inputValue()
+	).toBe( '7' );
+	expect(
+		await page
+			.getByRole( 'spinbutton', { name: 'Lg Column count' } )
+			.inputValue()
+	).toBe( '8' );
+	expect(
+		await page
+			.getByRole( 'spinbutton', {
+				name: 'Xl Column count',
+				exact: true,
+			} )
+			.inputValue()
+	).toBe( '9' );
+};
+
+const testVersion110ColumnFeatures = async ( editor, page ) => {
+	// Select 2. Column of 1. Row
+	await editor.selectBlocks(
+		page
+			.locator( 'role=document[name="Block: Row (Bootstrap)"i]' )
+			.locator( 'nth=0' )
+			.locator( 'role=document[name="Block: Column (Bootstrap)"i]' )
+			.locator( 'nth=1' )
+	);
+
+	// Background color should be selected
+	await page
+		.getByRole( 'region', {
+			name: 'Editor settings',
+		} )
+		.getByRole( 'button', { name: 'Background color' } )
+		.click();
+
+	// There is no way to see which color of a color palette is selected. That's why we check the data attribute value of the second column block.
+	expect(
+		await page
+			.locator( '[data-type="wp-bootstrap-blocks/column"]' )
+			.locator( 'nth=1' )
+			.getAttribute( 'data-bg-color' )
+	).toBe( 'primary' );
+
+	// Check if center content option was migrated to content vertical alignment
+	await editor.clickBlockToolbarButton(
+		'Change vertical alignment of content'
+	);
+	await expect(
+		await page.locator( 'button.is-active:text("Align content center")' )
+	).toBeVisible();
+
+	// Padding should be selected
+	await page
+		.getByRole( 'region', {
+			name: 'Editor settings',
+		} )
+		.getByRole( 'button', { name: 'Padding (inside column)' } )
+		.click();
+
+	expect(
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Size' )
+			.inputValue()
+	).toBe( 'p-5' );
+};
+
+const testVersion140ColumnFeatures = async ( editor, page ) => {
+	// Select 2. Column of 1. Row
+	await editor.selectBlocks(
+		page
+			.locator( 'role=document[name="Block: Row (Bootstrap)"i]' )
+			.locator( 'nth=0' )
+			.locator( 'role=document[name="Block: Column (Bootstrap)"i]' )
+			.locator( 'nth=1' )
+	);
+
+	// Column equal-width checkboxes should be checked
+	expect(
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Lg equal-width' )
+			.isChecked()
+	).toBeTruthy();
+	expect(
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Xl equal-width', { exact: true } )
+			.isChecked()
+	).toBeTruthy();
+};
diff --git a/playwright/e2e/row/row-block.spec.ts b/playwright/e2e/row/row-block.spec.ts
new file mode 100644
index 000000000..327da6b57
--- /dev/null
+++ b/playwright/e2e/row/row-block.spec.ts
@@ -0,0 +1,264 @@
+const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
+
+test.describe( 'Row Block', () => {
+	test.beforeEach( async ( { admin, editor, page } ) => {
+		await admin.createNewPost();
+		await editor.insertBlock( {
+			name: 'wp-bootstrap-blocks/row',
+		} );
+		await editor.openDocumentSettingsSidebar();
+	} );
+
+	test( 'Row block is inserted', async ( { editor, page } ) => {
+		// Check if row block was inserted
+		await expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/row"]' )
+		).toHaveLength( 1 );
+
+		await expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/column"]' )
+		).toHaveLength( 2 );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'row-block-is-inserted.txt'
+		);
+	} );
+
+	test( 'Change alignment', async ( { editor, page } ) => {
+		// Change horizontal alignment
+		await editor.clickBlockToolbarButton(
+			'Change horizontal alignment of columns'
+		);
+		await page.locator( 'button:text("Align columns right")' ).click();
+
+		await expect(
+			await page.locator(
+				'[data-type="wp-bootstrap-blocks/row"][data-alignment="right"]'
+			)
+		).toBeVisible();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'change-alignment-1.txt'
+		);
+
+		await editor.clickBlockToolbarButton(
+			'Change vertical alignment of columns'
+		);
+		await page.locator( 'button:text("Align columns bottom")' ).click();
+
+		await expect(
+			await page.locator(
+				'[data-type="wp-bootstrap-blocks/row"][data-vertical-alignment="bottom"]'
+			)
+		).toBeVisible();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'change-alignment-2.txt'
+		);
+	} );
+
+	test( 'Change layout', async ( { editor, page } ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// Layout options should be visible
+		expect(
+			await page.$$( '.wp-bootstrap-blocks-template-selector-button' )
+		).toHaveLength( 5 );
+
+		await expect(
+			await page.locator(
+				'.wp-bootstrap-blocks-template-selector-button > button[aria-label="2 Columns (1:1)"].is-active'
+			)
+		).toBeVisible();
+
+		expect(
+			await page.$$(
+				'[data-type="wp-bootstrap-blocks/column"][data-size-md="6"]'
+			)
+		).toHaveLength( 2 );
+
+		// Template should be applied
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'button', { name: '3 Columns (1:1:1)' } )
+			.click();
+
+		expect(
+			await page.$$(
+				'[data-type="wp-bootstrap-blocks/column"][data-size-md="4"]'
+			)
+		).toHaveLength( 3 );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'change-layout-1.txt'
+		);
+
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'button', { name: '2 Columns (2:1)' } )
+			.click();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'change-layout-2.txt'
+		);
+	} );
+
+	test( 'Select custom layout', async ( { editor, page } ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// Custom template should add block list appender (shouldn't change current layout)
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'button', { name: 'Custom' } )
+			.click();
+
+		await expect(
+			await page.locator(
+				'.wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender'
+			)
+		).toBeVisible();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'select-custom-layout.txt'
+		);
+	} );
+
+	test( 'Add column in custom layout', async ( { editor, page } ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// Select custom template
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByRole( 'button', { name: 'Custom' } )
+			.click();
+
+		// Add column block by clicking the block list appender
+		await page
+			.locator(
+				'.wp-block-wp-bootstrap-blocks-row > .block-editor-inner-blocks > .block-editor-block-list__layout > .block-list-appender > button'
+			)
+			.click();
+
+		expect(
+			await page.$$( '[data-type="wp-bootstrap-blocks/column"]' )
+		).toHaveLength( 3 );
+	} );
+
+	test( 'Apply row options', async ( { editor, page } ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// Enable no gutters option
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'No Gutters' )
+			.click();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'apply-row-options.txt'
+		);
+	} );
+
+	test( 'Enable column layout in editor', async ( { editor, page } ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// Enable no gutters option
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Editor: Display columns stacked' )
+			.click();
+
+		await expect(
+			await page.locator(
+				'[data-type="wp-bootstrap-blocks/row"][data-editor-stack-columns="true"]'
+			)
+		).toBeVisible();
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'enable-column-layout-in-editor.txt'
+		);
+	} );
+
+	// Bootstrap 5 specific options
+	test( 'Bootstrap v5 options are displayed', async ( { editor, page } ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// Horizontal Gutters options should exist
+		await expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Horizontal Gutters' )
+		).toBeVisible();
+
+		// Vertical Gutters options should exist
+		await expect(
+			await page
+				.getByRole( 'region', {
+					name: 'Editor settings',
+				} )
+				.getByLabel( 'Vertical Gutters' )
+		).toBeVisible();
+	} );
+
+	test( 'Change gutter sizes', async ( { editor, page } ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// Change horizontal gutter
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Horizontal Gutters' )
+			.selectOption( 'gx-5' );
+
+		// Vertical Gutters options should exist
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'Vertical Gutters' )
+			.selectOption( 'gy-3' );
+
+		expect( await editor.getEditedPostContent() ).toMatchSnapshot(
+			'change-gutter-sizes.txt'
+		);
+	} );
+
+	test( 'Gutter options are hidden when no gutters is checked', async ( {
+		editor,
+		page,
+	} ) => {
+		await editor.openDocumentSettingsSidebar();
+
+		// Enable no gutters option
+		await page
+			.getByRole( 'region', {
+				name: 'Editor settings',
+			} )
+			.getByLabel( 'No Gutters' )
+			.click();
+
+		// Horizontal Gutters options should be hidden
+		await expect(
+			await page.locator( 'label:text("Horizontal Gutters")' )
+		).not.toBeVisible();
+
+		// Vertical Gutters options should be hidden
+		await expect(
+			await page.locator( 'label:text("Vertical Gutters")' )
+		).not.toBeVisible();
+	} );
+} );