From 3f8bae1a29c05c8adb0e339440ead69ab0a09c0a Mon Sep 17 00:00:00 2001
From: Andreas Zerbst <73799582+andr317c@users.noreply.github.com>
Date: Tue, 27 Aug 2024 10:36:44 +0200
Subject: [PATCH] V14 QA added Block grid acceptance tests (#16908)

* Added blockgrid tests

* Additional tests

* Added more tets

* Split tests

* Block updates

* Bumped version

* Added block tests

* Fixes, not done

* Fixed

* Updated helper

* Bumped version

* Bumped helpers

* Fixed conflicts

* Removed page

* Removed page

* Bumped

* Reverted to run smoke tests
---
 .../package-lock.json                         |  22 +-
 .../Umbraco.Tests.AcceptanceTest/package.json |   2 +-
 .../Block/BlockGridBlockAdvanced.spec.ts      | 277 ++++++++++++
 .../Block/BlockGridBlockAreas.spec.ts         | 356 ++++++++++++++++
 .../Block/BlockGridBlockSettings.spec.ts      | 253 +++++++++++
 .../BlockGrid/BlockGridEditor.spec.ts         | 399 ++++++++++++++++++
 6 files changed, 1290 insertions(+), 19 deletions(-)
 create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAdvanced.spec.ts
 create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAreas.spec.ts
 create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockSettings.spec.ts
 create mode 100644 tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/BlockGridEditor.spec.ts

diff --git a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json
index 4401900faf..f7103ba5a4 100644
--- a/tests/Umbraco.Tests.AcceptanceTest/package-lock.json
+++ b/tests/Umbraco.Tests.AcceptanceTest/package-lock.json
@@ -8,7 +8,7 @@
       "hasInstallScript": true,
       "dependencies": {
         "@umbraco/json-models-builders": "^2.0.17",
-        "@umbraco/playwright-testhelpers": "^2.0.0-beta.77",
+        "@umbraco/playwright-testhelpers": "^2.0.0-beta.78",
         "camelize": "^1.0.0",
         "dotenv": "^16.3.1",
         "faker": "^4.1.0",
@@ -140,9 +140,9 @@
       }
     },
     "node_modules/@umbraco/playwright-testhelpers": {
-      "version": "2.0.0-beta.77",
-      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.77.tgz",
-      "integrity": "sha512-e0yNJ8CV9f7vlVC77ThC2gUSee323G6koTk/Jp8CUpkwKnN/oL73sGfeKLQdPoL4QPt+Cu8j7hrU0D89Zsu3fg==",
+      "version": "2.0.0-beta.78",
+      "resolved": "https://registry.npmjs.org/@umbraco/playwright-testhelpers/-/playwright-testhelpers-2.0.0-beta.78.tgz",
+      "integrity": "sha512-s9jLCKQRfXH2zAkT4iUzu/XsrrPQRFVWdj7Ps3uvBV8YzdM1EYMAaCKwgZ5OnCSCN87gysYTW++NZyKT2Fg6qQ==",
       "dependencies": {
         "@umbraco/json-models-builders": "2.0.17",
         "node-fetch": "^2.6.7"
@@ -415,20 +415,6 @@
       "integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
       "dev": true
     },
-    "node_modules/fsevents": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
-      "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
-      "hasInstallScript": true,
-      "optional": true,
-      "os": [
-        "darwin"
-      ],
-      "engines": {
-        "node": "^8.16.0 || ^10.6.0 || >=11.0.0"
-      }
-    },
     "node_modules/glob": {
       "version": "7.2.3",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.2.3.tgz",
diff --git a/tests/Umbraco.Tests.AcceptanceTest/package.json b/tests/Umbraco.Tests.AcceptanceTest/package.json
index fd9c2ede9b..d6877d5581 100644
--- a/tests/Umbraco.Tests.AcceptanceTest/package.json
+++ b/tests/Umbraco.Tests.AcceptanceTest/package.json
@@ -22,7 +22,7 @@
   },
   "dependencies": {
     "@umbraco/json-models-builders": "^2.0.17",
-    "@umbraco/playwright-testhelpers": "^2.0.0-beta.77",
+    "@umbraco/playwright-testhelpers": "^2.0.0-beta.78",
     "camelize": "^1.0.0",
     "dotenv": "^16.3.1",
     "faker": "^4.1.0",
diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAdvanced.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAdvanced.spec.ts
new file mode 100644
index 0000000000..3f6c56c50c
--- /dev/null
+++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAdvanced.spec.ts
@@ -0,0 +1,277 @@
+import {test} from '@umbraco/playwright-testhelpers';
+import {expect} from "@playwright/test";
+
+const blockGridEditorName = 'TestBlockGridEditor';
+const elementTypeName = 'BlockGridElement';
+const dataTypeName = 'Textstring';
+const groupName = 'testGroup';
+
+test.beforeEach(async ({umbracoUi, umbracoApi}) => {
+  await umbracoApi.dataType.ensureNameNotExists(blockGridEditorName);
+  await umbracoUi.goToBackOffice();
+  await umbracoUi.dataType.goToSettingsTreeItem('Data Types');
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.dataType.ensureNameNotExists(blockGridEditorName);
+});
+
+//TODO: It is not possible to add a view to a block
+test.skip('can add a custom view to a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+});
+
+//TODO: It is not possible to add a view to a block
+test.skip('can remove a custom view from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+});
+
+// TODO: Stylesheets are currently saved as arrays
+test.skip('can remove a custom stylesheet from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const stylesheetName = 'TestStylesheet.css'
+  const stylesheetPath = '/wwwroot/css/' + stylesheetName;
+  await umbracoApi.stylesheet.ensureNameNotExists(stylesheetName);
+  await umbracoApi.stylesheet.createDefaultStylesheet(stylesheetName);
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAdvancedSettingsInBlock(blockGridEditorName, contentElementTypeId, undefined, stylesheetPath, undefined, undefined, undefined);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainStylesheet(blockGridEditorName, contentElementTypeId, stylesheetPath)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+});
+
+test('can update overlay size in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const overlaySize = 'medium';
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.updateBlockOverlaySize(overlaySize);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainOverlaySize(blockGridEditorName, contentElementTypeId, overlaySize)).toBeTruthy();
+});
+
+test('can enable inline editing mode in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.clickInlineEditingMode();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainInlineEditing(blockGridEditorName, contentElementTypeId, true)).toBeTruthy();
+});
+
+test('can disable inline editing mode in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAdvancedSettingsInBlock(blockGridEditorName, contentElementTypeId, undefined, undefined, 'small', true);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainInlineEditing(blockGridEditorName, contentElementTypeId, true)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.clickInlineEditingMode();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainInlineEditing(blockGridEditorName, contentElementTypeId, false)).toBeTruthy();
+});
+
+test('can enable hide content editor in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.clickBlockGridHideContentEditorButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainHideContentEditor(blockGridEditorName, contentElementTypeId, true)).toBeTruthy();
+});
+
+test('can disable hide content editor in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAdvancedSettingsInBlock(blockGridEditorName, contentElementTypeId, undefined, undefined, 'small', false, true);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainHideContentEditor(blockGridEditorName, contentElementTypeId, true)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.clickBlockGridHideContentEditorButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainHideContentEditor(blockGridEditorName, contentElementTypeId, false)).toBeTruthy();
+});
+
+test('can add a background color to a block', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const backGroundColor = '#000000';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.selectBlockBackgroundColor(backGroundColor);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainBackgroundColor(blockGridEditorName, contentElementTypeId, backGroundColor)).toBeTruthy();
+});
+
+test('can remove a background color to a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const backGroundColor = '#000000';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithCatalogueAppearanceInBlock(blockGridEditorName, contentElementTypeId, backGroundColor);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainBackgroundColor(blockGridEditorName, contentElementTypeId, backGroundColor)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.selectBlockBackgroundColor('');
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainBackgroundColor(blockGridEditorName, contentElementTypeId, '')).toBeTruthy();
+});
+
+test('can add a icon color to a block', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const iconColor = '#000000';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.selectBlockIconColor(iconColor);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainIconColor(blockGridEditorName, contentElementTypeId, iconColor)).toBeTruthy();
+});
+
+test('can remove a icon color from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const iconColor = '#000000';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithCatalogueAppearanceInBlock(blockGridEditorName, contentElementTypeId, '', iconColor);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainIconColor(blockGridEditorName, contentElementTypeId, iconColor)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.selectBlockIconColor('');
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainIconColor(blockGridEditorName, contentElementTypeId, '')).toBeTruthy();
+});
+
+// TODO: Thumbnails are not showing correctly
+test.skip('can add a thumbnail to a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const mediaName = 'TestMedia';
+  await umbracoApi.media.ensureNameNotExists(mediaName);
+  await umbracoApi.media.createDefaultMediaWithImage(mediaName);
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+  const mediaUrl = await umbracoApi.media.getMediaPathByName(mediaName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+  await umbracoUi.dataType.chooseBlockThumbnailWithPath(mediaUrl.fileName, mediaUrl.mediaPath);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+});
+
+// TODO: Thumbnails are not showing correctly
+test.skip('can remove a thumbnail from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAdvancedTab();
+});
diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAreas.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAreas.spec.ts
new file mode 100644
index 0000000000..d33141220a
--- /dev/null
+++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockAreas.spec.ts
@@ -0,0 +1,356 @@
+import {test} from '@umbraco/playwright-testhelpers';
+import {expect} from "@playwright/test";
+
+const blockGridEditorName = 'TestBlockGridEditor';
+const elementTypeName = 'BlockGridElement';
+const dataTypeName = 'Textstring';
+const groupName = 'testGroup';
+
+test.beforeEach(async ({umbracoUi, umbracoApi}) => {
+  await umbracoApi.dataType.ensureNameNotExists(blockGridEditorName);
+  await umbracoApi.documentType.ensureNameNotExists(elementTypeName);
+  await umbracoUi.goToBackOffice();
+  await umbracoUi.dataType.goToSettingsTreeItem('Data Types');
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.dataType.ensureNameNotExists(blockGridEditorName);
+  await umbracoApi.documentType.ensureNameNotExists(elementTypeName);
+});
+
+test('can update grid columns for areas for a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const gridColumns = 6;
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.enterGridColumnsForArea(gridColumns);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaGridColumns(blockGridEditorName, contentElementTypeId, gridColumns)).toBeTruthy();
+});
+
+test('can add an area for a block', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.addAreaButton();
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithAlias(blockGridEditorName, contentElementTypeId)).toBeTruthy();
+});
+
+// TODO: There are currently issues when trying to select the locator.
+test.skip('can resize an area for a block', async ({umbracoApi, umbracoUi}) => {
+// Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+});
+
+test('can update alias an area for a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const newAlias = 'NewAlias';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.enterAreaAlias(newAlias);
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithAlias(blockGridEditorName, contentElementTypeId, newAlias)).toBeTruthy();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaCount(blockGridEditorName, contentElementTypeId, 1)).toBeTruthy();
+});
+
+test('can remove an area for a block', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithAlias(blockGridEditorName, contentElementTypeId, areaAlias)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.clickRemoveAreaByAlias(areaAlias);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithAlias(blockGridEditorName, contentElementTypeId, areaAlias)).toBeFalsy();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaCount(blockGridEditorName, contentElementTypeId, 0)).toBeTruthy();
+});
+
+test('can add multiple areas for a block', async ({umbracoApi, umbracoUi}) => {
+// Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaCount(blockGridEditorName, contentElementTypeId, 1)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.addAreaButton();
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithAlias(blockGridEditorName, contentElementTypeId)).toBeTruthy();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithAlias(blockGridEditorName, contentElementTypeId, areaAlias)).toBeTruthy();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaCount(blockGridEditorName, contentElementTypeId, 2)).toBeTruthy();
+});
+
+test('can add create button label for an area in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const createButtonLabel = 'CreateButtonLabel';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.enterCreateButtonLabelInArea(createButtonLabel);
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithCreateButtonLabel(blockGridEditorName, contentElementTypeId, areaAlias, createButtonLabel)).toBeTruthy();
+});
+
+test('can remove create button label for an area in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const createButtonLabel = 'CreateButtonLabel';
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias, createButtonLabel);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.enterCreateButtonLabelInArea('');
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithCreateButtonLabel(blockGridEditorName, contentElementTypeId, areaAlias, '')).toBeTruthy();
+});
+
+//TODO: Frontend issue. when value is inserted to the min or max, it is set as a string instead of number
+test.skip('can add min allowed for an area in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const minAllowed = 3;
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.enterMinAllowedInArea(minAllowed);
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithMinAllowed(blockGridEditorName, contentElementTypeId, areaAlias, minAllowed)).toBeTruthy();
+});
+
+test('can remove min allowed for an area in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const minAllowed = 6;
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias, null, undefined, undefined, minAllowed);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithMinAllowed(blockGridEditorName, contentElementTypeId, areaAlias, minAllowed)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.enterMinAllowedInArea(undefined);
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithMinAllowed(blockGridEditorName, contentElementTypeId, areaAlias, minAllowed)).toBeFalsy();
+});
+
+//TODO: Frontend issue. when value is inserted to the min or max, it is set as a string instead of number
+test.skip('can add add max allowed for an area in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const maxAllowed = 7;
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.enterMaxAllowedInArea(maxAllowed);
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithMaxAllowed(blockGridEditorName, contentElementTypeId, areaAlias, maxAllowed)).toBeTruthy();
+});
+
+test('can remove max allowed for an area in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const areaAlias = 'TestArea';
+  const maxAllowed = 7;
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias, null, undefined, undefined, undefined, maxAllowed);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithMaxAllowed(blockGridEditorName, contentElementTypeId, areaAlias, maxAllowed)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.enterMaxAllowedInArea(undefined);
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainAreaWithMaxAllowed(blockGridEditorName, contentElementTypeId, areaAlias, maxAllowed)).toBeFalsy();
+});
+
+// TODO: There is no frontend validation for min and max values
+test.skip('min can not be more than max an area in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const areaAlias = 'TestArea';
+  const minAllowed = 6;
+  const maxAllowed = 7;
+  const newMinAllowed = 8;
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias, null, undefined, undefined, minAllowed, maxAllowed);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.enterMinAllowedInArea(newMinAllowed);
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+});
+
+// TODO: It is currently not possible to add a specified allowance
+test.skip('can add specified allowance for an area in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const areaAlias = 'TestArea';
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithAnAreaInABlock(blockGridEditorName, contentElementTypeId, areaAlias);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.goToBlockAreasTab();
+  await umbracoUi.dataType.goToAreaByAlias(areaAlias);
+  await umbracoUi.dataType.clickAddSpecifiedAllowanceButton();
+  await umbracoUi.dataType.clickAreaSubmitButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+});
+
+// TODO: It is currently not possible to add a specified allowance
+test.skip('can update specified allowance for an area in a block', async ({umbracoApi, umbracoUi}) => {
+
+});
+
+// TODO: It is currently not possible to add a specified allowance
+test.skip('can remove specified allowance for an area in a block', async ({umbracoApi, umbracoUi}) => {
+
+});
+
+// TODO: It is currently not possible to add a specified allowance
+test.skip('can add multiple specified allowances for an area in a block', async ({umbracoApi, umbracoUi}) => {
+
+});
+
+// TODO: It is currently not possible to add a specified allowance
+test.skip('can add specified allowance with min and max for an area in a block', async ({umbracoApi, umbracoUi}) => {
+});
+
+// TODO: It is currently not possible to add a specified allowance
+test.skip('can remove min and max from specified allowance for an area in a block', async ({umbracoApi, umbracoUi}) => {
+
+});
diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockSettings.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockSettings.spec.ts
new file mode 100644
index 0000000000..bf0ca4905e
--- /dev/null
+++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/Block/BlockGridBlockSettings.spec.ts
@@ -0,0 +1,253 @@
+import {test} from '@umbraco/playwright-testhelpers';
+import {expect} from "@playwright/test";
+
+const blockGridEditorName = 'TestBlockGridEditor';
+const elementTypeName = 'BlockGridElement';
+const dataTypeName = 'Textstring';
+const groupName = 'testGroup';
+
+test.beforeEach(async ({umbracoUi, umbracoApi}) => {
+  await umbracoApi.dataType.ensureNameNotExists(blockGridEditorName);
+  await umbracoUi.goToBackOffice();
+  await umbracoUi.dataType.goToSettingsTreeItem('Data Types');
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.dataType.ensureNameNotExists(blockGridEditorName);
+});
+
+test('can add a label to a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const labelText = 'TestLabel';
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, elementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.enterBlockLabelText(labelText);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainLabel(blockGridEditorName, elementTypeId, labelText)).toBeTruthy();
+});
+
+test('can remove a label from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const labelText = 'TestLabel';
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockListWithBlockWithEditorAppearance(blockGridEditorName, elementTypeId, labelText);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainLabel(blockGridEditorName, elementTypeId, labelText)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.enterBlockLabelText('');
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainLabel(blockGridEditorName, elementTypeId, labelText)).toBeFalsy();
+});
+
+test('can open content model in a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, elementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.openBlockContentModel();
+
+  // Assert
+  await umbracoUi.dataType.isElementWorkspaceOpenInBlock(elementTypeName);
+});
+
+test('can add a settings model to a block', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  const secondElementName = 'SecondElementTest';
+  const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.addBlockSettingsModel(secondElementName);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithSettingsTypeIds(blockGridEditorName, [settingsElementTypeId])).toBeTruthy();
+});
+
+test('can remove a settings model from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  const secondElementName = 'SecondElementTest';
+  const settingsElementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithContentAndSettingsElementType(blockGridEditorName, contentElementTypeId, settingsElementTypeId);
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithSettingsTypeIds(blockGridEditorName, [settingsElementTypeId])).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.removeBlockSettingsModel();
+  await umbracoUi.dataType.clickConfirmRemoveButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithSettingsTypeIds(blockGridEditorName, [settingsElementTypeId])).toBeFalsy();
+});
+
+test('can enable allow in root from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.clickAllowInRootForBlock();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockHaveAllowInRootEnabled(blockGridEditorName, contentElementTypeId)).toBeTruthy();
+});
+
+test('can enable allow in areas from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.clickAllowInAreasForBlock();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockHaveAllowInAreasEnabled(blockGridEditorName, contentElementTypeId)).toBeTruthy();
+});
+
+test('can add a column span to a block', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const columnSpan = [1];
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.clickShowResizeOptions();
+  await umbracoUi.dataType.clickAvailableColumnSpans(columnSpan);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainColumnSpanOptions(blockGridEditorName, contentElementTypeId, columnSpan)).toBeTruthy();
+});
+
+test('can add multiple column spans to a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const columnSpan = [1, 3, 6, 8];
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.clickShowResizeOptions();
+  await umbracoUi.dataType.clickAvailableColumnSpans(columnSpan);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainColumnSpanOptions(blockGridEditorName, contentElementTypeId, columnSpan)).toBeTruthy();
+});
+
+test('can remove a column span from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const columnSpan = [4];
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithSizeOptions(blockGridEditorName, contentElementTypeId, columnSpan[0]);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainColumnSpanOptions(blockGridEditorName, contentElementTypeId, columnSpan)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.clickAvailableColumnSpans(columnSpan);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainColumnSpanOptions(blockGridEditorName, contentElementTypeId, [])).toBeTruthy();
+});
+
+test('can add min and max row span to a block', async ({umbracoApi, umbracoUi}) => {
+// Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const rowSpanMin = 2;
+  const rowSpanMax = 6;
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, contentElementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.clickShowResizeOptions();
+  await umbracoUi.dataType.enterMinRowSpan(rowSpanMin);
+  await umbracoUi.dataType.enterMaxRowSpan(rowSpanMax);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainRowSpanOptions(blockGridEditorName, contentElementTypeId, rowSpanMin, rowSpanMax)).toBeTruthy();
+});
+
+test('can remove min and max row spans from a block', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const rowSpanMin = undefined;
+  const rowSpanMax = undefined;
+  const contentElementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithSizeOptions(blockGridEditorName, contentElementTypeId, undefined, 2, 6);
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainRowSpanOptions(blockGridEditorName, contentElementTypeId, 2, 6)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.goToBlockWithName(elementTypeName);
+  await umbracoUi.dataType.enterMinRowSpan(rowSpanMin);
+  await umbracoUi.dataType.enterMaxRowSpan(rowSpanMax);
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorBlockContainRowSpanOptions(blockGridEditorName, contentElementTypeId, rowSpanMin, rowSpanMax)).toBeTruthy();
+});
diff --git a/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/BlockGridEditor.spec.ts b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/BlockGridEditor.spec.ts
new file mode 100644
index 0000000000..fa717aa183
--- /dev/null
+++ b/tests/Umbraco.Tests.AcceptanceTest/tests/DefaultConfig/DataType/BlockGrid/BlockGridEditor.spec.ts
@@ -0,0 +1,399 @@
+import {test} from "@umbraco/playwright-testhelpers";
+import {expect} from "@playwright/test";
+
+const blockGridEditorName = 'TestBlockGridEditor';
+const elementTypeName = 'BlockGridElement';
+const dataTypeName = 'Textstring';
+const groupName = 'testGroup';
+
+test.beforeEach(async ({umbracoUi, umbracoApi}) => {
+  await umbracoApi.dataType.ensureNameNotExists(blockGridEditorName);
+  await umbracoUi.goToBackOffice();
+  await umbracoUi.dataType.goToSettingsTreeItem('Data Types');
+});
+
+test.afterEach(async ({umbracoApi}) => {
+  await umbracoApi.dataType.ensureNameNotExists(blockGridEditorName);
+});
+
+test('can create a block grid editor', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  //  Arrange
+  const blockGridLocatorName = 'Block Grid';
+  const blockGridEditorAlias = 'Umbraco.BlockGrid';
+  const blockGridEditorUiAlias = 'Umb.PropertyEditorUi.BlockGrid';
+
+  // Act
+  await umbracoUi.dataType.clickActionsMenuAtRoot();
+  await umbracoUi.dataType.clickCreateButton();
+  await umbracoUi.dataType.clickNewDataTypeThreeDotsButton();
+  await umbracoUi.dataType.enterDataTypeName(blockGridEditorName);
+  await umbracoUi.dataType.clickSelectAPropertyEditorButton();
+  await umbracoUi.dataType.selectAPropertyEditor(blockGridLocatorName);
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesNameExist(blockGridEditorName)).toBeTruthy();
+  const dataTypeData = await umbracoApi.dataType.getByName(blockGridEditorName);
+  expect(dataTypeData.editorAlias).toBe(blockGridEditorAlias);
+  expect(dataTypeData.editorUiAlias).toBe(blockGridEditorUiAlias);
+});
+
+test('can rename a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const wrongName = 'BlockListEditorTest';
+  await umbracoApi.dataType.createEmptyBlockGrid(wrongName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(wrongName);
+  await umbracoUi.dataType.enterDataTypeName(blockGridEditorName);
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesNameExist(blockGridEditorName)).toBeTruthy();
+  expect(await umbracoApi.dataType.doesNameExist(wrongName)).toBeFalsy();
+});
+
+test('can delete a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const blockGridId = await umbracoApi.dataType.createEmptyBlockGrid(blockGridEditorName);
+
+  // Act
+  await umbracoUi.dataType.clickRootFolderCaretButton();
+  await umbracoUi.dataType.clickActionsMenuForDataType(blockGridEditorName);
+  await umbracoUi.dataType.clickDeleteExactButton();
+  await umbracoUi.dataType.clickConfirmToDeleteButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesExist(blockGridId)).toBeFalsy();
+  await umbracoUi.dataType.isTreeItemVisible(blockGridEditorName, false);
+});
+
+test('can add a block to a block grid editor', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createEmptyBlockGrid(blockGridEditorName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.clickAddBlockButton();
+  await umbracoUi.dataType.clickLabelWithName(elementTypeName);
+  await umbracoUi.dataType.clickChooseModalButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithContentTypeIds(blockGridEditorName, [elementTypeId])).toBeTruthy();
+
+  // Clean
+  await umbracoApi.documentType.ensureNameNotExists(elementTypeName);
+});
+
+test('can add multiple blocks to a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const secondElementName = 'SecondBlockGridElement';
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  const secondElementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, elementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.clickAddBlockButton();
+  await umbracoUi.dataType.clickLabelWithName(secondElementName);
+  await umbracoUi.dataType.clickChooseModalButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithContentTypeIds(blockGridEditorName, [elementTypeId, secondElementTypeId])).toBeTruthy();
+
+  // Clean
+  await umbracoApi.documentType.ensureNameNotExists(elementTypeName);
+  await umbracoApi.documentType.ensureNameNotExists(secondElementTypeId);
+});
+
+test('can remove a block from a block grid editor', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlock(blockGridEditorName, elementTypeId);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.clickRemoveBlockWithName(elementTypeName);
+  await umbracoUi.dataType.clickConfirmRemoveButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithContentTypeIds(blockGridEditorName, [elementTypeId])).toBeFalsy();
+
+  // Clean
+  await umbracoApi.documentType.ensureNameNotExists(elementTypeName);
+});
+
+test('can add a block to a group in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createEmptyBlockGrid(blockGridEditorName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.clickAddGroupButton();
+  await umbracoUi.dataType.enterGroupName(groupName);
+  await umbracoUi.dataType.clickAddBlockButton(1);
+  await umbracoUi.dataType.clickLabelWithName(elementTypeName);
+  await umbracoUi.dataType.clickChooseModalButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockGridGroupContainCorrectBlocks(blockGridEditorName, groupName, [elementTypeId])).toBeTruthy();
+
+  // Clean
+  await umbracoApi.documentType.ensureNameNotExists(elementTypeName);
+});
+
+test('can add multiple blocks to a group in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const secondElementName = 'SecondBlockGridElement';
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  const secondElementTypeId = await umbracoApi.documentType.createDefaultElementType(secondElementName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlockInAGroup(blockGridEditorName, elementTypeId, groupName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.clickAddBlockButton(1);
+  await umbracoUi.dataType.clickLabelWithName(secondElementName);
+  await umbracoUi.dataType.clickChooseModalButton();
+  await umbracoUi.dataType.clickSubmitButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockGridGroupContainCorrectBlocks(blockGridEditorName, groupName, [elementTypeId, secondElementTypeId])).toBeTruthy();
+
+  // Clean
+  await umbracoApi.documentType.ensureNameNotExists(elementTypeName);
+  await umbracoApi.documentType.ensureNameNotExists(secondElementName);
+});
+
+test('can delete a block in a group from a block grid editor', {tag: '@smoke'}, async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlockInAGroup(blockGridEditorName, elementTypeId, groupName);
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithContentTypeIds(blockGridEditorName, [elementTypeId])).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.clickRemoveBlockWithName(elementTypeName);
+  await umbracoUi.dataType.clickConfirmRemoveButton();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithContentTypeIds(blockGridEditorName, [elementTypeId])).toBeFalsy();
+});
+
+test('can move a block from a group to another group in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const secondGroupName = 'MoveToHereGroup';
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlockInAGroup(blockGridEditorName, elementTypeId, groupName);
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithContentTypeIds(blockGridEditorName, [elementTypeId])).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.clickAddGroupButton();
+  await umbracoUi.dataType.enterGroupName(secondGroupName, 1);
+  // Drag and Drop
+  const dragFromLocator = await umbracoUi.dataType.getLinkWithName(elementTypeName);
+  const dragToLocator = await umbracoUi.dataType.getAddButtonInGroupWithName(secondGroupName);
+  await umbracoUi.dataType.dragAndDrop(dragFromLocator, dragToLocator, -10, 0, 10);
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockGridGroupContainCorrectBlocks(blockGridEditorName, secondGroupName, [elementTypeId])).toBeTruthy();
+  expect(await umbracoApi.dataType.doesBlockGridGroupContainCorrectBlocks(blockGridEditorName, groupName, [elementTypeId])).toBeFalsy();
+});
+
+// TODO: When deleting a group should there not be a confirmation button? and should the block be moved another group when the group it was in is deleted?
+test.skip('can delete a group in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const textStringData = await umbracoApi.dataType.getByName(dataTypeName);
+  const elementTypeId = await umbracoApi.documentType.createDefaultElementType(elementTypeName, groupName, dataTypeName, textStringData.id);
+  await umbracoApi.dataType.createBlockGridWithABlockInAGroup(blockGridEditorName, elementTypeId, groupName);
+  expect(await umbracoApi.dataType.doesBlockEditorContainBlocksWithContentTypeIds(blockGridEditorName, [elementTypeId])).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+});
+
+test('can add a min and max amount to a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const minAmount = 1;
+  const maxAmount = 2;
+  await umbracoApi.dataType.createEmptyBlockGrid(blockGridEditorName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.enterMinAmount(minAmount.toString());
+  await umbracoUi.dataType.enterMaxAmount(maxAmount.toString());
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  const dataTypeData = await umbracoApi.dataType.getByName(blockGridEditorName);
+  expect(dataTypeData.values[0].value.min).toBe(minAmount);
+  expect(dataTypeData.values[0].value.max).toBe(maxAmount);
+});
+
+test('max can not be less than min in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const minAmount = 2;
+  const oldMaxAmount = 2;
+  const newMaxAmount = 1;
+  await umbracoApi.dataType.createBlockGridWithMinAndMaxAmount(blockGridEditorName, minAmount, oldMaxAmount);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.enterMaxAmount(newMaxAmount.toString());
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible(false);
+  await umbracoUi.dataType.doesAmountContainErrorMessageWithText('The low value must not be exceed the high value');
+  const dataTypeData = await umbracoApi.dataType.getByName(blockGridEditorName);
+  expect(dataTypeData.values[0].value.min).toBe(minAmount);
+  // The max value should not be updated
+  expect(dataTypeData.values[0].value.max).toBe(oldMaxAmount);
+});
+
+test('can enable live editing mode in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  await umbracoApi.dataType.createEmptyBlockGrid(blockGridEditorName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  // This wait is currently necessary, sometimes there are issues when clicking the liveEdtingMode button
+  await umbracoUi.waitForTimeout(2000);
+  await umbracoUi.dataType.clickLiveEditingMode();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.isLiveEditingModeEnabledForBlockEditor(blockGridEditorName, true)).toBeTruthy();
+});
+
+test('can disable live editing mode in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  await umbracoApi.dataType.createBlockGridWithLiveEditingMode(blockGridEditorName, true);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  // This wait is currently necessary, sometimes there are issues when clicking the liveEditingMode button
+  await umbracoUi.waitForTimeout(2000);
+  await umbracoUi.dataType.clickLiveEditingMode();
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.isLiveEditingModeEnabledForBlockEditor(blockGridEditorName, false)).toBeTruthy();
+});
+
+test('can add editor width in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const propertyEditorWidth = '100%';
+  await umbracoApi.dataType.createEmptyBlockGrid(blockGridEditorName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.enterEditorWidth(propertyEditorWidth);
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesMaxPropertyContainWidthForBlockEditor(blockGridEditorName, propertyEditorWidth)).toBeTruthy();
+});
+
+test('can remove editor width in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const propertyEditorWidth = '100%';
+  await umbracoApi.dataType.createBlockGridWithPropertyEditorWidth(blockGridEditorName, propertyEditorWidth);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.enterEditorWidth('');
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesMaxPropertyContainWidthForBlockEditor(blockGridEditorName, propertyEditorWidth)).toBeFalsy();
+  expect(await umbracoApi.dataType.doesMaxPropertyContainWidthForBlockEditor(blockGridEditorName, '')).toBeTruthy();
+});
+
+test('can add a create button label in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const createButtonLabel = 'Create Block';
+  await umbracoApi.dataType.createEmptyBlockGrid(blockGridEditorName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.enterCreateButtonLabel(createButtonLabel);
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockGridContainCreateButtonLabel(blockGridEditorName, createButtonLabel)).toBeTruthy();
+});
+
+test('can remove a create button label in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const createButtonLabel = 'Create Block';
+  await umbracoApi.dataType.createBlockGridWithCreateButtonLabel(blockGridEditorName, createButtonLabel);
+  expect(await umbracoApi.dataType.doesBlockGridContainCreateButtonLabel(blockGridEditorName, createButtonLabel)).toBeTruthy();
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.enterCreateButtonLabel('');
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockGridContainCreateButtonLabel(blockGridEditorName, createButtonLabel)).toBeFalsy();
+  expect(await umbracoApi.dataType.doesBlockGridContainCreateButtonLabel(blockGridEditorName, '')).toBeTruthy();
+});
+
+test('can update grid columns in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+  // Arrange
+  const gridColumns = 3;
+  await umbracoApi.dataType.createEmptyBlockGrid(blockGridEditorName);
+
+  // Act
+  await umbracoUi.dataType.goToDataType(blockGridEditorName);
+  await umbracoUi.dataType.enterGridColumns(gridColumns);
+  await umbracoUi.dataType.clickSaveButton();
+
+  // Assert
+  await umbracoUi.dataType.isSuccessNotificationVisible();
+  expect(await umbracoApi.dataType.doesBlockGridContainGridColumns(blockGridEditorName, gridColumns)).toBeTruthy();
+});
+
+// TODO: wait until fixed by frontend, currently you are able to insert multiple stylesheets
+test.skip('can add a stylesheet a block grid editor', async ({umbracoApi, umbracoUi}) => {
+});
+
+test.skip('can remove a stylesheet in a block grid editor', async ({umbracoApi, umbracoUi}) => {
+});