fix: improved UI for block link popup (#869ak4k6x)

Author: dziudek

app/back-end/builddata.json

@@ -1,4 +1,4 @@
 {
   "version": "0.46.5",
-  "build": 17284
+  "build": 17290
 }

app/src/components/block-editor/components/BlockLinkPopup.vue

@@ -37,6 +37,7 @@
           {{ $t('file.file') }}
         </div>
       </div>
+
       <vue-select
         v-if="linkType === 'post'"
         slot="field"
@@ -47,6 +48,7 @@
         :close-on-select="true"
         :show-labels="false"
         :placeholder="$t('post.selectPostPage')"></vue-select>
+
       <vue-select
         v-if="linkType === 'page'"
         slot="field"
@@ -57,6 +59,7 @@
         :close-on-select="true"
         :show-labels="false"
         :placeholder="$t('page.selectPage')"></vue-select>
+
       <vue-select
         v-if="linkType === 'tag'"
         slot="field"
@@ -67,6 +70,7 @@
         :close-on-select="true"
         :show-labels="false"
         :placeholder="$t('tag.selectTagPage')"></vue-select>
+
       <vue-select
         v-if="linkType === 'author'"
         slot="field"
@@ -77,6 +81,7 @@
         :close-on-select="true"
         :show-labels="false"
         :placeholder="$t('author.selectAuthorPage')"></vue-select>
+
       <vue-select
         v-if="linkType === 'file'"
         slot="field"
@@ -86,6 +91,7 @@
         :close-on-select="true"
         :show-labels="false"
         :placeholder="$t('file.selectFileFromFileManager')"></vue-select>
+
       <input
         v-if="linkType === 'external'"
         type="text"
@@ -94,6 +100,7 @@
         :spellcheck="false"
         placeholder="https://example.com"
         @keyup.enter="save()" />
+
       <field 
         :label="$t('link.linkTitleAttribute')">
           <input
@@ -103,6 +110,7 @@
             v-model="link.title"
             :spellcheck="false" />
       </field>
+
       <field 
         :label="$t('link.linkClassAttribute')">
           <input
@@ -112,13 +120,15 @@
             v-model="link.cssClass"
             :spellcheck="false" />
       </field>
+
       <field 
         :label="$t('link.linkTarget')">
         <switcher 
           slot="field" 
           :label="$t('link.openInNewTab')"
           v-model="link.targetBlank" /> 
       </field>
+
       <field
         v-if="linkType === 'file'" 
         :label="$t('link.downloadAttribute')">
@@ -133,10 +143,12 @@
            slot="field" 
            label="nofollow"
            v-model="link.noFollow" /> 
+           
         <switcher 
            slot="field" 
            label="sponsored"
            v-model="link.sponsored"/> 
+
         <switcher 
            slot="field" 
            label="ugc"

app/src/components/block-editor/components/elements/Switcher.vue

@@ -1,7 +1,13 @@
 <template>
-  <span
-    :class="cssClasses"
-    @click="toggle"></span>
+  <span :class="{ 
+    'switcher-wrapper': true,
+    'has-label': !!label
+  }">
+    <span
+      :class="cssClasses"
+      @click="toggle"></span>
+    {{ label }}
+  </span>
 </template>
 
 <script>
@@ -23,6 +29,10 @@ export default {
       default: () => false,
       type: Function
     },
+    label: {
+        default: '',
+        type: String
+    },
     disabled: {
       default: false,
       type: Boolean
@@ -87,6 +97,14 @@ export default {
   width: 32px;
   z-index: 1;
 
+  &-wrapper {
+    display: inline-flex;
+
+    &.has-label {
+      padding-right: 1rem;
+    }
+  }
+
   &.lower-zindex {
     z-index: 0;
   }