fix: fix slate block

RedTurtle · Oct 10, 2023 · d2637e3 · d2637e3
1 parent 5a7f8ee
commit d2637e3
Show file tree

Hide file tree

Showing 8 changed files with 46 additions and 31 deletions.
diff --git a/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Block.jsx b/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Block.jsx
@@ -33,7 +33,6 @@ const Block = ({
   data,
   inEditMode,
   selected,
-  focusOn,
   block,
   onChange,
   intl,
@@ -61,7 +60,7 @@ const Block = ({
                 onChange({ ...data, title: _data.value });
               }}
               setSelected={() => {
-                focusOn('title');
+                otherProps.onSubblockChangeFocus(index);
               }}
             />
           ) : (

diff --git a/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Body.jsx b/src/components/ItaliaTheme/Blocks/ArgumentsInEvidence/Body.jsx
@@ -30,7 +30,7 @@ class Body extends SubblockEdit {
           inEditMode={this.props.inEditMode}
           selected={this.props.selected || this.state.focusOn === 'title'}
           block={this.props.block}
-          focusOn={this.props.focusOn}
+          focusOn={this.state.focusOn}
           intl={this.props.intl}
           onChange={this.onChange}
         />

diff --git a/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx b/src/components/ItaliaTheme/Blocks/CTABlock/Block.jsx
@@ -43,6 +43,12 @@ const Block = ({ data, block, inEditMode, selected, ...otherProps }) => {
     }
   }, [selected]);
 
+  useEffect(() => {
+    if (!selected && selectedField) {
+      otherProps.onSelectBlock(block);
+    }
+  }, [selectedField]);
+
   return (
     <div
       className={cx('cta-block-wrapper', {
@@ -87,16 +93,17 @@ const Block = ({ data, block, inEditMode, selected, ...otherProps }) => {
               title
             )}
           </h2>
+
           {inEditMode ? (
             <TextEditorWidget
               {...otherProps}
               showToolbar={true}
               data={data}
               fieldName="cta_content"
-              selected={selectedField === 'content'}
-              setSelected={() => setSelectedField('content')}
               block={block}
+              selected={selectedField === 'content'}
               placeholder={intl.formatMessage(messages.cta_content)}
+              setSelected={() => setSelectedField('content')}
               focusPrevField={() => {
                 setSelectedField('title');
               }}

diff --git a/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx b/src/components/ItaliaTheme/Blocks/ContactsBlock/Block/EditBlock.jsx
@@ -58,6 +58,18 @@ class EditBlock extends SubblockEdit {
       }
     });
   }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    if (!this.props.selected && nextProps.focusOn) {
+      this.props.onSelectBlock(this.props.block);
+    }
+
+    if (nextProps.selected && !this.state.focusOn) {
+      this.setState({ focusOn: 'title' });
+    } else if (!nextProps.selected) {
+      this.setState({ focusOn: null });
+    }
+  }
   /**
    * Render method.
    * @method render
@@ -81,7 +93,6 @@ class EditBlock extends SubblockEdit {
           <CardBody tag="div">
             <div className="contact-title">
               {/* eslint-disable */}
-
               <TextEditorWidget
                 {...this.props}
                 key="title"

diff --git a/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx b/src/components/ItaliaTheme/Blocks/ContactsBlock/Edit.jsx
@@ -45,6 +45,7 @@ class Edit extends SubblocksEdit {
     super(props);
     this.state.selectedField = 'title';
   }
+
   /**
    * Render method.
    * @method render
@@ -67,12 +68,11 @@ class Edit extends SubblocksEdit {
               <div className="title">
                 <TextEditorWidget
                   {...this.props}
+                  key="title"
                   showToolbar={false}
                   data={this.props.data}
-                  onSelectBlock={null}
                   fieldName="title"
                   selected={this.state.selectedField === 'title'}
-                  onChangeBlock={this.props.onChangeBlock}
                   placeholder={this.props.intl.formatMessage(messages.title)}
                   setSelected={() => {
                     this.setState({ selectedField: 'title' });
@@ -86,18 +86,17 @@ class Edit extends SubblocksEdit {
               <div className="description">
                 <TextEditorWidget
                   {...this.props}
-                  showToolbar={true}
+                  key="description"
                   data={this.props.data}
                   fieldName="description"
                   selected={this.state.selectedField === 'description'}
-                  onSelectBlock={null}
-                  onChangeBlock={this.props.onChangeBlock}
                   placeholder={this.props.intl.formatMessage(
                     messages.description,
                   )}
-                  setSelected={() =>
-                    this.setState({ selectedField: 'description' })
-                  }
+                  onSelectBlock={null}
+                  setSelected={() => {
+                    this.setState({ selectedField: 'description' });
+                  }}
                   focusPrevField={() => {
                     this.setState({ selectedField: 'title' });
                   }}
@@ -129,6 +128,9 @@ class Edit extends SubblocksEdit {
                       onSubblockChangeFocus={this.onSubblockChangeFocus}
                       isLast={this.state.subblocks.length - 1 === subindex}
                       isFirst={subindex === 0}
+                      onFocusPreviousBlock={() => {
+                        this.setState({ selectedField: 'description' });
+                      }}
                     />
                   </Col>
                 ))}

diff --git a/src/components/ItaliaTheme/Blocks/CountDown/Edit.jsx b/src/components/ItaliaTheme/Blocks/CountDown/Edit.jsx
@@ -17,16 +17,7 @@ const messages = defineMessages({
 });
 
 const Edit = (props) => {
-  const {
-    data,
-    block,
-    onChangeBlock,
-    selected,
-    onSelectBlock,
-    onAddBlock,
-    index,
-    ...otherProps
-  } = props;
+  const { data, block, selected, ...otherProps } = props;
   const intl = useIntl();
   const [selectedField, setSelectedField] = useState('text');
   useEffect(() => {
@@ -37,6 +28,12 @@ const Edit = (props) => {
     }
   }, [selected]);
 
+  useEffect(() => {
+    if (!selected && selectedField) {
+      props.onSelectBlock(block);
+    }
+  }, [selectedField]);
+
   return (
     <>
       <div className="public-ui">
@@ -74,12 +71,10 @@ const Edit = (props) => {
               >
                 <TextEditorWidget
                   {...otherProps}
-                  showToolbar={true}
                   data={data}
                   fieldName="text"
                   selected={selectedField === 'text'}
                   block={block}
-                  onChangeBlock={onChangeBlock}
                   placeholder={intl.formatMessage(messages.text)}
                   setSelected={() => {
                     setSelectedField('text');
@@ -113,7 +108,6 @@ const Edit = (props) => {
                   block={block}
                   fieldName="countdown_text"
                   selected={selectedField === 'countdown_text'}
-                  onChangeBlock={onChangeBlock}
                   placeholder={intl.formatMessage(messages.text)}
                   setSelected={() => {
                     setSelectedField('countdown_text');

diff --git a/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx b/src/components/ItaliaTheme/manage/Widgets/TextEditorWidget.jsx
@@ -66,10 +66,10 @@ const TextEditorWidget = (props) => {
   const _value = value ?? data[fieldName];
 
   const selectThis = () => {
-    if (onSelectBlock) {
-      onSelectBlock(block);
-    } else {
+    if (setSelected) {
       setSelected();
+    } else if (onSelectBlock) {
+      onSelectBlock(block);
     }
   };
   return (
@@ -131,7 +131,6 @@ const TextEditorWidget = (props) => {
 TextEditorWidget.propTypes = {
   data: PropTypes.objectOf(PropTypes.any).isRequired,
   setSelected: PropTypes.func.isRequired,
-  onSelectBlock: PropTypes.func.isRequired,
   onChangeBlock: PropTypes.func.isRequired,
   block: PropTypes.string.isRequired,
   selected: PropTypes.bool.isRequired,
@@ -143,6 +142,7 @@ TextEditorWidget.propTypes = {
   properties: PropTypes.objectOf(PropTypes.any).isRequired,
   onFocusPreviousBlock: PropTypes.objectOf(PropTypes.any).isRequired,
   onFocusNextBlock: PropTypes.objectOf(PropTypes.any).isRequired,
+  onSelectBlock: PropTypes.func.isRequired,
 };
 
 export default connect(

diff --git a/src/config/Blocks/blocks.js b/src/config/Blocks/blocks.js
@@ -313,6 +313,7 @@ const italiaBlocks = {
       view: [],
     },
     sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
   },
 
   video_gallery: {
@@ -362,6 +363,7 @@ const italiaBlocks = {
       view: [],
     },
     sidebarTab: 1,
+    blockHasOwnFocusManagement: true,
   },
   callout_block: {
     id: 'callout_block',