Does not show borders in addon block inputs (#5898)

plone · Apr 1, 2024 · 13d5d60 · 13d5d60
1 parent c256e4e
commit 13d5d60
Show file tree

Hide file tree

Showing 6 changed files with 65 additions and 7 deletions.
diff --git a/packages/volto/cypress/tests/core/blocks/blocks-image.js b/packages/volto/cypress/tests/core/blocks/blocks-image.js
@@ -31,6 +31,10 @@ describe('Blocks Tests', () => {
     cy.getSlate().click();
     cy.get('.ui.basic.icon.button.block-add-button').click();
     cy.get('.ui.basic.icon.button.image').contains('Image').click();
+    cy.get('.block-editor-image [tabindex="0"]')
+      .last()
+      .focus()
+      .should('have.css', 'outline', 'rgb(16, 16, 16) auto 1px');
     cy.get('.block.image .ui.input input[type="text"]').type(
       `https://github.com/plone/volto/raw/main/logos/volto-colorful.png{enter}`,
     );

diff --git a/packages/volto/cypress/tests/core/blocks/blocks-slate.js b/packages/volto/cypress/tests/core/blocks/blocks-slate.js
@@ -0,0 +1,25 @@
+describe('Slate Block Tests', () => {
+  beforeEach(() => {
+    cy.intercept('GET', `/**/*?expand*`).as('content');
+    cy.intercept('GET', '/**/Document').as('schema');
+
+    // given a logged in editor and a page in edit mode
+    cy.autologin();
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'my-page',
+      contentTitle: 'My Page',
+    });
+    cy.visit('/my-page');
+    cy.wait('@content');
+
+    cy.navigate('/my-page/edit');
+    cy.wait('@schema');
+  });
+
+  it('No border in input', () => {
+    cy.get('.block-editor-slate [role=textbox]')
+      .click()
+      .should('have.css', 'outline', 'rgba(0, 0, 0, 0.87) none 0px');
+  });
+});
diff --git a/packages/volto/cypress/tests/core/blocks/blocks-table.js b/packages/volto/cypress/tests/core/blocks/blocks-table.js
@@ -23,6 +23,14 @@ describe('Table Block Tests', () => {
     // Edit
     cy.addNewBlock('table');
     cy.wait(2000);
+
+    // No border in input
+    cy.get('.block-editor-slateTable [role=textbox]').should('be.visible');
+    cy.get('.block-editor-slateTable [role=textbox]')
+      .first()
+      .click()
+      .should('have.css', 'outline', 'rgb(135, 143, 147) none 0px');
+
     cy.get(
       '.celled.fixed.table thead tr th:first-child() [contenteditable="true"]',
     )

diff --git a/packages/volto/cypress/tests/core/blocks/blocks-title.js b/packages/volto/cypress/tests/core/blocks/blocks-title.js
@@ -0,0 +1,25 @@
+describe('Title Block Tests', () => {
+  beforeEach(() => {
+    cy.intercept('GET', `/**/*?expand*`).as('content');
+    cy.intercept('GET', '/**/Document').as('schema');
+
+    // given a logged in editor and a page in edit mode
+    cy.autologin();
+    cy.createContent({
+      contentType: 'Document',
+      contentId: 'my-page',
+      contentTitle: 'My Page',
+    });
+    cy.visit('/my-page');
+    cy.wait('@content');
+
+    cy.navigate('/my-page/edit');
+    cy.wait('@schema');
+  });
+
+  it('No border in input', () => {
+    cy.get('.block-editor-title [role=textbox]')
+      .click()
+      .should('have.css', 'outline', 'rgba(0, 0, 0, 0.87) none 0px');
+  });
+});
diff --git a/packages/volto/news/5894.bugfix b/packages/volto/news/5894.bugfix
@@ -0,0 +1 @@
+Does not show borders in addon block inputs. @wesleybl
diff --git a/packages/volto/theme/themes/pastanaga/extras/blocks.less b/packages/volto/theme/themes/pastanaga/extras/blocks.less
@@ -42,13 +42,8 @@
   border-color: rgba(120, 192, 215, 0.75);
 }
 
-.block-editor-title,
-.block-editor-slate,
-.block-editor-slateTable,
-.slate-editor.selected {
-  :focus-visible {
-    outline: none;
-  }
+[data-slate-editor='true'] {
+  outline: none;
 }
 
 .block .block:hover::before {
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Does not show borders in addon block inputs. @wesleybl