fix:Order blocks in sidebar doesn't respect layout restrictions: requ…

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) => {
               onDeleteBlock={onDeleteBlock}
               onSelectBlock={onSelectBlock}
               removable
+              editable={editable}
               errors={blocksErrors}
             />
           </div>,

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

@@ -9,6 +9,7 @@ import {
   buildStyleObjectFromData,
   buildStyleClassNamesExtenders,
 } from '@plone/volto/helpers';
+import { hideHandler } from '@plone/volto/helpers/Blocks/Blocks';
 import dragSVG from '@plone/volto/icons/drag.svg';
 import { Button } from 'semantic-ui-react';
 import includes from 'lodash/includes';
@@ -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';
+import isBoolean from 'lodash/isBoolean';
 import cx from 'classnames';
 import { Icon } from '@plone/volto/components';
 import { setUIState } from '@plone/volto/actions';
 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(
@@ -91,6 +99,9 @@ export const Item = forwardRef(
           <button
             ref={ref}
             {...handleProps}
+            style={{
+              visibility: visible ? 'visible' : 'hidden',
+            }}
             className={classNames('action', 'drag')}
             tabIndex={0}
             data-cypress="draggable-handle"
@@ -112,7 +123,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

@@ -17,6 +17,7 @@ export function Order({
   dndKitCore,
   dndKitSortable,
   dndKitUtilities,
+  editable,
   errors,
 }) {
   const [activeId, setActiveId] = useState(null);
@@ -147,6 +148,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

@@ -73,6 +73,20 @@ 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