From 18b721fa5a96f1e65f44c2ca0a68b021dad7be3f Mon Sep 17 00:00:00 2001
From: Giulia Ghisini <giulia.ghisini@redturtle.it>
Date: Mon, 20 Nov 2023 14:10:05 +0100
Subject: [PATCH] fix: create new blockss

---
 src/components/Image/Image.jsx                | 168 +++++++++---------
 .../Blocks/Accordion/Block/EditBlock.jsx      |   6 +-
 .../ItaliaTheme/Blocks/Accordion/Edit.jsx     |  39 +++-
 .../ItaliaTheme/Blocks/Alert/Edit.jsx         | 165 +++++++----------
 .../Blocks/ArgumentsInEvidence/Edit.jsx       |  39 +++-
 .../ItaliaTheme/Blocks/CTABlock/Block.jsx     |  36 ++--
 .../ItaliaTheme/Blocks/Callout/Edit.jsx       |  47 ++---
 .../Blocks/ContactsBlock/Block/EditBlock.jsx  |  12 +-
 .../ItaliaTheme/Blocks/ContactsBlock/Edit.jsx |  50 +++++-
 .../ItaliaTheme/Blocks/CountDown/Edit.jsx     |  31 +---
 .../Blocks/IconBlocks/Block/EditBlock.jsx     |   8 +-
 .../ItaliaTheme/Blocks/IconBlocks/Edit.jsx    |  34 +++-
 .../Blocks/NumbersBlock/Block/EditBlock.jsx   |   8 +-
 .../ItaliaTheme/Blocks/NumbersBlock/Edit.jsx  |  30 +++-
 .../Blocks/TextCard/CardWithImage/Block.jsx   |  47 ++---
 .../Blocks/TextCard/CardWithImage/Edit.jsx    |   2 +-
 .../TextCard/SimpleCard/BodyWrapper.jsx       |   1 +
 .../Blocks/TextCard/SimpleCard/Edit.jsx       |  54 +++---
 .../manage/Widgets/SimpleTextEditorWidget.jsx |  18 +-
 .../manage/Widgets/TextEditorWidget.jsx       |  11 +-
 src/config/Slate/handlers.js                  |  46 +++--
 src/config/italiaConfig.js                    |   1 +
 .../manage/Blocks/HeroImageLeft/Edit.jsx      |  39 +++-
 src/helpers/blocks.js                         |  81 ++++++++-
 src/theme/ItaliaTheme/_main.scss              |   4 +-
 src/theme/_cms-ui.scss                        |   2 +-
 26 files changed, 580 insertions(+), 399 deletions(-)

diff --git a/src/components/Image/Image.jsx b/src/components/Image/Image.jsx
index 4e62c5f65..c49faa9c6 100644
--- a/src/components/Image/Image.jsx
+++ b/src/components/Image/Image.jsx
@@ -38,90 +38,91 @@ const Image = ({
   sizes = '100vw',
   ...imageProps
 }) => {
-  const { src, srcSet, width, height, aspectRatio } = getImageAttributes(
-    image,
-    {
-      itemUrl,
-      imageField,
-      maxSize,
-      useOriginal,
-      minSize,
-    },
-  );
-  const imageRef = useRef();
-  const [actualSrcSet, setActualSrcSet] = useState(
-    critical && srcSet ? srcSet.join(', ') : null,
-  );
-  // TODO: serve a qualcuno questo?
-  const imageHasLoaded = imageRef?.current?.complete;
+  if (image) {
+    const { src, srcSet, width, height, aspectRatio } = getImageAttributes(
+      image,
+      {
+        itemUrl,
+        imageField,
+        maxSize,
+        useOriginal,
+        minSize,
+      },
+    );
+    const imageRef = useRef();
+    const [actualSrcSet, setActualSrcSet] = useState(
+      critical && srcSet ? srcSet.join(', ') : null,
+    );
+    // TODO: serve a qualcuno questo?
+    const imageHasLoaded = imageRef?.current?.complete;
 
-  //picture classname
-  let pictureClassName = `volto-image${
-    containerClassName ? ` ${containerClassName}` : ''
-  }`;
-  if (floated) {
-    pictureClassName = `${pictureClassName} floated ${floated}`;
-  }
-  if (size) {
-    pictureClassName = `${pictureClassName} ${size}`;
-  }
+    //picture classname
+    let pictureClassName = `volto-image${
+      containerClassName ? ` ${containerClassName}` : ''
+    }`;
+    if (floated) {
+      pictureClassName = `${pictureClassName} floated ${floated}`;
+    }
+    if (size) {
+      pictureClassName = `${pictureClassName} ${size}`;
+    }
 
-  if (responsive) {
-    pictureClassName = `${pictureClassName} responsive`;
-  }
+    if (responsive) {
+      pictureClassName = `${pictureClassName} responsive`;
+    }
 
-  //intersection observer
-  useEffect(() => {
-    const applySrcSet = () => {
-      setActualSrcSet(srcSet.join(', '));
-    };
+    //intersection observer
+    useEffect(() => {
+      const applySrcSet = () => {
+        setActualSrcSet(srcSet.join(', '));
+      };
 
-    if (srcSet && !critical) {
-      if ('IntersectionObserver' in window) {
-        const observer = new IntersectionObserver(
-          (entries) => {
-            entries.forEach((entry) => {
-              if (entry.isIntersecting && !actualSrcSet) {
-                applySrcSet();
-                if (imageRef.current instanceof Element) {
-                  observer.unobserve(imageRef.current);
+      if (srcSet && !critical) {
+        if ('IntersectionObserver' in window) {
+          const observer = new IntersectionObserver(
+            (entries) => {
+              entries.forEach((entry) => {
+                if (entry.isIntersecting && !actualSrcSet) {
+                  applySrcSet();
+                  if (imageRef.current instanceof Element) {
+                    observer.unobserve(imageRef.current);
+                  }
                 }
-              }
-            });
-          },
-          { threshold: [0], rootMargin: '100px' },
-        );
-        observer.observe(imageRef.current);
-      } else {
-        applySrcSet();
+              });
+            },
+            { threshold: [0], rootMargin: '100px' },
+          );
+          observer.observe(imageRef.current);
+        } else {
+          applySrcSet();
+        }
       }
-    }
-  }, [imageHasLoaded, srcSet, actualSrcSet, critical]);
+    }, [imageHasLoaded, srcSet, actualSrcSet, critical]);
 
-  return (
-    <>
-      <picture className={pictureClassName}>
-        {actualSrcSet?.length > 0 && (
-          <source srcSet={actualSrcSet} sizes={sizes} />
-        )}
-        <img
-          src={src}
-          alt={alt}
-          className={className}
-          role={role}
-          // removed because this is for the placeholder. Lazy loading is made using intersectionObserver
-          // loading={critical ? 'eager' : 'lazy'}
-          width={width}
-          height={height}
-          style={aspectRatio ? { aspectRatio } : null}
-          {...imageProps}
-          ref={imageRef}
-        />
-      </picture>
-      {!critical && (
-        <noscript
-          dangerouslySetInnerHTML={{
-            __html: `
+    return (
+      <>
+        <picture className={pictureClassName}>
+          {actualSrcSet?.length > 0 && (
+            <source srcSet={actualSrcSet} sizes={sizes} />
+          )}
+          <img
+            src={src}
+            alt={alt}
+            className={className}
+            role={role}
+            // removed because this is for the placeholder. Lazy loading is made using intersectionObserver
+            // loading={critical ? 'eager' : 'lazy'}
+            width={width}
+            height={height}
+            style={aspectRatio ? { aspectRatio } : null}
+            {...imageProps}
+            ref={imageRef}
+          />
+        </picture>
+        {!critical && (
+          <noscript
+            dangerouslySetInnerHTML={{
+              __html: `
               <img
                 src="${src}"
                 ${srcSet?.length && `srcset="${srcSet.join(', ')}"`}
@@ -132,11 +133,14 @@ const Image = ({
                 ${height ? `height="${height}` : ''}
                 loading="lazy"
             `,
-          }}
-        />
-      )}
-    </>
-  );
+            }}
+          />
+        )}
+      </>
+    );
+  } else {
+    return <></>;
+  }
 };
 
 Image.propTypes = {
diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx
index 22be2767b..5d92bc016 100644
--- a/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx
+++ b/src/components/ItaliaTheme/Blocks/Accordion/Block/EditBlock.jsx
@@ -99,9 +99,9 @@ class EditBlock extends SubblockEdit {
                   messages.titlePlaceholder,
                 )}
                 selected={this.props.selected && this.state.focusOn === 'title'}
-                setSelected={() => {
+                setSelected={(f) => {
                   this.setState({
-                    focusOn: 'title',
+                    focusOn: f,
                   });
                 }}
                 focusNextField={() => {
@@ -139,7 +139,7 @@ class EditBlock extends SubblockEdit {
                   onChangeBlock={(block, _data) => {
                     this.onChange(_data);
                   }}
-                  setSelected={() => this.setState({ focusOn: 'text' })}
+                  setSelected={(f) => this.setState({ focusOn: f })}
                   focusNextField={
                     !this.props.isLast
                       ? () => {
diff --git a/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx b/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx
index 5534dcf7b..e56c00f6f 100644
--- a/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/Accordion/Edit.jsx
@@ -14,6 +14,7 @@ import {
 } from 'volto-subblocks';
 
 import { SidebarPortal } from '@plone/volto/components';
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import Sidebar from './Sidebar.jsx';
 
 import { defineMessages } from 'react-intl';
@@ -39,6 +40,42 @@ class Edit extends SubblocksEdit {
       this.onSubblockChangeFocus(-1);
     }
   }
+
+  handleEnter = (e) => {
+    if (this.props.selected && this.state.subIndexSelected < 0) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
+  componentDidMount() {
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (this.state.subblocks.length === 0) {
+      this.addSubblock();
+    }
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    const blockNode = this.props.blockNode;
+    if (blockNode && blockNode.current) {
+      blockNode.current.removeEventListener('keydown', this.handleEnter, false);
+    }
+  }
   /**
    * Render method.
    * @method render
@@ -49,7 +86,7 @@ class Edit extends SubblocksEdit {
       return <div />;
     }
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1">
         <div className="full-width section section-muted section-inset-shadow py-5 is-edit-mode">
           <Container className="px-md-4">
             <Card className="card-bg rounded" noWrapper={false} space tag="div">
diff --git a/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx b/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx
index ba8e71606..c793c79d3 100644
--- a/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/Alert/Edit.jsx
@@ -3,18 +3,14 @@
  * @module components/manage/Blocks/Image/Edit
  */
 
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { connect } from 'react-redux';
-import { compose } from 'redux';
+import React, { useEffect } from 'react';
 
 import cx from 'classnames';
 import { Container, Row, Col } from 'design-react-kit';
 
-import { createContent } from '@plone/volto/actions';
 import { SidebarPortal } from '@plone/volto/components';
-import { defineMessages, injectIntl } from 'react-intl';
-
+import { defineMessages, useIntl } from 'react-intl';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   AlertSidebar,
   TextEditorWidget,
@@ -26,108 +22,67 @@ const messages = defineMessages({
     defaultMessage: 'Digita il testo…',
   },
 });
-/**
- * Edit Alert block class.
- * @class Edit
- * @extends Component
- */
-class Edit extends Component {
-  /**
-   * Property types.
-   * @property {Object} propTypes Property types.
-   * @static
-   */
-  static propTypes = {
-    selected: PropTypes.bool.isRequired,
-    block: PropTypes.string.isRequired,
-    index: PropTypes.number.isRequired,
-    data: PropTypes.objectOf(PropTypes.any).isRequired,
-    content: PropTypes.objectOf(PropTypes.any).isRequired,
-    request: PropTypes.shape({
-      loading: PropTypes.bool,
-      loaded: PropTypes.bool,
-    }).isRequired,
-    pathname: PropTypes.string.isRequired,
-    onChangeBlock: PropTypes.func.isRequired,
-    onSelectBlock: PropTypes.func.isRequired,
-    onDeleteBlock: PropTypes.func.isRequired,
-    onFocusPreviousBlock: PropTypes.func.isRequired,
-    onFocusNextBlock: PropTypes.func.isRequired,
-    handleKeyDown: PropTypes.func.isRequired,
-    createContent: PropTypes.func.isRequired,
-  };
 
-  constructor(props) {
-    super(props);
-    if (!this.props.data.bg_color) {
-      this.props.data.bg_color = 'warning';
-    }
-    this.blockNode = React.createRef();
-  }
+const Edit = (props) => {
+  const { data, onChangeBlock, block, selected } = props;
+  const intl = useIntl();
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'text',
+  );
 
-  render() {
-    if (__SERVER__) {
-      return <div />;
+  useEffect(() => {
+    if (!data.bg_color) {
+      onChangeBlock(block, {
+        ...data,
+        bg_color: 'warning',
+      });
     }
-    return (
-      <div className="public-ui">
-        <div
-          className={cx('alertblock', {
-            selected: this.props.selected,
-          })}
-        >
-          <Row
-            className={cx(
-              'full-width p-5',
-              'bg-alert-' + this.props.data.bg_color,
-            )}
-          >
-            <Container className="ui">
-              <Row className="align-items-start">
-                {this.props.data.image?.data && (
-                  <Col sm={2} className="pb-3 image-col">
-                    <img
-                      src={`data:${this.props.data.image['content-type']};${this.props.data.image.encoding},${this.props.data.image.data}`}
-                      alt=""
-                      className={cx('left-image', [
-                        this.props.data.sizeImage
-                          ? 'size-' + this.props.data.sizeImage
-                          : 'size-l',
-                      ])}
-                    />
-                  </Col>
-                )}
-                <Col>
-                  <TextEditorWidget
-                    {...this.props}
-                    data={this.props.data}
-                    fieldName="text"
-                    selected={this.props.selected}
-                    placeholder={this.props.intl.formatMessage(
-                      messages.content_placeholder,
-                    )}
-                    showToolbar={true}
+  }, []);
+
+  return __SERVER__ ? (
+    <div />
+  ) : (
+    <div className="public-ui" tabIndex="-1">
+      <div
+        className={cx('alertblock', {
+          selected: selected,
+        })}
+      >
+        <Row className={cx('full-width p-5', 'bg-alert-' + data.bg_color)}>
+          <Container className="ui">
+            <Row className="align-items-start">
+              {data.image?.data && (
+                <Col sm={2} className="pb-3 image-col">
+                  <img
+                    src={`data:${data.image['content-type']};${data.image.encoding},${data.image.data}`}
+                    alt=""
+                    className={cx('left-image', [
+                      data.sizeImage ? 'size-' + data.sizeImage : 'size-l',
+                    ])}
                   />
                 </Col>
-              </Row>
-            </Container>
-          </Row>
-        </div>
-        <SidebarPortal selected={this.props.selected}>
-          <AlertSidebar {...this.props} />
-        </SidebarPortal>
+              )}
+              <Col>
+                <TextEditorWidget
+                  {...props}
+                  data={data}
+                  fieldName="text"
+                  selected={selectedField === 'text'}
+                  setSelected={setSelectedField}
+                  placeholder={intl.formatMessage(messages.content_placeholder)}
+                  showToolbar={true}
+                />
+              </Col>
+            </Row>
+          </Container>
+        </Row>
       </div>
-    );
-  }
-}
+      <SidebarPortal selected={selected}>
+        <AlertSidebar {...props} />
+      </SidebarPortal>
+    </div>
+  );
+};
 
-export default compose(
-  injectIntl,
-  connect(
-    (state) => ({
-      request: state.content.create,
-      content: state.content.data,
-    }),
-    { createContent },
-  ),
-)(Edit);
+export default Edit;
diff --git a/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Edit.jsx b/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Edit.jsx
index a2051d805..b624ba829 100644
--- a/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Edit.jsx
@@ -11,11 +11,48 @@ import {
 import { SidebarPortal } from '@plone/volto/components';
 import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Sidebar.jsx';
 import { ArgumentsInEvidenceBackground } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 
 class Edit extends SubblocksEdit {
+  handleEnter = (e) => {
+    if (this.props.selected) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
+  componentDidMount() {
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (this.state.subblocks.length === 0) {
+      this.addSubblock();
+    }
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    const blockNode = this.props.blockNode;
+    if (blockNode && blockNode.current) {
+      blockNode.current.removeEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
   render() {
     return (
-      <div className="argumentInEvidence public-ui">
+      <div className="argumentInEvidence public-ui" tabIndex="-1">
         <ArgumentsInEvidenceBackground inEditMode={true} />
         <SubblocksWrapper node={this.node}>
           <BodyWrapper data={this.props.data} inEditMode={false}>
diff --git a/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx b/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx
index 581bbcf81..cff2ed060 100644
--- a/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx
+++ b/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx
@@ -9,6 +9,8 @@ import PropTypes from 'prop-types';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import { UniversalLink } from '@plone/volto/components';
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
+
 import cx from 'classnames';
 
 const messages = defineMessages({
@@ -26,28 +28,18 @@ const messages = defineMessages({
   },
 });
 
-const Block = ({ data, block, inEditMode, selected, ...otherProps }) => {
+const Block = (props) => {
+  const { data, block, inEditMode, selected, ...otherProps } = props;
   const intl = useIntl();
   const title = data?.cta_title;
   const hasImage = data?.showImage && data?.ctaImage?.length > 0;
   const content = data?.cta_content;
   const showFullwidth = data?.showFullWidth;
 
-  const [selectedField, setSelectedField] = useState('title');
-
-  useEffect(() => {
-    if (selected) {
-      setSelectedField('title');
-    } else {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
-  useEffect(() => {
-    if (!selected && selectedField && otherProps?.onSelectBlock) {
-      otherProps.onSelectBlock(block);
-    }
-  }, [selectedField]);
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'cta_title',
+  );
 
   return (
     <div
@@ -81,12 +73,12 @@ const Block = ({ data, block, inEditMode, selected, ...otherProps }) => {
                 showToolbar={false}
                 data={data}
                 fieldName="cta_title"
-                selected={selectedField === 'title'}
-                setSelected={() => setSelectedField('title')}
+                selected={selectedField === 'cta_title'}
+                setSelected={setSelectedField}
                 block={block}
                 placeholder={intl.formatMessage(messages.cta_title)}
                 focusNextField={() => {
-                  setSelectedField('content');
+                  setSelectedField('cta_content');
                 }}
               />
             ) : (
@@ -101,11 +93,11 @@ const Block = ({ data, block, inEditMode, selected, ...otherProps }) => {
               data={data}
               fieldName="cta_content"
               block={block}
-              selected={selectedField === 'content'}
+              selected={selectedField === 'cta_content'}
               placeholder={intl.formatMessage(messages.cta_content)}
-              setSelected={() => setSelectedField('content')}
+              setSelected={setSelectedField}
               focusPrevField={() => {
-                setSelectedField('title');
+                setSelectedField('cta_title');
               }}
             />
           ) : (
diff --git a/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx b/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx
index 0f066d9a0..e881d7e4e 100644
--- a/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/Callout/Edit.jsx
@@ -3,7 +3,7 @@
  * @module components/ItaliaTheme/Blocks/Callout/Edit
  */
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { SidebarPortal } from '@plone/volto/components';
@@ -12,6 +12,7 @@ import { Callout, CalloutTitle, CalloutText } from 'design-react-kit';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import Sidebar from './Sidebar.jsx';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
 
 const messages = defineMessages({
   title: {
@@ -28,35 +29,25 @@ const messages = defineMessages({
  * @class Edit
  * @extends Component
  */
-const Edit = ({
-  data,
-  onChangeBlock,
-  block,
-  onSelectBlock,
-  selected,
-  ...otherProps
-}) => {
+const Edit = (props) => {
+  const {
+    data,
+    onChangeBlock,
+    block,
+    onSelectBlock,
+    selected,
+    ...otherProps
+  } = props;
   const intl = useIntl();
-  const [selectedField, setSelectedField] = useState('title');
-
-  useEffect(() => {
-    if (selected && !selectedField) {
-      setSelectedField('title');
-    } else if (!selected) {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
-  useEffect(() => {
-    if (!selected && selectedField) {
-      onSelectBlock(block);
-    }
-  }, [selectedField]);
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'title',
+  );
 
   return __SERVER__ ? (
     <div />
   ) : (
-    <div className="public-ui" id={block}>
+    <div className="public-ui" id={block} tabIndex="-1" role="textbox">
       <Callout
         highlight={data.style === 'highlight'}
         color={data.color?.replace('callout_', '')}
@@ -73,9 +64,7 @@ const Edit = ({
             onChangeBlock={onChangeBlock}
             selected={selectedField === 'title'}
             placeholder={intl.formatMessage(messages.title)}
-            setSelected={() => {
-              setSelectedField('title');
-            }}
+            setSelected={setSelectedField}
             focusNextField={() => {
               setSelectedField('text');
             }}
@@ -92,7 +81,7 @@ const Edit = ({
             selected={selectedField === 'text'}
             placeholder={intl.formatMessage(messages.text)}
             onChangeBlock={onChangeBlock}
-            setSelected={() => setSelectedField('text')}
+            setSelected={setSelectedField}
             focusPrevField={() => {
               setSelectedField('title');
             }}
diff --git a/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx
index 276d74135..7bab62f7f 100644
--- a/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx
+++ b/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx
@@ -81,7 +81,7 @@ class EditBlock extends SubblockEdit {
     }
 
     return (
-      <Subblock subblock={this} className="subblock-edit">
+      <Subblock subblock={this} className="subblock-edit" tabIndex="-1">
         <Card
           className="card-bg rounded"
           noWrapper={false}
@@ -106,8 +106,8 @@ class EditBlock extends SubblockEdit {
                   messages.titlePlaceholder,
                 )}
                 selected={this.props.selected && this.state.focusOn === 'title'}
-                setSelected={() => {
-                  this.setState({ focusOn: 'title' });
+                setSelected={(f) => {
+                  this.setState({ focusOn: f });
                 }}
                 focusNextField={() => {
                   this.setState({ focusOn: 'text' });
@@ -135,7 +135,7 @@ class EditBlock extends SubblockEdit {
                   this.onChange({ ...this.props.data, text: _data.value });
                 }}
                 selected={this.props.selected && this.state.focusOn === 'text'}
-                setSelected={() => this.setState({ focusOn: 'text' })}
+                setSelected={(f) => this.setState({ focusOn: f })}
                 focusPrevField={() => {
                   this.setState({ focusOn: 'title' });
                 }}
@@ -162,7 +162,7 @@ class EditBlock extends SubblockEdit {
                 placeholder={this.props.intl.formatMessage(
                   messages.textPlaceholder,
                 )}
-                setSelected={() => this.setState({ focusOn: 'tel' })}
+                setSelected={(f) => this.setState({ focusOn: f })}
                 focusPrevField={() => {
                   this.setState({ focusOn: 'text' });
                 }}
@@ -188,7 +188,7 @@ class EditBlock extends SubblockEdit {
                 placeholder={this.props.intl.formatMessage(
                   messages.textPlaceholder,
                 )}
-                setSelected={() => this.setState({ focusOn: 'email' })}
+                setSelected={(f) => this.setState({ focusOn: f })}
                 focusPrevField={() => {
                   this.setState({ focusOn: 'tel' });
                 }}
diff --git a/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx b/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx
index 5f57254c9..d8fb46e22 100644
--- a/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx
@@ -10,7 +10,7 @@ import { Container, Row, Col } from 'design-react-kit';
 import { SidebarPortal } from '@plone/volto/components';
 import { flattenToAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
-
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   withDNDContext,
   SubblocksEdit,
@@ -49,12 +49,48 @@ class Edit extends SubblocksEdit {
   UNSAFE_componentWillReceiveProps(newProps) {
     if (newProps.selected) {
       if (!this.props.selected) {
-        this.setState({ selectedField: 'title' });
+        this.setState({ selectedField: 'title', subIndexSelected: -1 });
       }
     } else {
       this.setState({ selectedField: null });
     }
   }
+
+  handleEnter = (e) => {
+    if (this.props.selected) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
+  componentDidMount() {
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (this.state.subblocks.length === 0) {
+      this.addSubblock();
+    }
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
+  /**
+   * Component will receive props
+   * @method componentWillUnmount
+   * @returns {undefined}
+   */
+  componentWillUnmount() {
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    const blockNode = this.props.blockNode;
+    if (blockNode && blockNode.current) {
+      blockNode.current.removeEventListener('keydown', this.handleEnter, false);
+    }
+  }
   /**
    * Render method.
    * @method render
@@ -66,7 +102,7 @@ class Edit extends SubblocksEdit {
     }
 
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1">
         <div
           className={`full-width section bg-${
             this.props.data.bg_color ?? 'primary'
@@ -84,8 +120,8 @@ class Edit extends SubblocksEdit {
                   selected={this.state.selectedField === 'title'}
                   placeholder={this.props.intl.formatMessage(messages.title)}
                   onSelectBlock={() => {}}
-                  setSelected={() => {
-                    this.setState({ selectedField: 'title' });
+                  setSelected={(f) => {
+                    this.setState({ selectedField: f, subIndexSelected: -1 });
                   }}
                   focusNextField={() => {
                     this.setState({ selectedField: 'description' });
@@ -104,8 +140,8 @@ class Edit extends SubblocksEdit {
                     messages.description,
                   )}
                   onSelectBlock={() => {}}
-                  setSelected={() => {
-                    this.setState({ selectedField: 'description' });
+                  setSelected={(f) => {
+                    this.setState({ selectedField: f, subIndexSelected: -1 });
                   }}
                   focusPrevField={() => {
                     this.setState({ selectedField: 'title' });
diff --git a/src/components/ItaliaTheme/Blocks/CountDown/Edit.jsx b/src/components/ItaliaTheme/Blocks/CountDown/Edit.jsx
index 578b048f7..cc748f44c 100644
--- a/src/components/ItaliaTheme/Blocks/CountDown/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/CountDown/Edit.jsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { Container, Row, Col } from 'design-react-kit';
@@ -8,6 +8,7 @@ import cx from 'classnames';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import Sidebar from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/CountDown/Sidebar';
 import CountDown from 'design-comuni-plone-theme/components/ItaliaTheme/Blocks/CountDown/CountDown';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
 
 const messages = defineMessages({
   text: {
@@ -19,24 +20,14 @@ const messages = defineMessages({
 const Edit = (props) => {
   const { data, block, selected, ...otherProps } = props;
   const intl = useIntl();
-  const [selectedField, setSelectedField] = useState('text');
-  useEffect(() => {
-    if (selected && !selectedField) {
-      setSelectedField('text');
-    } else if (!selected) {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
-  useEffect(() => {
-    if (!selected && selectedField) {
-      props.onSelectBlock(block);
-    }
-  }, [selectedField]);
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'text',
+  );
 
   return (
     <>
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1">
         <div
           className={cx('block-content', { 'full-width': data.showFullWidth })}
         >
@@ -76,9 +67,7 @@ const Edit = (props) => {
                   selected={selectedField === 'text'}
                   block={block}
                   placeholder={intl.formatMessage(messages.text)}
-                  setSelected={() => {
-                    setSelectedField('text');
-                  }}
+                  setSelected={setSelectedField}
                   focusNextField={() => {
                     setSelectedField('countdown_text');
                   }}
@@ -109,9 +98,7 @@ const Edit = (props) => {
                   fieldName="countdown_text"
                   selected={selectedField === 'countdown_text'}
                   placeholder={intl.formatMessage(messages.text)}
-                  setSelected={() => {
-                    setSelectedField('countdown_text');
-                  }}
+                  setSelected={setSelectedField}
                   focusPrevField={() => {
                     setSelectedField('text');
                   }}
diff --git a/src/components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock.jsx
index ae0852eb7..868f55705 100644
--- a/src/components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock.jsx
+++ b/src/components/ItaliaTheme/Blocks/IconBlocks/Block/EditBlock.jsx
@@ -108,8 +108,8 @@ class EditBlock extends SubblockEdit {
                   selected={
                     this.props.selected && this.state.focusOn === 'title'
                   }
-                  setSelected={() => {
-                    this.setState({ focusOn: 'title' });
+                  setSelected={(f) => {
+                    this.setState({ focusOn: f });
                   }}
                   block={this.props.block}
                   onChangeBlock={(block, _data) => {
@@ -147,8 +147,8 @@ class EditBlock extends SubblockEdit {
                 key="text"
                 fieldName="text"
                 selected={this.props.selected && this.state.focusOn === 'text'}
-                setSelected={() => {
-                  this.setState({ focusOn: 'text' });
+                setSelected={(f) => {
+                  this.setState({ focusOn: f });
                 }}
                 onChangeBlock={(block, _data) => {
                   this.props.onChangeBlock(this.props.index, _data);
diff --git a/src/components/ItaliaTheme/Blocks/IconBlocks/Edit.jsx b/src/components/ItaliaTheme/Blocks/IconBlocks/Edit.jsx
index 39a7c9777..33351b138 100644
--- a/src/components/ItaliaTheme/Blocks/IconBlocks/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/IconBlocks/Edit.jsx
@@ -10,7 +10,7 @@ import { Container, Row, Col } from 'design-react-kit';
 import { SidebarPortal } from '@plone/volto/components';
 import { flattenToAppURL, addAppURL } from '@plone/volto/helpers';
 import { UniversalLink } from '@plone/volto/components';
-
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   withDNDContext,
   SubblocksEdit,
@@ -55,6 +55,28 @@ class Edit extends SubblocksEdit {
       this.setState({ selectedField: null });
     }
   }
+
+  handleEnter = (e) => {
+    if (this.props.selected) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
+  componentDidMount() {
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (this.state.subblocks.length === 0) {
+      this.addSubblock();
+    }
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
   /**
    * Render method.
    * @method render
@@ -66,7 +88,7 @@ class Edit extends SubblocksEdit {
     }
 
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1">
         <div className="full-width section py-5">
           {this.props.data.background?.[0] ? (
             <div
@@ -93,9 +115,9 @@ class Edit extends SubblocksEdit {
                   key={'title'}
                   fieldName="title"
                   selected={this.state.selectedField === 'title'}
-                  setSelected={() => {
+                  setSelected={(f) => {
                     this.setState({
-                      selectedField: 'title',
+                      selectedField: f,
                       subIndexSelected: -1,
                     });
                   }}
@@ -113,9 +135,9 @@ class Edit extends SubblocksEdit {
                   data={this.props.data}
                   fieldName="description"
                   selected={this.state.selectedField === 'description'}
-                  setSelected={() => {
+                  setSelected={(f) => {
                     this.setState({
-                      selectedField: 'description',
+                      selectedField: f,
                       subIndexSelected: -1,
                     });
                   }}
diff --git a/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock.jsx
index cb4393e49..ecd73e5d9 100644
--- a/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock.jsx
+++ b/src/components/ItaliaTheme/Blocks/NumbersBlock/Block/EditBlock.jsx
@@ -77,8 +77,8 @@ class EditBlock extends SubblockEdit {
                 data={this.props.data}
                 fieldName="title"
                 selected={this.props.selected && this.state.focusOn === 'title'}
-                setSelected={() => {
-                  this.setState({ focusOn: 'title' });
+                setSelected={(f) => {
+                  this.setState({ focusOn: f });
                 }}
                 block={this.props.block}
                 onChangeBlock={(block, _data) => {
@@ -115,8 +115,8 @@ class EditBlock extends SubblockEdit {
               key="text"
               fieldName="text"
               selected={this.props.selected && this.state.focusOn === 'text'}
-              setSelected={() => {
-                this.setState({ focusOn: 'text' });
+              setSelected={(f) => {
+                this.setState({ focusOn: f });
               }}
               block={this.props.block}
               onChangeBlock={(block, _data) => {
diff --git a/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx b/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx
index 90596d91f..492730c28 100644
--- a/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/NumbersBlock/Edit.jsx
@@ -10,7 +10,7 @@ import { Container, Row, Col } from 'design-react-kit';
 import { SidebarPortal } from '@plone/volto/components';
 import { addAppURL, flattenToAppURL } from '@plone/volto/helpers';
 import { Icon } from 'design-comuni-plone-theme/components/ItaliaTheme';
-
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   withDNDContext,
   SubblocksEdit,
@@ -59,6 +59,28 @@ class Edit extends SubblocksEdit {
       this.setState({ selectedField: null });
     }
   }
+
+  handleEnter = (e) => {
+    if (this.props.selected) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
+  componentDidMount() {
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+    if (this.state.subblocks.length === 0) {
+      this.addSubblock();
+    }
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
+    }
+  }
+
   /**
    * Render method.
    * @method render
@@ -70,7 +92,7 @@ class Edit extends SubblocksEdit {
     }
 
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1">
         <div className="full-width section py-5">
           {this.props.data?.background?.[0] ? (
             <div
@@ -131,8 +153,8 @@ class Edit extends SubblocksEdit {
                         key={'title'}
                         fieldName="title"
                         selected={this.state.selectedField === 'title'}
-                        setSelected={() => {
-                          this.setState({ selectedField: 'title' });
+                        setSelected={(f) => {
+                          this.setState({ selectedField: f });
                         }}
                         onChangeBlock={this.props.onChangeBlock}
                         placeholder={this.props.intl.formatMessage(
diff --git a/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx b/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx
index 27306fc12..c529eb72d 100644
--- a/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx
+++ b/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Block.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable jsx-a11y/no-static-element-interactions */
 /* eslint-disable jsx-a11y/click-events-have-key-events */
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import {
   Card,
   CardBody,
@@ -12,6 +12,7 @@ import {
 import { defineMessages, useIntl } from 'react-intl';
 import PropTypes from 'prop-types';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
 import { TextBlockView } from '@plone/volto-slate/blocks/Text';
 import cx from 'classnames';
 
@@ -50,35 +51,17 @@ const renderImage = (image, showImage, sizeNatural) =>
     </div>
   ) : null;
 
-const Block = ({
-  data,
-  block,
-  inEditMode,
-  onChange,
-  selected,
-  ...otherProps
-}) => {
+const Block = (props) => {
+  const { data, block, inEditMode, onChange, selected, ...otherProps } = props;
   const intl = useIntl();
   const title = data?.image_card_title;
   const hasImage = data?.showImage;
   const content = data?.image_card_content;
 
-  const [selectedField, setSelectedField] = useState('title');
-
-  useEffect(() => {
-    if (selected && !selectedField) {
-      setSelectedField('title');
-    } else if (!selected) {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
-  useEffect(() => {
-    if (!selected && selectedField && otherProps.onSelectBlock) {
-      otherProps.onSelectBlock(block);
-    }
-  }, [selectedField]);
-
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'image_card_title',
+  );
   return (
     <div className="image-text-card-wrapper">
       <h2 className="mb-4 mt-5" id={block.id + 'title'}>
@@ -89,14 +72,12 @@ const Block = ({
             data={data}
             block={block}
             fieldName="image_card_title"
-            selected={selectedField === 'title'}
+            selected={selectedField === 'image_card_title'}
             onChangeBlock={(block, data) => onChange(data)}
             placeholder={intl.formatMessage(messages.image_card_title)}
-            setSelected={() => {
-              setSelectedField('title');
-            }}
+            setSelected={setSelectedField}
             focusNextField={() => {
-              setSelectedField('content');
+              setSelectedField('image_card_content');
             }}
           />
         ) : (
@@ -139,14 +120,14 @@ const Block = ({
                       data={data}
                       fieldName="image_card_content"
                       block={block}
-                      selected={selectedField === 'content'}
+                      selected={selectedField === 'image_card_content'}
                       onChangeBlock={(block, data) => onChange(data)}
                       placeholder={intl.formatMessage(
                         messages.image_card_content,
                       )}
-                      setSelected={() => setSelectedField('content')}
+                      setSelected={setSelectedField}
                       focusPrevField={() => {
-                        setSelectedField('title');
+                        setSelectedField('image_card_title');
                       }}
                     />
                   </CardText>
diff --git a/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Edit.jsx b/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Edit.jsx
index c607dd620..163ea82a9 100644
--- a/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/TextCard/CardWithImage/Edit.jsx
@@ -89,7 +89,7 @@ class Edit extends Component {
       return <div />;
     }
     return (
-      <div>
+      <div tabIndex="-1">
         <BodyWrapper data={this.state.currentBlockData} inEditMode={true}>
           <Block
             {...this.props}
diff --git a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx
index f5dcbc3e1..c9d785483 100644
--- a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx
+++ b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/BodyWrapper.jsx
@@ -7,6 +7,7 @@ const BodyWrapper = ({ inEditMode, children }) => {
       className={cx('block simple-text-block', {
         'public-ui': inEditMode,
       })}
+      {...(inEditMode ? { tabIndex: '-1' } : {})}
     >
       {children}
     </div>
diff --git a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx
index 6eabc1a98..7caf1d679 100644
--- a/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx
+++ b/src/components/ItaliaTheme/Blocks/TextCard/SimpleCard/Edit.jsx
@@ -3,12 +3,13 @@
  * @module components/Blocks/TitleVM/Edit
  */
 
-import React, { useState, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { defineMessages, useIntl } from 'react-intl';
 import { Card, CardBody, CardTitle, CardText } from 'design-react-kit';
 import { TextEditorWidget } from 'design-comuni-plone-theme/components/ItaliaTheme';
 import BodyWrapper from './BodyWrapper';
+import { useHandleDetachedBlockFocus } from 'design-comuni-plone-theme/helpers/blocks';
 
 const messages = defineMessages({
   simple_card_title: {
@@ -29,30 +30,21 @@ const messages = defineMessages({
  * @class Edit
  * @extends Component
  */
-const Edit = ({
-  data,
-  onChangeBlock,
-  block,
-  onSelectBlock,
-  selected,
-  ...otherProps
-}) => {
+const Edit = (props) => {
+  const {
+    data,
+    onChangeBlock,
+    block,
+    onSelectBlock,
+    selected,
+    ...otherProps
+  } = props;
   const intl = useIntl();
-  const [selectedField, setSelectedField] = useState('title');
 
-  useEffect(() => {
-    if (selected && !selectedField) {
-      setSelectedField('title');
-    } else if (!selected) {
-      setSelectedField(null);
-    }
-  }, [selected]);
-
-  useEffect(() => {
-    if (!selected && selectedField) {
-      onSelectBlock(block);
-    }
-  }, [selectedField]);
+  const { selectedField, setSelectedField } = useHandleDetachedBlockFocus(
+    props,
+    'simple_card_title',
+  );
 
   return __SERVER__ ? (
     <div />
@@ -75,15 +67,13 @@ const Edit = ({
                   data={data}
                   block={block}
                   fieldName="simple_card_title"
-                  selected={selectedField === 'title'}
+                  selected={selectedField === 'simple_card_title'}
                   onChangeBlock={onChangeBlock}
                   onSelectBlock={onSelectBlock}
                   placeholder={intl.formatMessage(messages.simple_card_title)}
-                  setSelected={() => {
-                    setSelectedField('title');
-                  }}
+                  setSelected={setSelectedField}
                   focusNextField={() => {
-                    setSelectedField('content');
+                    setSelectedField('simple_card_content');
                   }}
                 />
               </CardTitle>
@@ -94,10 +84,8 @@ const Edit = ({
                     showToolbar={true}
                     data={data}
                     fieldName="simple_card_content"
-                    selected={selectedField === 'content'}
-                    setSelected={() => {
-                      setSelectedField('content');
-                    }}
+                    selected={selectedField === 'simple_card_content'}
+                    setSelected={setSelectedField}
                     block={block}
                     onChangeBlock={onChangeBlock}
                     onSelectBlock={onSelectBlock}
@@ -105,7 +93,7 @@ const Edit = ({
                       messages.simple_card_content,
                     )}
                     focusPrevField={() => {
-                      setSelectedField('title');
+                      setSelectedField('simple_card_title');
                     }}
                   />
                 </CardText>
diff --git a/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx
index 21675f70d..da8cbdf07 100644
--- a/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx
+++ b/src/components/ItaliaTheme/manage/Widgets/SimpleTextEditorWidget.jsx
@@ -52,6 +52,7 @@ const SimpleTextEditorWidget = (props) => {
         getBlockProps: () => {
           return { ...props };
         },
+        getSavedSelection: () => null,
       };
       return handlers.find((handler) =>
         handler({ editor: handlerProps, event }),
@@ -73,6 +74,14 @@ const SimpleTextEditorWidget = (props) => {
     }
   }, []);
 
+  const selectThis = () => {
+    if (setSelected) {
+      setSelected(fieldName ?? true);
+    } else if (onSelectBlock) {
+      onSelectBlock(block);
+    }
+  };
+
   return (
     <div className="simple-text-editor-widget" ref={ref}>
       <span
@@ -95,13 +104,12 @@ const SimpleTextEditorWidget = (props) => {
         }}
         onFocus={(e) => {
           if (!selected) {
-            if (onSelectBlock) {
-              onSelectBlock(block);
-            } else {
-              setSelected();
-            }
+            selectThis();
           }
         }}
+        onBlur={(e) => {
+          setSelected(fieldName ? null : false);
+        }}
         onKeyDown={handleKey}
         ref={fieldRef}
       />
diff --git a/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx
index 603017863..838c13764 100644
--- a/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx
+++ b/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx
@@ -74,12 +74,12 @@ const TextEditorWidget = (props) => {
 
   const selectThis = () => {
     if (setSelected) {
-      setSelected();
+      setSelected(fieldName ?? true);
     } else if (onSelectBlock) {
       onSelectBlock(block);
     }
   };
-  console.log(textblockExtensions.map((f) => f.name));
+
   const extensions = [...textblockExtensions].map((f) => {
     if (f.name === 'breakList') {
       return customBreakList;
@@ -131,7 +131,12 @@ const TextEditorWidget = (props) => {
             selected={selected}
             placeholder={placeholder}
             onKeyDown={handleKeyDetached}
-            editableProps={{ 'aria-multiline': 'true' }}
+            editableProps={{
+              'aria-multiline': 'true',
+            }}
+            onBlur={(e) => {
+              setSelected(fieldName ? null : false);
+            }}
           />
         </div>
       ) : (
diff --git a/src/config/Slate/handlers.js b/src/config/Slate/handlers.js
index e6441d097..baec5afd7 100644
--- a/src/config/Slate/handlers.js
+++ b/src/config/Slate/handlers.js
@@ -1,7 +1,8 @@
+import { Node } from 'slate';
 import {
   goDown,
   goUp,
-  softBreak,
+  //softBreak,
   unwrapEmptyString,
 } from '@plone/volto-slate/blocks/Text/keyboard';
 
@@ -78,6 +79,7 @@ const goToNextVoltoBlock = (props) => {
     index,
     saveSlateBlockSelection,
   } = props.editor.getBlockProps();
+
   const next = getNextVoltoBlock(index, properties);
   if (!next || next[0]?.['@type'] !== 'slate')
     return onFocusNextBlock(block, blockNode.current);
@@ -101,33 +103,40 @@ const focusNext = (props) => {
     showToolbar,
     onFocusNextBlock,
   } = props.editor.getBlockProps();
-
+  props.event.preventDefault();
   props.event.stopPropagation();
   let isAtEnd = false;
 
   if (showToolbar) {
     isAtEnd = isCursorAtBlockEnd(props.editor);
   } else {
-    let _range = document.getSelection().getRangeAt(0);
-    let range = _range.cloneRange();
-    range.selectNodeContents(props.event.target);
-    range.setEnd(_range.endContainer, _range.endOffset);
-    isAtEnd = range.toString().length === props.event.target.innerText?.length;
-    // isAtEnd =
-    //   props.event.target.selectionEnd === props.event.target.value?.length;
+    let selection = document.getSelection();
+
+    if (selection && selection.rangeCount > 0) {
+      const _range = selection.getRangeAt(0);
+      let range = _range.cloneRange();
+      range.selectNodeContents(props.event.target);
+      range.setEnd(_range.endContainer, _range.endOffset);
+      isAtEnd =
+        range.toString().length === props.event.target.innerText?.length;
+      // isAtEnd =
+      //   props.event.target.selectionEnd === props.event.target.value?.length;
+    }
   }
 
-  if (isAtEnd) {
-    //move to next field
-    if (focusNextField) {
-      return focusNextField();
-    }
+  //move to next field
+  if (focusNextField) {
+    focusNextField();
+    return true;
+  }
 
+  if (isAtEnd) {
     //handle SimpleTextEditorWidget -> move to next block
     if (!showToolbar && onFocusNextBlock) {
-      goToNextVoltoBlock(props);
+      return goToNextVoltoBlock(props);
     }
   }
+
   //handle SlateEditor arrow-down key
   return goDown(props);
 };
@@ -146,10 +155,14 @@ const breakInSimpleTextEditor = (props) => {
   //disable break in SimpleTextEditorWidget
 
   const getBlockProps = props.editor.getBlockProps;
-  const { showToolbar } = getBlockProps
+  const { showToolbar, focusNextField } = getBlockProps
     ? getBlockProps()
     : { showToolbar: true };
   if (props.event.key === 'Enter' && !props.event.shiftKey && !showToolbar) {
+    if (focusNextField) {
+      focusNextField();
+      return false;
+    }
     props.event.preventDefault();
     goToNextVoltoBlock(props);
     return false;
@@ -166,6 +179,7 @@ export default function install(config) {
       breakInSimpleTextEditor,
       customSoftBreak,
       //focusNext,
+      focusNext,
     ],
     ArrowUp: [focusPrev],
     ArrowDown: [focusNext],
diff --git a/src/config/italiaConfig.js b/src/config/italiaConfig.js
index 09a05c9a0..bd9d34fe6 100644
--- a/src/config/italiaConfig.js
+++ b/src/config/italiaConfig.js
@@ -390,6 +390,7 @@ export default function applyConfig(voltoConfig) {
     },
     hero: {
       ...config.blocks.blocksConfig.hero,
+      hasOwnFocusManagement: true,
       sidebarTab: 1,
     },
     html: {
diff --git a/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx b/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx
index 8cee7eeea..5e523ad8a 100644
--- a/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx
+++ b/src/customizations/volto/components/manage/Blocks/HeroImageLeft/Edit.jsx
@@ -18,7 +18,7 @@ import { Button, Dimmer, Loader, Message } from 'semantic-ui-react';
 import { isEqual } from 'lodash';
 import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
-
+import { handleKeyDownOwnFocusManagement } from 'design-comuni-plone-theme/helpers/blocks';
 import {
   flattenToAppURL,
   getBaseUrl,
@@ -123,6 +123,12 @@ class EditComponent extends Component {
     }
   }
 
+  handleEnter = (e) => {
+    if (this.props.selected) {
+      handleKeyDownOwnFocusManagement(e, this.props);
+    }
+  };
+
   /**
    * Component did mount
    * @method componentDidMount
@@ -130,7 +136,17 @@ class EditComponent extends Component {
    */
   componentDidMount() {
     if (this.props.selected) {
-      this.titleEditor.focus();
+      this.setState(() => ({ currentFocused: 'title' }));
+    }
+
+    const blockNode = this.props.blockNode;
+
+    if (this.props.selected && this.node) {
+      this.node.focus();
+    }
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', this.handleEnter, false);
     }
   }
 
@@ -154,8 +170,15 @@ class EditComponent extends Component {
         url: nextProps.content['@id'],
       });
     }
-  }
 
+    if (nextProps.selected) {
+      if (!this.props.selected) {
+        this.setState({ currentFocused: 'title' });
+      }
+    } else {
+      this.setState({ currentFocused: null });
+    }
+  }
   /**
    * @param {*} nextProps
    * @param {*} nextState
@@ -210,7 +233,7 @@ class EditComponent extends Component {
       this.props.intl.formatMessage(messages.placeholder);
 
     return (
-      <div className="public-ui">
+      <div className="public-ui" tabIndex="-1">
         <div
           className={cx('block hero', {
             selected: this.props.selected,
@@ -287,8 +310,8 @@ class EditComponent extends Component {
                     fieldName="title"
                     selected={this.state.currentFocused === 'title'}
                     placeholder={this.props.intl.formatMessage(messages.title)}
-                    setSelected={() => {
-                      this.setState(() => ({ currentFocused: 'title' }));
+                    setSelected={(f) => {
+                      this.setState(() => ({ currentFocused: f }));
                     }}
                     focusNextField={() => {
                       this.setState(() => ({ currentFocused: 'description' }));
@@ -307,8 +330,8 @@ class EditComponent extends Component {
                   placeholder={this.props.intl.formatMessage(
                     messages.description,
                   )}
-                  setSelected={() => {
-                    this.setState(() => ({ currentFocused: 'description' }));
+                  setSelected={(f) => {
+                    this.setState(() => ({ currentFocused: f }));
                   }}
                   focusPrevField={() => {
                     this.setState(() => ({ currentFocused: 'title' }));
diff --git a/src/helpers/blocks.js b/src/helpers/blocks.js
index a02bd31e7..db3ff97e6 100644
--- a/src/helpers/blocks.js
+++ b/src/helpers/blocks.js
@@ -1,7 +1,86 @@
 import { v4 as uuid } from 'uuid';
-
+import { useState, useEffect } from 'react';
+import config from '@plone/volto/registry';
 export const cloneBlock = (blockData) => {
   const blockID = uuid();
   const clonedData = { ...blockData, block: blockID };
   return [blockID, clonedData];
 };
+
+export const handleKeyDownOwnFocusManagement = (
+  e,
+  props,
+  {
+    disableEnter = false,
+    disableArrowUp = false,
+    disableArrowDown = false,
+  } = {},
+) => {
+  const {
+    index,
+    block,
+    node,
+    onFocusPreviousBlock = () => {},
+    onFocusNextBlock = () => {},
+    onSelectBlock = () => {},
+    onAddBlock = () => {},
+  } = props;
+  const isMultipleSelection = e.shiftKey;
+
+  if (e.key === 'ArrowUp' && !disableArrowUp) {
+    onFocusPreviousBlock(block, node, isMultipleSelection);
+    e.preventDefault();
+  }
+  if (e.key === 'ArrowDown' && !disableArrowDown) {
+    onFocusNextBlock(block, node, isMultipleSelection);
+    e.preventDefault();
+  }
+  if (e.key === 'Enter' && !disableEnter) {
+    onSelectBlock(onAddBlock(config.settings.defaultBlockType, index + 1));
+
+    e.preventDefault();
+  }
+};
+
+/*HOOK to handle detached blocks with own focus management*/
+export const useHandleDetachedBlockFocus = (
+  blockProps,
+  defaultSelectedField,
+) => {
+  const [selectedField, setSelectedField] = useState(defaultSelectedField);
+  const { selected, onSelectBlock, block } = blockProps;
+
+  useEffect(() => {
+    if (selected && !selectedField) {
+      setSelectedField(defaultSelectedField);
+    } else if (!selected) {
+      setSelectedField(null);
+    }
+  }, [selected]);
+
+  useEffect(() => {
+    if (!selected && selectedField && onSelectBlock) {
+      onSelectBlock(block);
+    }
+  }, [selectedField]);
+
+  useEffect(() => {
+    const handleEnter = (e) => {
+      if (selected && !selectedField) {
+        handleKeyDownOwnFocusManagement(e, blockProps);
+      }
+    };
+    const blockNode = blockProps.blockNode;
+
+    if (blockNode && blockNode.current) {
+      blockNode.current.addEventListener('keydown', handleEnter, false);
+      return function cleanup() {
+        if (blockNode?.current) {
+          blockNode.current.removeEventListener('keydown', handleEnter, false);
+        }
+      };
+    }
+  }, [selected, selectedField]);
+
+  return { selectedField, setSelectedField };
+};
diff --git a/src/theme/ItaliaTheme/_main.scss b/src/theme/ItaliaTheme/_main.scss
index 262bdf377..7df067fb1 100644
--- a/src/theme/ItaliaTheme/_main.scss
+++ b/src/theme/ItaliaTheme/_main.scss
@@ -86,7 +86,7 @@ iframe {
 .cms-ui {
   blockquote,
   .blockquote {
-    display: flex; //serve per quando i blockquote sono affiancati alle immagini allineate a dx o sx
+    display: flow-root; //serve per quando i blockquote sono affiancati alle immagini allineate a dx o sx
     border-color: $primary !important;
 
     ul:first-child,
@@ -125,7 +125,7 @@ iframe {
     font-weight: 600;
     text-align: center;
     text-decoration: none;
-    margin: 0 0.5rem;
+    margin: 0;
     &:hover,
     &:active {
       font-weight: 600;
diff --git a/src/theme/_cms-ui.scss b/src/theme/_cms-ui.scss
index 6de6ff31e..1ddfe20d8 100644
--- a/src/theme/_cms-ui.scss
+++ b/src/theme/_cms-ui.scss
@@ -1,7 +1,7 @@
 @import 'cms-ui_container';
 body.cms-ui {
   .block {
-    font-family: $font-family-serif;
+    font-family: $font-family-sans-serif;
 
     %heading {
       margin-top: 0; /* 1*/