diff --git a/src/blocks/plugins/dynamic-content/editor.scss b/src/blocks/plugins/dynamic-content/editor.scss index aebcf0e2a..3a15a9bcf 100644 --- 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 index 329de2e24..456b38893 100644 --- a/src/blocks/plugins/dynamic-content/link/edit.js +++ b/src/blocks/plugins/dynamic-content/link/edit.js @@ -1,7 +1,7 @@ /** * External dependencies. */ -import { globe } from '@wordpress/icons'; +import { link } from '@wordpress/icons'; /** * WordPress dependencies. @@ -99,11 +99,12 @@ const Edit = ({ setOpen( true ) } isDisabled={ isActive } isActive={ isActive } + className="o-dynamic-button" /> diff --git a/src/blocks/plugins/dynamic-content/value/edit.js b/src/blocks/plugins/dynamic-content/value/edit.js index e804e1dac..29cefc969 100644 --- a/src/blocks/plugins/dynamic-content/value/edit.js +++ b/src/blocks/plugins/dynamic-content/value/edit.js @@ -121,6 +121,7 @@ const Edit = ({ onClick={ () => setOpen( true ) } isDisabled={ isActive } isActive={ isActive } + className="o-dynamic-button" />