feat: restyle popup link in Block Editor

Author: bobmitro

app/default-files/default-languages/en-gb/translations.json

@@ -381,7 +381,8 @@
         "linkInvalidMsg": "Sorry! This link seems to be invalid.",
         "linkRelAttribute": "Link \"rel\" attribute",
         "linkTitleAttribute": "Link \"title\" attribute",
-        "linkClassAttribute": "Link \"class\" attribute",
+        "linkClassAttribute": "CSS class",
+        "linkTarget": "Link target",
         "openInNewTab": "Open in new tab",
         "previewLinkInBrowser": "Preview this link in browser",
         "previewOnlyExternalLinksMsg": "You can only preview external links in the post editor",

app/default-files/default-languages/pl/translations.json

@@ -380,7 +380,8 @@
         "linkInvalidMsg": "Przepraszamy! Ten link wydaje się być nieprawidłowy.",
         "linkRelAttribute": "Atrybut \"rel\" linka",
         "linkTitleAttribute": "Atrybut \"title\" linka",
-        "linkClassAttribute": "Atrybut \"class\" linka",
+        "linkClassAttribute": "Klasa CSS",
+        "linkTarget": "Target linka",
         "openInNewTab": "Otwórz w nowej zakładce",
         "previewLinkInBrowser": "Wyświetl podgląd tego linku w przeglądarce",
         "previewOnlyExternalLinksMsg": "W edytorze wpisów możesz wyświetlić podgląd tylko linków zewnętrznych",

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

@@ -94,35 +94,54 @@
         :spellcheck="false"
         placeholder="https://example.com"
         @keyup.enter="save()" />
-      <input
-        type="text"
-        class="block-link-popup-link-title"
-        v-model="link.title"
-        :spellcheck="false"
-        placeholder="Title" />
-      <input
-        type="text"
-        class="block-link-popup-link-css-class"
-        v-model="link.cssClass"
-        :spellcheck="false"
-        placeholder="CSS class" />
-      <div class="block-link-popup-link-switcher">
-        <switcher
-          v-model="link.targetBlank" />
-          {{ $t('link.openInNewTab') }}
-      </div>
-
-      <div
-        v-if="linkType === 'file'"
-        class="block-link-popup-link-switcher">
-        <switcher v-model="link.download" /> {{ $t('link.addDownloadAttr') }}
-      </div>
-
-      <div class="block-link-popup-link-switcher">
-        <switcher v-model="link.noFollow" /> {{ $t('link.addNofollow') }}
-        <switcher v-model="link.sponsored"/> rel="sponsored"
-        <switcher v-model="link.ugc" /> rel="ugc"
-      </div>
+      <field 
+        :label="$t('link.linkTitleAttribute')">
+          <input
+            slot="field"
+            type="text"
+            class="block-link-popup-link-title"
+            v-model="link.title"
+            :spellcheck="false" />
+      </field>
+      <field 
+        :label="$t('link.linkClassAttribute')">
+          <input
+            slot="field"
+            type="text"
+            class="block-link-popup-link-css-class"
+            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')">
+        <switcher 
+          slot="field" 
+          v-model="link.download" /> 
+      </field>
+
+      <field 
+        :label="$t('link.linkRelAttribute')">
+        <switcher 
+           slot="field" 
+           label="nofollow"
+           v-model="link.noFollow" /> 
+        <switcher 
+           slot="field" 
+           label="sponsored"
+           v-model="link.sponsored"/> 
+        <switcher 
+           slot="field" 
+           label="ugc"
+           v-model="link.ugc" /> 
+      </field>
 
       <div class="block-link-popup-buttons">
         <button @click.stop="save()">