fixed issue

packages/volto/news/2039.feature

@@ -0,0 +1,10 @@
+**Added functionality for a "Favorites Section in the Content Browser Sidebar" feature:**
+
+Created favourites file in {file}'/src/actions".
+Enhanced {file}/src/components/manage/Blocks/Block/EditBlockWrap per.jsx and added SaveBlockDialog.jsx.
+Modified {file}/src/components/manage/Blocks/Block/Snapshots/Blo cksForm.test.jsx`.
+Updated{file}/src/components/manage/Sidebar/Sidebar.jsx, sidebarPopup.jsx', and 'save.css', and added a new component FavouriteItem.jsx'.
+Implemented a new reducer in {file}/src/reducers/favourites/favouritesReducer.js" and updated {file}'/src/reducers/index.js'
+
+
+@TechSubham

packages/volto/src/actions/favorites/favorites.js

@@ -0,0 +1,36 @@
+import { cloneBlocks } from '@plone/volto/helpers/Blocks/cloneBlocks';
+import config from '@plone/volto/registry';
+
+export const ADD_TO_FAVORITES = 'ADD_TO_FAVORITES';
+export const REMOVE_FROM_FAVORITES = 'REMOVE_FROM_FAVORITES';
+export const LOAD_FAVORITES = 'LOAD_FAVORITES';
+
+export function loadFavorites() {
+  return {
+    type: LOAD_FAVORITES,
+  };
+}
+
+export function addToFavorites(blockData) {
+  const { id, type, data } = blockData;
+  const blockConfig = config.blocks.blocksConfig[type];
+  const clonedData = blockConfig?.cloneData
+    ? blockConfig.cloneData(data)
+    : cloneBlocks(data);
+
+  return {
+    type: ADD_TO_FAVORITES,
+    block: {
+      id,
+      type,
+      data: clonedData,
+    },
+  };
+}
+
+export function removeFromFavorites(blockId) {
+  return {
+    type: REMOVE_FROM_FAVORITES,
+    blockId,
+  };
+}

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

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import Icon from '@plone/volto/components/theme/Icon/Icon';
 import {
   applyBlockDefaults,
@@ -17,14 +17,23 @@ 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 saveSVG from '@plone/volto/icons/save.svg';
 import trashSVG from '@plone/volto/icons/delete.svg';
+import SaveBlockDialog from './SaveBlockDialog';
 
 const messages = defineMessages({
   delete: {
     id: 'delete',
     defaultMessage: 'delete',
   },
+  save: {
+    id: 'save',
+    defaultMessage: 'save',
+  },
+  addToFavorites: {
+    id: 'addToFavorites',
+    defaultMessage: 'Add to Favorites',
+  },
 });
 
 const EditBlockWrapper = (props) => {
@@ -58,6 +67,7 @@ const EditBlockWrapper = (props) => {
   } = blockProps;
 
   const data = applyBlockDefaults({ data: originalData, ...blockProps, intl });
+  const [isSaveDialogOpen, setIsSaveDialogOpen] = useState(false);
 
   const visible = selected && !hideHandler(data);
 
@@ -105,15 +115,58 @@ const EditBlockWrapper = (props) => {
         <div className={`ui drag block inner ${type}`}>
           {children}
           {selected && !required && editable && (
-            <Button
-              icon
-              basic
-              onClick={() => onDeleteBlock(block, true)}
-              className="delete-button"
-              aria-label={intl.formatMessage(messages.delete)}
+            <div
+              style={{
+                position: 'absolute',
+                top: '-3px',
+                right: '-35px',
+                display: 'flex',
+                zIndex: 10,
+              }}
             >
-              <Icon name={trashSVG} size="18px" />
-            </Button>
+              <Button
+                icon
+                basic
+                onClick={() => onDeleteBlock(block, true)}
+                className="delete-button"
+                aria-label={intl.formatMessage(messages.delete)}
+                style={{
+                  marginRight: '3px',
+                  transition: 'background-color 0.3s, color 0.3s',
+                }}
+              >
+                <Icon
+                  name={trashSVG}
+                  size="20px"
+                  className="hover:text-red-500 transition-colors duration-300"
+                />
+              </Button>
+
+              <Button
+                icon
+                basic
+                onClick={() => setIsSaveDialogOpen(true)}
+                className="save-button"
+                aria-label={intl.formatMessage(messages.save)}
+                style={{
+                  marginRight: '3px',
+                  transition: 'background-color 0.3s, color 0.3s',
+                }}
+              >
+                <Icon
+                  name={saveSVG}
+                  size="22px"
+                  className="hover:text-green-500 transition-colors duration-300"
+                />
+              </Button>
+              <SaveBlockDialog
+                block={block}
+                type={type}
+                data={data}
+                isOpen={isSaveDialogOpen}
+                onClose={() => setIsSaveDialogOpen(false)}
+              />
+            </div>
           )}
           {config.experimental.addBlockButton.enabled && showBlockChooser && (
             <BlockChooserButton

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

@@ -0,0 +1,73 @@
+import React, { useState } from 'react';
+import { useDispatch } from 'react-redux';
+import { Button, Modal, Input, Header } from 'semantic-ui-react';
+import { defineMessages, useIntl } from 'react-intl';
+import { addToFavorites } from '@plone/volto/actions/favorites/favorites';
+import config from '@plone/volto/registry';
+
+const messages = defineMessages({
+  saveBlock: {
+    id: 'Save Block',
+    defaultMessage: 'Save Block',
+  },
+  enterName: {
+    id: 'Enter a name for this block',
+    defaultMessage: 'Enter a name for this block',
+  },
+  save: {
+    id: 'Save',
+    defaultMessage: 'Save',
+  },
+  cancel: {
+    id: 'Cancel',
+    defaultMessage: 'Cancel',
+  },
+});
+
+const SaveBlockDialog = ({ block, type, data, isOpen, onClose }) => {
+  const intl = useIntl();
+  const dispatch = useDispatch();
+  const [name, setName] = useState('');
+
+  const handleSave = () => {
+    const blockConfig = config.blocks.blocksConfig[type];
+    const blockData = {
+      id: block,
+      type: type,
+      data: {
+        ...data,
+        '@type': type,
+        title: name,
+      },
+    };
+
+    if (blockConfig?.cloneData) {
+      blockData.data = blockConfig.cloneData(blockData.data)[1];
+    }
+    dispatch(addToFavorites(blockData));
+    setName('');
+    onClose();
+  };
+
+  return (
+    <Modal open={isOpen} onClose={onClose} size="tiny">
+      <Header content={intl.formatMessage(messages.saveBlock)} />
+      <Modal.Content>
+        <Input
+          fluid
+          placeholder={intl.formatMessage(messages.enterName)}
+          value={name}
+          onChange={(e) => setName(e.target.value)}
+        />
+      </Modal.Content>
+      <Modal.Actions>
+        <Button onClick={onClose}>{intl.formatMessage(messages.cancel)}</Button>
+        <Button primary onClick={handleSave} disabled={!name.trim()}>
+          {intl.formatMessage(messages.save)}
+        </Button>
+      </Modal.Actions>
+    </Modal>
+  );
+};
+
+export default SaveBlockDialog;

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

@@ -54,17 +54,34 @@ exports[`Allow override of blocksConfig 1`] = `
                   a
                 </div>
               </div>
-              <button
-                aria-label="delete"
-                class="ui basic icon button delete-button"
+              <div
+                style="position: absolute; top: -3px; right: -35px; display: flex; z-index: 10;"
               >
-                <svg
-                  class="icon"
-                  style="height: 18px; width: auto; fill: currentColor;"
-                  viewBox=""
-                  xmlns=""
-                />
-              </button>
+                <button
+                  aria-label="delete"
+                  class="ui basic icon button delete-button"
+                  style="margin-right: 3px; transition: background-color 0.3s, color 0.3s;"
+                >
+                  <svg
+                    class="icon hover:text-red-500 transition-colors duration-300"
+                    style="height: 20px; width: auto; fill: currentColor;"
+                    viewBox=""
+                    xmlns=""
+                  />
+                </button>
+                <button
+                  aria-label="save"
+                  class="ui basic icon button save-button"
+                  style="margin-right: 3px; transition: background-color 0.3s, color 0.3s;"
+                >
+                  <svg
+                    class="icon hover:text-green-500 transition-colors duration-300"
+                    style="height: 22px; width: auto; fill: currentColor;"
+                    viewBox=""
+                    xmlns=""
+                  />
+                </button>
+              </div>
             </div>
           </div>
         </div>

packages/volto/src/components/manage/Form/save.css

@@ -0,0 +1,25 @@
+.sidebar-metadata-container .save-button-wrapper {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  justify-content: center;
+  padding: 0.8rem;
+  border: none;
+  border-radius: 2px;
+  margin: 1rem 0;
+  background-color: #007eb1;
+  color: white;
+  cursor: pointer;
+}
+
+.sidebar-metadata-container .save-button-wrapper:hover {
+  background-color: #006c98;
+}
+
+.sidebar-metadata-container .save-icon {
+  margin-right: 0.5rem;
+}
+
+.sidebar-metadata-container .save-button-text {
+  font-weight: 500;
+}