Merge pull request #2255 from Codeinwp/fix/issue-208

Experiment with formats in the toolbar
Codeinwp · Jul 30, 2024 · b0e3302 · b0e3302
2 parents edf69f5 + 0350644
commit b0e3302
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 19 deletions.
diff --git a/src/blocks/plugins/dynamic-content/editor.scss b/src/blocks/plugins/dynamic-content/editor.scss
@@ -33,6 +33,22 @@ o-dynamic-link {
 	cursor: pointer;
 }
 
+.components-toolbar {
+	.o-dynamic-button {
+		opacity: 1;
+
+		&.is-pressed {
+			&::before {
+				background: rgba(237, 111, 87, 0.1);
+			}
+		}
+
+		svg {
+			fill: #ED6F57;
+		}
+	}
+}
+
 .wp-block.is-selected o-dynamic,
 .wp-block:not(.is-selected) o-dynamic:not([data-preview]),
 .wp-block:not(.is-selected) o-dynamic[data-preview=""] {

diff --git a/src/blocks/plugins/dynamic-content/link/edit.js b/src/blocks/plugins/dynamic-content/link/edit.js
@@ -1,16 +1,20 @@
 /**
  * External dependencies.
  */
-import { globe } from '@wordpress/icons';
+import { link } from '@wordpress/icons';
 
 /**
  * WordPress dependencies.
  */
 import { __ } from '@wordpress/i18n';
 
-import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { BlockControls } from '@wordpress/block-editor';
 
-import { Modal } from '@wordpress/components';
+import {
+	Modal,
+	ToolbarButton,
+	ToolbarGroup
+} from '@wordpress/components';
 
 import { useSelect } from '@wordpress/data';
 
@@ -92,13 +96,18 @@ const Edit = ({
 
 	return (
 		<Fragment>
-			<RichTextToolbarButton
-				icon={ globe }
-				title={ __( 'Dynamic Link', 'otter-blocks' ) }
-				onClick={ () => setOpen( true ) }
-				isDisabled={ isActive }
-				isActive={ isActive }
-			/>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						icon={ link }
+						title={ __( 'Dynamic Link', 'otter-blocks' ) }
+						onClick={ () => setOpen( true ) }
+						isDisabled={ isActive }
+						isActive={ isActive }
+						className="o-dynamic-button"
+					/>
+				</ToolbarGroup>
+			</BlockControls>
 
 			{ isOpen && (
 				<Modal

diff --git a/src/blocks/plugins/dynamic-content/value/edit.js b/src/blocks/plugins/dynamic-content/value/edit.js
@@ -8,9 +8,13 @@ import { globe } from '@wordpress/icons';
  */
 import { __ } from '@wordpress/i18n';
 
-import { RichTextToolbarButton } from '@wordpress/block-editor';
+import { BlockControls } from '@wordpress/block-editor';
 
-import { Modal } from '@wordpress/components';
+import {
+	Modal,
+	ToolbarButton,
+	ToolbarGroup
+} from '@wordpress/components';
 
 import { useSelect } from '@wordpress/data';
 
@@ -109,13 +113,18 @@ const Edit = ({
 
 	return (
 		<Fragment>
-			<RichTextToolbarButton
-				icon={ globe }
-				title={ __( 'Dynamic Value', 'otter-blocks' ) }
-				onClick={ () => setOpen( true ) }
-				isDisabled={ isActive }
-				isActive={ isActive }
-			/>
+			<BlockControls>
+				<ToolbarGroup>
+					<ToolbarButton
+						icon={ globe }
+						title={ __( 'Dynamic Value', 'otter-blocks' ) }
+						onClick={ () => setOpen( true ) }
+						isDisabled={ isActive }
+						isActive={ isActive }
+						className="o-dynamic-button"
+					/>
+				</ToolbarGroup>
+			</BlockControls>
 
 			{ isOpen && (
 				<Modal