order-blocks-sidebar-fix add disabled to drag button

packages/volto/news/6481.bugfix

@@ -0,0 +1 @@
+While editing a block, and in the sidebar under the {guilabel}`Settings` tab, when an item has {guilabel}`Required` checked, then it can no longer be deleted under the {guilabel}`Order` tab. Similarly, when  {guilabel}`Fixed position` is checked, the item's ordered position can no longer be changed. Previously neither option was honored. @alihamza1221

packages/volto/src/components/manage/Blocks/Block/BlocksForm.jsx

@@ -283,6 +283,7 @@ const BlocksForm = (props) => {
               onMoveBlock={onMoveBlockEnhanced}
               onDeleteBlock={onDeleteBlock}
               onSelectBlock={onSelectBlock}
+              editable={editable}
               removable
               errors={blocksErrors}
             />

packages/volto/src/components/manage/Blocks/Block/EditBlockWrapper.jsx

@@ -17,6 +17,7 @@ import { defineMessages, injectIntl } from 'react-intl';
 import cx from 'classnames';
 import config from '@plone/volto/registry';
 import BlockChooserButton from '@plone/volto/components/manage/BlockChooser/BlockChooserButton';
+import { hideHandler } from '@plone/volto/helpers/Blocks/Blocks';
 
 import trashSVG from '@plone/volto/icons/delete.svg';
 
@@ -28,14 +29,6 @@ const messages = defineMessages({
 });
 
 const EditBlockWrapper = (props) => {
-  const hideHandler = (data) => {
-    return (
-      !!data.fixed ||
-      (!config.experimental.addBlockButton.enabled &&
-        !(blockHasValue(data) && props.blockProps.editable))
-    );
-  };
-
   const { intl, blockProps, draginfo, children } = props;
   const {
     allowedBlocks,
@@ -59,7 +52,7 @@ const EditBlockWrapper = (props) => {
 
   const data = applyBlockDefaults({ data: originalData, ...blockProps, intl });
 
-  const visible = selected && !hideHandler(data);
+  const visible = selected && !hideHandler(data, editable);
 
   const required = isBoolean(data.required)
     ? data.required

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

@@ -2,10 +2,12 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { useDispatch, useSelector } from 'react-redux';
 import includes from 'lodash/includes';
+import isBoolean from 'lodash/isBoolean';
 import cx from 'classnames';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import { setUIState } from '@plone/volto/actions/form/form';
 import config from '@plone/volto/registry';
+import { hideHandler } from '@plone/volto/helpers/Blocks/Blocks';
 
 import deleteSVG from '@plone/volto/icons/delete.svg';
 import dragSVG from '@plone/volto/icons/drag.svg';
@@ -39,6 +41,12 @@ export const Item = forwardRef(
     const gridSelected = useSelector((state) => state.form.ui.gridSelected);
     const dispatch = useDispatch();
 
+    const visible = !hideHandler(data, props?.editable);
+
+    const required = isBoolean(data?.required)
+      ? data?.required
+      : includes(config.blocks.requiredBlocks, data?.['@type']);
+
     return (
       <li
         className={classNames(
@@ -93,6 +101,10 @@ export const Item = forwardRef(
             {...handleProps}
             className={classNames('action', 'drag')}
             tabIndex={0}
+            style={{
+              visibility: visible ? 'visible' : 'hidden',
+            }}
+            disabled={!visible}
             data-cypress="draggable-handle"
           >
             <Icon name={dragSVG} size="16px" />
@@ -112,7 +124,7 @@ export const Item = forwardRef(
             {data?.plaintext ||
               config.blocks.blocksConfig[data?.['@type']]?.title}
           </span>
-          {!clone && onRemove && (
+          {!clone && onRemove && !required && (
             <button
               onClick={onRemove}
               className={classNames('action', 'delete')}

packages/volto/src/components/manage/Blocks/Block/Order/Order.jsx

@@ -15,6 +15,7 @@ export function Order({
   onSelectBlock,
   indentationWidth = 25,
   removable,
+  editable,
   dndKitCore,
   dndKitSortable,
   dndKitUtilities,
@@ -148,6 +149,7 @@ export function Order({
             indentationWidth={indentationWidth}
             onRemove={removable ? () => handleRemove(id) : undefined}
             onSelectBlock={onSelectBlock}
+            editable={editable}
             errors={errors?.[id] || {}}
           />
         ))}

packages/volto/src/components/manage/Blocks/Block/__snapshots__/BlocksForm.test.jsx.snap

@@ -153,6 +153,7 @@ exports[`Allow override of blocksConfig 1`] = `
             class="action drag"
             data-cypress="draggable-handle"
             role="button"
+            style="visibility: visible;"
             tabindex="0"
           >
             <svg
@@ -215,6 +216,7 @@ exports[`Allow override of blocksConfig 1`] = `
             class="action drag"
             data-cypress="draggable-handle"
             role="button"
+            style="visibility: visible;"
             tabindex="0"
           >
             <svg

packages/volto/src/helpers/Blocks/Blocks.js

@@ -80,6 +80,21 @@ export function blockHasValue(data) {
   return check(data);
 }
 
+/**
+ * Pluggable method to test if a block has a set value (any non-empty value)
+ * @function hideHandler
+ * @param {Object} data Block data
+ * @param {boolean} editable Indicates if is editable
+ * @return {boolean} True if block is fixed
+ */
+export const hideHandler = (data, editable) => {
+  return (
+    !!data?.fixed ||
+    (!config.experimental.addBlockButton.enabled &&
+      !(data && blockHasValue(data) && !!editable))
+  );
+};
+
 /**
  * Get block pairs of [id, block] from content properties
  * @function getBlocks