plone · SaraBianchi · Sep 27, 2024 · Sep 27, 2024
diff --git a/packages/volto-slate/src/blocks/Text/keyboard/cancelEsc.js b/packages/volto-slate/src/blocks/Text/keyboard/cancelEsc.js
@@ -1,7 +1,17 @@
 export const cancelEsc = ({ editor, event }) => {
-  // TODO: this doesn't work, escape canceling doesn't work.
+  const props = editor.getBlockProps();
+  const { onSelectBlock, onSelectWrapper, id, blockNode } = props;
+
   event.stopPropagation();
   event.nativeEvent.stopImmediatePropagation();
   event.preventDefault();
-  return true;
+
+  onSelectWrapper(blockNode.current.parentNode, id);
+  // onSelectBlock(id, true, event); // selection with active buttons doesn't work
+
+  /* 1. the first focus should go on the outer wrapper
+     2. with the tab key you have the possibility to rotate the various buttons,
+     3. at the fourth tab you have the focus again on the wrapper,
+     4. to enter the slate input field press Enter
+     5. otherwise you move with the arrows keys */
 };
diff --git a/packages/volto-slate/src/blocks/Text/keyboard/traverseBlocks.js b/packages/volto-slate/src/blocks/Text/keyboard/traverseBlocks.js
@@ -76,6 +76,6 @@ export function goDown({ editor, event }) {
 export function traverseBlocks(opts) {
   const { event } = opts;
   event.preventDefault();
-  // return event.shiftKey ? goUp(opts) : goDown(opts);
-  return true;
+  //return event.shiftKey ? goUp(opts) : goDown(opts);
+  return false;
 }
diff --git a/packages/volto/locales/ca/LC_MESSAGES/volto.po b/packages/volto/locales/ca/LC_MESSAGES/volto.po
@@ -4492,6 +4492,11 @@ msgstr "La vostra sol·licitud de restabliment de la contrasenya s'ha enviat per
 msgid "draft"
 msgstr "Esborrany"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/de/LC_MESSAGES/volto.po b/packages/volto/locales/de/LC_MESSAGES/volto.po
@@ -4491,6 +4491,11 @@ msgstr "Der Link, um das Passwort neu zu setzen, wurde Ihnen zugesendet. Die E-M
 msgid "draft"
 msgstr "Entwurf"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr "Drag & Drop-Block"
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/en/LC_MESSAGES/volto.po b/packages/volto/locales/en/LC_MESSAGES/volto.po
@@ -4486,6 +4486,11 @@ msgstr ""
 msgid "draft"
 msgstr ""
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/es/LC_MESSAGES/volto.po b/packages/volto/locales/es/LC_MESSAGES/volto.po
@@ -4493,6 +4493,11 @@ msgstr "Se han enviado las instrucciones para restablecer su contraseña. Deben
 msgid "draft"
 msgstr "Borrador"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/eu/LC_MESSAGES/volto.po b/packages/volto/locales/eu/LC_MESSAGES/volto.po
@@ -4493,6 +4493,11 @@ msgstr "Pasahitza berrezartzeko eskaera e-postaz bidali dizugu. Momentu batetik
 msgid "draft"
 msgstr "Zirriborroa"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/fi/LC_MESSAGES/volto.po b/packages/volto/locales/fi/LC_MESSAGES/volto.po
@@ -4491,6 +4491,11 @@ msgstr "Lähetimme sinulle sähköpostilla ohjeet salasanan vaihtamiseksi. Sen p
 msgid "draft"
 msgstr "luonnos"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/fr/LC_MESSAGES/volto.po b/packages/volto/locales/fr/LC_MESSAGES/volto.po
@@ -4493,6 +4493,11 @@ msgstr "Mot de passe envoyé"
 msgid "draft"
 msgstr "Brouillon"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr "glisser-déposer le bloc"
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/hi/LC_MESSAGES/volto.po b/packages/volto/locales/hi/LC_MESSAGES/volto.po
@@ -4486,6 +4486,11 @@ msgstr "आपका पासवर्ड रीसेट अनुरोध
 msgid "draft"
 msgstr "ड्राफ़्ट"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/it/LC_MESSAGES/volto.po b/packages/volto/locales/it/LC_MESSAGES/volto.po
@@ -4486,6 +4486,11 @@ msgstr "La istruzioni per reimpostare la tua password sono state inviate. Dovreb
 msgid "draft"
 msgstr "Bozza"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr "blocco drag and drop"
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/ja/LC_MESSAGES/volto.po b/packages/volto/locales/ja/LC_MESSAGES/volto.po
@@ -4491,6 +4491,11 @@ msgstr "パスワード再設定のお願いをメール送信しました。ま
 msgid "draft"
 msgstr "下書き(draft)"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/nl/LC_MESSAGES/volto.po b/packages/volto/locales/nl/LC_MESSAGES/volto.po
@@ -4490,6 +4490,11 @@ msgstr ""
 msgid "draft"
 msgstr ""
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/pt/LC_MESSAGES/volto.po b/packages/volto/locales/pt/LC_MESSAGES/volto.po
@@ -4491,6 +4491,11 @@ msgstr "descrição_senha_enviada"
 msgid "draft"
 msgstr ""
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/pt_BR/LC_MESSAGES/volto.po b/packages/volto/locales/pt_BR/LC_MESSAGES/volto.po
@@ -4492,6 +4492,11 @@ msgstr "Sua solicitação de redefinição de senha foi enviada. Ela deve chegar
 msgid "draft"
 msgstr "Rascunho"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/ro/LC_MESSAGES/volto.po b/packages/volto/locales/ro/LC_MESSAGES/volto.po
@@ -4486,6 +4486,11 @@ msgstr "Parola este în curs de schimbare. Urmați instrucțiunile primite pe ad
 msgid "draft"
 msgstr "proiect"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/volto.pot b/packages/volto/locales/volto.pot
@@ -1,7 +1,7 @@
 msgid ""
 msgstr ""
 "Project-Id-Version: Plone\n"
-"POT-Creation-Date: 2024-08-10T17:00:27.117Z\n"
+"POT-Creation-Date: 2024-09-26T19:13:52.821Z\n"
 "Last-Translator: Plone i18n <[email protected]>\n"
 "Language-Team: Plone i18n <[email protected]>\n"
 "Content-Type: text/plain; charset=utf-8\n"
@@ -4488,6 +4488,11 @@ msgstr ""
 msgid "draft"
 msgstr ""
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/locales/zh_CN/LC_MESSAGES/volto.po b/packages/volto/locales/zh_CN/LC_MESSAGES/volto.po
@@ -4492,6 +4492,11 @@ msgstr "您的密码重置请求邮件已发送。稍后它将到达您的邮箱
 msgid "draft"
 msgstr "草案"
 
+#. Default: "drag and drop block"
+#: components/manage/Blocks/Block/EditBlockWrapper
+msgid "drag and drop block"
+msgstr ""
+
 #. Default: "Input must be valid email ([email protected])"
 #: helpers/MessageLabels/MessageLabels
 msgid "email"

diff --git a/packages/volto/news/6344.bugfix b/packages/volto/news/6344.bugfix
@@ -0,0 +1 @@
+fixed actions button around wrapper text input and tried to add focus on wrapper @SaraBianchi @Wagner3UB
diff --git a/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx b/packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx
@@ -250,6 +250,10 @@ const BlocksForm = (props) => {
     </EditBlockWrapper>
   );
 
+  const onSelectWrapper = (blockNode, blockIndex) => {
+    return blockNode.focus();
+  };
+
   const editBlockWrapper = children || defaultBlockWrapper;
 
   // Remove invalid blocks on saving
@@ -340,6 +344,7 @@ const BlocksForm = (props) => {
                 onMoveBlock,
                 onMutateBlock,
                 onSelectBlock,
+                onSelectWrapper,
                 pathname,
                 metadata,
                 properties,

diff --git a/packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx b/packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx
@@ -23,6 +23,10 @@ const messages = defineMessages({
     id: 'delete',
     defaultMessage: 'delete',
   },
+  dragAndDrop: {
+    id: 'drag and drop block',
+    defaultMessage: 'drag and drop block',
+  },
 });
 
 const EditBlockWrapper = (props) => {
@@ -82,18 +86,23 @@ const EditBlockWrapper = (props) => {
       })}
     >
       <div style={{ position: 'relative' }}>
-        <div
-          style={{
-            visibility: visible ? 'visible' : 'hidden',
-            display: 'inline-block',
-          }}
-          {...draginfo.dragHandleProps}
-          className="drag handle wrapper"
-        >
-          <Icon name={dragSVG} size="18px" />
-        </div>
         <div className={`ui drag block inner ${type}`}>
-          {children}
+          {/* Drag&Drop button */}
+          <Button
+            icon
+            basic
+            style={{
+              visibility: visible ? 'visible' : 'hidden',
+              display: 'inline-block',
+            }}
+            {...draginfo.dragHandleProps}
+            className="drag handle wrapper"
+            aria-label={intl.formatMessage(messages.dragAndDrop)}
+          >
+            <Icon name={dragSVG} size="18px" />
+          </Button>
+
+          {/* Delete button */}
           {selected && !required && editable && (
             <Button
               icon
@@ -105,6 +114,8 @@ const EditBlockWrapper = (props) => {
               <Icon name={trashSVG} size="18px" />
             </Button>
           )}
+
+          {/* Add button */}
           {config.experimental.addBlockButton.enabled && showBlockChooser && (
             <BlockChooserButton
               data={data}
@@ -140,6 +151,12 @@ const EditBlockWrapper = (props) => {
               contentType={contentType}
             />
           )}
+
+          {/* Blocks */}
+          {/* eslint-disable-next-line */}
+          <div role="region" className="block-wrapper" tabIndex="0">
+            {children}
+          </div>
         </div>
       </div>
     </div>