feat(SLB-308 SLB-313): move the url field in the sidebar

AmazeeLabs · Apr 16, 2024 · d402145 · d402145
1 parent e925360
commit d402145
Showing 1 changed file with 60 additions and 54 deletions.
diff --git a/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx b/packages/drupal/gutenberg_blocks/src/blocks/cta.tsx
@@ -1,10 +1,11 @@
 import {
   // @ts-ignore
   __experimentalLinkControl as LinkControl,
+  InspectorControls,
   RichText,
 } from 'wordpress__block-editor';
 import { registerBlockType } from 'wordpress__blocks';
-import { ToggleControl } from 'wordpress__components';
+import { PanelBody, ToggleControl } from 'wordpress__components';
 import { compose, withState } from 'wordpress__compose';
 
 // @ts-ignore
@@ -58,60 +59,65 @@ registerBlockType('custom/cta', {
             setPlainTextAttribute(props, 'text', text);
           }}
         />
-        <LinkControl
-          value={{
-            url: props.attributes.url,
-            openInNewTab: props.attributes.openInNewTab,
-          }}
-          settings={{}}
-          // If you want to use a specific linkit profile for the suggestions,
-          // then you can do that by using the 'suggestionsQuery' property, like
-          // the one bellow, and change the 'subtype' property to the machine
-          // name of the linkit profile. By default, the 'gutenberg' profile
-          // is used. Of course, in this case, if the linkit profile can search
-          // through multiple entity types, then you'll have to set the value
-          // for 'data-entity-type' in the onChange() handler by yourself.
+        <InspectorControls>
+          <PanelBody title={__('CTA Link')}>
+            <LinkControl
+              value={{
+                url: props.attributes.url,
+                openInNewTab: props.attributes.openInNewTab,
+              }}
+              settings={{}}
+              // If you want to use a specific linkit profile for the suggestions,
+              // then you can do that by using the 'suggestionsQuery' property, like
+              // the one bellow, and change the 'subtype' property to the machine
+              // name of the linkit profile. By default, the 'gutenberg' profile
+              // is used. Of course, in this case, if the linkit profile can search
+              // through multiple entity types, then you'll have to set the value
+              // for 'data-entity-type' in the onChange() handler by yourself.
 
-          //suggestionsQuery={{
-          //  type: 'post',
-          //  subtype: 'gutenberg',
-          //}}
-          // @ts-ignore
-          onChange={(link) => {
-            props.setAttributes({
-              url: link.url,
-              'data-id': link.id,
-              'data-entity-type':
-                // At the moment, the silverback_gutenberg link autocomplete
-                // controller does not return the machine name of the entity
-                // type. Instead, it returns the human readable, translated,
-                // entity type label. We should refactor the LinkAutocomplete
-                // controller to return the machine name of the entity type, and
-                // then we can set the data-entity-type value more accurate.
-                // Right now, we just make a "guess" based on the the human
-                // readable label for English and German.
-                link.type.startsWith('Media') || link.type.startsWith('Medien')
-                  ? 'media'
-                  : link.type !== 'URL'
-                    ? 'node'
-                    : '',
-            });
-          }}
-        />
-        <ToggleControl
-          label={__('Open in new tab')}
-          help={
-            props.attributes.openInNewTab
-              ? __('Opens in a new tab.')
-              : __('Opens in the same tab.')
-          }
-          checked={props.attributes.openInNewTab}
-          onChange={(openInNewTab) => {
-            props.setAttributes({
-              openInNewTab,
-            });
-          }}
-        />
+              //suggestionsQuery={{
+              //  type: 'post',
+              //  subtype: 'gutenberg',
+              //}}
+              // @ts-ignore
+              onChange={(link) => {
+                props.setAttributes({
+                  url: link.url,
+                  'data-id': link.id,
+                  'data-entity-type':
+                    // At the moment, the silverback_gutenberg link autocomplete
+                    // controller does not return the machine name of the entity
+                    // type. Instead, it returns the human readable, translated,
+                    // entity type label. We should refactor the LinkAutocomplete
+                    // controller to return the machine name of the entity type, and
+                    // then we can set the data-entity-type value more accurate.
+                    // Right now, we just make a "guess" based on the the human
+                    // readable label for English and German.
+                    link.type.startsWith('Media') ||
+                    link.type.startsWith('Medien')
+                      ? 'media'
+                      : link.type !== 'URL'
+                        ? 'node'
+                        : '',
+                });
+              }}
+            />
+            <ToggleControl
+              label={__('Open in new tab')}
+              help={
+                props.attributes.openInNewTab
+                  ? __('Opens in a new tab.')
+                  : __('Opens in the same tab.')
+              }
+              checked={props.attributes.openInNewTab}
+              onChange={(openInNewTab) => {
+                props.setAttributes({
+                  openInNewTab,
+                });
+              }}
+            />
+          </PanelBody>
+        </InspectorControls>
       </div>
     );
   }),