diff --git a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
index 34070cc3b9e..42c8b7d9121 100644
--- a/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
+++ b/addons/web_editor/static/src/js/wysiwyg/widgets/link_tools.js
@@ -41,6 +41,11 @@ export class LinkTools extends Link {
         'background-color': { colorNames: null },
         'border-color': { colorNames: null },
     };
+    state = useState({
+        showLinkSizeRow: true,
+        showLinkCustomColor: true,
+        showLinkShapeRow: true,
+    });
 
     setup() {
         super.setup(...arguments);
@@ -264,13 +269,12 @@ export class LinkTools extends Link {
         if (el) {
             this.colorCombinationClass = el.dataset.value;
             // Hide the size option if the link is an unstyled anchor.
-            for (const rowEl of this.linkComponentWrapperRef.el.querySelectorAll('.link-size-row')) {
-                rowEl.classList.toggle('d-none', !this.colorCombinationClass);
-            }
-            // Show custom colors and shape only for Custom style.
-            for (const rowEl of this.linkComponentWrapperRef.el.querySelectorAll('.link-custom-color, .link-shape-row')) {
-                rowEl.classList.toggle('d-none', el.dataset.value !== 'custom');
-            }
+            this.state.showLinkSizeRow = Boolean(this.colorCombinationClass);
+
+            // // Show custom colors and shape only for Custom style.
+            this.state.showLinkCustomColor = el.dataset.value === 'custom';
+            this.state.showLinkShapeRow = el.dataset.value === 'custom';
+
             this.props.onColorCombinationClassChange(this.colorCombinationClass);
 
             this._updateColorpicker('color');
diff --git a/addons/web_editor/static/src/xml/wysiwyg.xml b/addons/web_editor/static/src/xml/wysiwyg.xml
index f3891722363..49de60343b0 100644
--- a/addons/web_editor/static/src/xml/wysiwyg.xml
+++ b/addons/web_editor/static/src/xml/wysiwyg.xml
@@ -151,7 +151,7 @@
                     </div>
                 </we-select>
             </we-row>
-            <we-row class="link-custom-color link-custom-color-text">
+            <we-row class="link-custom-color link-custom-color-text" t-att-class="{'d-none': !state.showLinkCustomColor}">
                 <we-select title="Color" class="o_we_user_value_widget o_we_so_color_palette o_we_sublevel_2">
                     <we-title>Text Color</we-title>
                     <div class="dropdown">
@@ -171,7 +171,7 @@
                     </div>
                 </we-select>
             </we-row>
-            <we-row class="link-custom-color link-custom-color-fill">
+            <we-row class="link-custom-color link-custom-color-fill" t-att-class="{'d-none': !state.showLinkCustomColor}">
                 <we-select title="Color" class="o_we_user_value_widget o_we_so_color_palette o_we_sublevel_2">
                     <we-title>Fill Color</we-title>
                     <div class="dropdown">
@@ -192,7 +192,7 @@
                     </div>
                 </we-select>
             </we-row>
-            <we-row class="link-custom-color link-custom-color-border o_we_sublevel_2">
+            <we-row class="link-custom-color link-custom-color-border o_we_sublevel_2" t-att-class="{'d-none': !state.showLinkCustomColor}">
                 <we-title>Border</we-title>
                 <div>
                     <we-input class="o_we_user_value_widget" title="Border Width">
@@ -235,7 +235,7 @@
                     </we-select>
                 </div>
             </we-row>
-            <we-row class="link-size-row">
+            <we-row class="link-size-row" t-att-class="{'d-none': !state.showLinkSizeRow}">
                 <we-select class="o_we_user_value_widget o_we_sublevel_2">
                     <we-title>Size</we-title>
                     <div>
@@ -261,7 +261,7 @@
                     </div>
                 </we-select>
             </we-row>
-            <we-row class="link-shape-row">
+            <we-row class="link-shape-row"  t-att-class="{'d-none': !state.showLinkShapeRow}">
                 <we-select class="o_we_user_value_widget o_we_sublevel_2">
                     <we-title>Shape</we-title>
                     <div>