adjust alignment toolbar buttons

FortAwesome · Jul 26, 2024 · c7ec208 · c7ec208
1 parent 893273c
commit c7ec208
Showing 1 changed file with 25 additions and 22 deletions.
diff --git a/block-editor/src/edit.js b/block-editor/src/edit.js
@@ -155,28 +155,30 @@ export function Edit(props) {
     ? (
       <Fragment>
         <BlockControls>
-        <DropdownMenu
-          controls={[
-            {
-              icon: justifyLeft,
-              onClick: () => setJustification('left'),
-              title: __('Justify Icon Left', 'font-awesome')
-            },
-            {
-              icon: justifyCenter,
-              onClick: () => setJustification('center'),
-              title: __('Justify Icon Center', 'font-awesome')
-            },
-            {
-              icon: justifyRight,
-              onClick: () => setJustification('right'),
-              title: __('Justify Icon Right', 'font-awesome')
-            }
-          ]}
-          icon={justificationDropdownMenuIcon}
-          label={__('Change Icon Justification', 'font-awesome')}
-        />
-
+        <ToolbarGroup>
+          <DropdownMenu
+            controls={[
+              {
+                icon: justifyLeft,
+                onClick: () => setJustification('left'),
+                title: __('Justify Icon Left', 'font-awesome')
+              },
+              {
+                icon: justifyCenter,
+                onClick: () => setJustification('center'),
+                title: __('Justify Icon Center', 'font-awesome')
+              },
+              {
+                icon: justifyRight,
+                onClick: () => setJustification('right'),
+                title: __('Justify Icon Right', 'font-awesome')
+              }
+            ]}
+            icon={justificationDropdownMenuIcon}
+            label={__('Change Icon Justification', 'font-awesome')}
+          />
+        </ToolbarGroup>
+        <ToolbarGroup>
           <ToolbarButton
             showTooltip
             onClick={() => setIsEditModalOpen(!isEditModalOpen)}
@@ -185,6 +187,7 @@ export function Edit(props) {
           label={__("Add Icon Styling")}
             icon={modifyToolbarIcon}
           />
+        </ToolbarGroup>
 
         {isEditModalOpen && (
           <Modal