select block whenever it is clicked on navtree

packages/hydra-js/hydra.js

@@ -224,6 +224,22 @@ class Bridge {
     window.addEventListener('message', this.messageHandler);
   }
 
+  /**
+   * Checks if an element is visible in the viewport
+   * @param {} el
+   * @param {} partiallyVisible
+   * @returns boolean - true if the element is visible in the viewport
+   */
+  elementIsVisibleInViewport(el, partiallyVisible = false) {
+    const { top, left, bottom, right } = el.getBoundingClientRect();
+    const { innerHeight, innerWidth } = window;
+    return partiallyVisible
+      ? ((top > 0 && top < innerHeight) ||
+          (bottom > 0 && bottom < innerHeight)) &&
+          ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
+      : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
+  }
+
   observeForBlock(uid) {
     const observer = new MutationObserver((mutationsList, observer) => {
       for (const mutation of mutationsList) {
@@ -233,6 +249,8 @@ class Bridge {
           );
           if (blockElement) {
             this.selectBlock(blockElement);
+            !this.elementIsVisibleInViewport(blockElement, true) &&
+              blockElement.scrollIntoView({ behavior: 'smooth' });
             observer.disconnect();
             break;
           }

packages/volto-hydra/src/components/Iframe/View.jsx

@@ -75,6 +75,14 @@ const Iframe = (props) => {
       },
     ],
   });
+  useEffect(() => {
+    document
+      .getElementById('previewIframe')
+      .contentWindow.postMessage(
+        { type: 'SELECT_BLOCK', uid: selectedBlock },
+        '*',
+      );
+  }, [selectedBlock]);
   //-------------------------
 
   const [url, setUrl] = useState('');

packages/volto-hydra/src/customizations/components/manage/Blocks/Block/Order/Item.jsx

@@ -0,0 +1,123 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useDispatch, useSelector } from 'react-redux';
+import { includes } from 'lodash';
+
+import { Icon } from '@plone/volto/components';
+import { setSidebarTab, setUIState } from '@plone/volto/actions';
+import config from '@plone/volto/registry';
+
+import deleteSVG from '@plone/volto/icons/delete.svg';
+import dragSVG from '@plone/volto/icons/drag.svg';
+
+export const Item = forwardRef(
+  (
+    {
+      clone,
+      data,
+      depth,
+      disableSelection,
+      disableInteraction,
+      ghost,
+      id,
+      handleProps,
+      indentationWidth,
+      onRemove,
+      onSelectBlock,
+      parentId,
+      style,
+      value,
+      wrapperRef,
+      ...props
+    },
+    ref,
+  ) => {
+    const selected = useSelector((state) => state.form.ui.selected);
+    const hovered = useSelector((state) => state.form.ui.hovered);
+    const multiSelected = useSelector((state) => state.form.ui.multiSelected);
+    const gridSelected = useSelector((state) => state.form.ui.gridSelected);
+    const dispatch = useDispatch();
+    return (
+      <li
+        className={classNames(
+          'tree-item-wrapper',
+          clone && 'clone',
+          ghost && 'ghost',
+          disableSelection && 'disable-selection',
+          disableInteraction && 'disable-interaction',
+        )}
+        role="presentation"
+        onMouseOver={() => dispatch(setUIState({ hovered: id }))}
+        onFocus={() => dispatch(setUIState({ hovered: id }))}
+        onMouseLeave={() => dispatch(setUIState({ hovered: null }))}
+        onClick={(e) => {
+          if (depth === 0) {
+            const isMultipleSelection = e.shiftKey || e.ctrlKey || e.metaKey;
+            selected !== id &&
+              onSelectBlock(
+                id,
+                selected === id ? false : isMultipleSelection,
+                e,
+              );
+          } else {
+            dispatch(
+              setUIState({
+                selected: parentId,
+                multiSelected: [],
+                gridSelected: id,
+              }),
+            );
+          }
+          dispatch(setSidebarTab(1));
+        }}
+        ref={wrapperRef}
+        style={{
+          '--spacing': `${indentationWidth * depth}px`,
+        }}
+        {...props}
+      >
+        <div
+          className={classNames(
+            'tree-item',
+            (selected === id || gridSelected === id) && 'selected',
+            hovered === id && 'hovered',
+            includes(multiSelected, id) && 'multiSelected',
+            `depth-${depth}`,
+          )}
+          ref={ref}
+          style={style}
+        >
+          <button
+            ref={ref}
+            {...handleProps}
+            className={classNames('action', 'drag')}
+            tabIndex={0}
+            data-cypress="draggable-handle"
+          >
+            <Icon name={dragSVG} size="16px" />
+          </button>
+          <span className="text">
+            {config.blocks.blocksConfig[data?.['@type']]?.icon && (
+              <Icon
+                name={config.blocks.blocksConfig[data?.['@type']]?.icon}
+                size="20px"
+                style={{ verticalAlign: 'middle' }}
+              />
+            )}{' '}
+            {data?.plaintext ||
+              config.blocks.blocksConfig[data?.['@type']]?.title}
+          </span>
+          {!clone && onRemove && (
+            <button
+              onClick={onRemove}
+              className={classNames('action', 'delete')}
+              tabIndex={0}
+            >
+              <Icon name={deleteSVG} size="18" />
+            </button>
+          )}
+        </div>
+      </li>
+    );
+  },
+);