@wordpress/edit-site 5.18.1-next.5a1d1283.0 → 5.19.1

package/build-module/utils/template-part-create.js.map

@@ -1 +1 @@
-{"version":3,"names":["paramCase","kebabCase","useSelect","store","coreStore","useExistingTemplateParts","select","getEntityRecords","per_page","getUniqueTemplatePartTitle","title","templateParts","lowercaseTitle","toLowerCase","existingTitles","map","templatePart","rendered","includes","suffix","getCleanTemplatePartSlug","replace"],"sources":["@wordpress/edit-site/src/utils/template-part-create.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\nexport const useExistingTemplateParts = () => {\n\treturn useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecords(\n\t\t\t\t'postType',\n\t\t\t\t'wp_template_part',\n\t\t\t\t{\n\t\t\t\t\tper_page: -1,\n\t\t\t\t}\n\t\t\t),\n\t\t[]\n\t);\n};\n\n/**\n * Return a unique template part title based on\n * the given title and existing template parts.\n *\n * @param {string} title         The original template part title.\n * @param {Object} templateParts The array of template part entities.\n * @return {string} A unique template part title.\n */\nexport const getUniqueTemplatePartTitle = ( title, templateParts ) => {\n\tconst lowercaseTitle = title.toLowerCase();\n\tconst existingTitles = templateParts.map( ( templatePart ) =>\n\t\ttemplatePart.title.rendered.toLowerCase()\n\t);\n\n\tif ( ! existingTitles.includes( lowercaseTitle ) ) {\n\t\treturn title;\n\t}\n\n\tlet suffix = 2;\n\twhile ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {\n\t\tsuffix++;\n\t}\n\n\treturn `${ title } ${ suffix }`;\n};\n\n/**\n * Get a valid slug for a template part.\n * Currently template parts only allow latin chars.\n * The fallback slug will receive suffix by default.\n *\n * @param {string} title The template part title.\n * @return {string} A valid template part slug.\n */\nexport const getCleanTemplatePartSlug = ( title ) => {\n\treturn kebabCase( title ).replace( /[^\\w-]+/g, '' ) || 'wp-custom-part';\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,IAAIC,SAAS,QAAQ,aAAa;;AAEpD;AACA;AACA;AACA,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;AAEzD,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;EAC7C,OAAOH,SAAS,CACbI,MAAM,IACPA,MAAM,CAAEF,SAAU,CAAC,CAACG,gBAAgB,CACnC,UAAU,EACV,kBAAkB,EAClB;IACCC,QAAQ,EAAE,CAAC;EACZ,CACD,CAAC,EACF,EACD,CAAC;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGA,CAAEC,KAAK,EAAEC,aAAa,KAAM;EACrE,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,CAAC,CAAC;EAC1C,MAAMC,cAAc,GAAGH,aAAa,CAACI,GAAG,CAAIC,YAAY,IACvDA,YAAY,CAACN,KAAK,CAACO,QAAQ,CAACJ,WAAW,CAAC,CACzC,CAAC;EAED,IAAK,CAAEC,cAAc,CAACI,QAAQ,CAAEN,cAAe,CAAC,EAAG;IAClD,OAAOF,KAAK;EACb;EAEA,IAAIS,MAAM,GAAG,CAAC;EACd,OAAQL,cAAc,CAACI,QAAQ,CAAG,GAAGN,cAAgB,IAAIO,MAAQ,EAAE,CAAC,EAAG;IACtEA,MAAM,EAAE;EACT;EAEA,OAAQ,GAAGT,KAAO,IAAIS,MAAQ,EAAC;AAChC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAKV,KAAK,IAAM;EACpD,OAAOT,SAAS,CAAES,KAAM,CAAC,CAACW,OAAO,CAAE,UAAU,EAAE,EAAG,CAAC,IAAI,gBAAgB;AACxE,CAAC"}
+{"version":3,"names":["paramCase","kebabCase","useSelect","store","coreStore","TEMPLATE_PART_POST_TYPE","useExistingTemplateParts","select","getEntityRecords","per_page","getUniqueTemplatePartTitle","title","templateParts","lowercaseTitle","toLowerCase","existingTitles","map","templatePart","rendered","includes","suffix","getCleanTemplatePartSlug","replace"],"sources":["@wordpress/edit-site/src/utils/template-part-create.js"],"sourcesContent":["/**\n * External dependencies\n */\nimport { paramCase as kebabCase } from 'change-case';\n\n/**\n * WordPress dependencies\n */\nimport { useSelect } from '@wordpress/data';\nimport { store as coreStore } from '@wordpress/core-data';\n\n/**\n * Internal dependencies\n */\nimport { TEMPLATE_PART_POST_TYPE } from './constants';\n\nexport const useExistingTemplateParts = () => {\n\treturn useSelect(\n\t\t( select ) =>\n\t\t\tselect( coreStore ).getEntityRecords(\n\t\t\t\t'postType',\n\t\t\t\tTEMPLATE_PART_POST_TYPE,\n\t\t\t\t{\n\t\t\t\t\tper_page: -1,\n\t\t\t\t}\n\t\t\t),\n\t\t[]\n\t);\n};\n\n/**\n * Return a unique template part title based on\n * the given title and existing template parts.\n *\n * @param {string} title         The original template part title.\n * @param {Object} templateParts The array of template part entities.\n * @return {string} A unique template part title.\n */\nexport const getUniqueTemplatePartTitle = ( title, templateParts ) => {\n\tconst lowercaseTitle = title.toLowerCase();\n\tconst existingTitles = templateParts.map( ( templatePart ) =>\n\t\ttemplatePart.title.rendered.toLowerCase()\n\t);\n\n\tif ( ! existingTitles.includes( lowercaseTitle ) ) {\n\t\treturn title;\n\t}\n\n\tlet suffix = 2;\n\twhile ( existingTitles.includes( `${ lowercaseTitle } ${ suffix }` ) ) {\n\t\tsuffix++;\n\t}\n\n\treturn `${ title } ${ suffix }`;\n};\n\n/**\n * Get a valid slug for a template part.\n * Currently template parts only allow latin chars.\n * The fallback slug will receive suffix by default.\n *\n * @param {string} title The template part title.\n * @return {string} A valid template part slug.\n */\nexport const getCleanTemplatePartSlug = ( title ) => {\n\treturn kebabCase( title ).replace( /[^\\w-]+/g, '' ) || 'wp-custom-part';\n};\n"],"mappings":"AAAA;AACA;AACA;AACA,SAASA,SAAS,IAAIC,SAAS,QAAQ,aAAa;;AAEpD;AACA;AACA;AACA,SAASC,SAAS,QAAQ,iBAAiB;AAC3C,SAASC,KAAK,IAAIC,SAAS,QAAQ,sBAAsB;;AAEzD;AACA;AACA;AACA,SAASC,uBAAuB,QAAQ,aAAa;AAErD,OAAO,MAAMC,wBAAwB,GAAGA,CAAA,KAAM;EAC7C,OAAOJ,SAAS,CACbK,MAAM,IACPA,MAAM,CAAEH,SAAU,CAAC,CAACI,gBAAgB,CACnC,UAAU,EACVH,uBAAuB,EACvB;IACCI,QAAQ,EAAE,CAAC;EACZ,CACD,CAAC,EACF,EACD,CAAC;AACF,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,0BAA0B,GAAGA,CAAEC,KAAK,EAAEC,aAAa,KAAM;EACrE,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,CAAC,CAAC;EAC1C,MAAMC,cAAc,GAAGH,aAAa,CAACI,GAAG,CAAIC,YAAY,IACvDA,YAAY,CAACN,KAAK,CAACO,QAAQ,CAACJ,WAAW,CAAC,CACzC,CAAC;EAED,IAAK,CAAEC,cAAc,CAACI,QAAQ,CAAEN,cAAe,CAAC,EAAG;IAClD,OAAOF,KAAK;EACb;EAEA,IAAIS,MAAM,GAAG,CAAC;EACd,OAAQL,cAAc,CAACI,QAAQ,CAAG,GAAGN,cAAgB,IAAIO,MAAQ,EAAE,CAAC,EAAG;IACtEA,MAAM,EAAE;EACT;EAEA,OAAQ,GAAGT,KAAO,IAAIS,MAAQ,EAAC;AAChC,CAAC;;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,OAAO,MAAMC,wBAAwB,GAAKV,KAAK,IAAM;EACpD,OAAOV,SAAS,CAAEU,KAAM,CAAC,CAACW,OAAO,CAAE,UAAU,EAAE,EAAG,CAAC,IAAI,gBAAgB;AACxE,CAAC"}

package/build-style/style-rtl.css

@@ -475,7 +475,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: none;
   margin: 0;
 }
-.interface-pinned-items .components-button:nth-last-child(1), .interface-pinned-items .components-button:nth-last-child(2) {
+.interface-pinned-items .components-button[aria-controls="edit-post:document"], .interface-pinned-items .components-button[aria-controls="edit-post:block"], .interface-pinned-items .components-button[aria-controls="edit-site:template"], .interface-pinned-items .components-button[aria-controls="edit-site:block-inspector"], .interface-pinned-items .components-button[aria-controls="edit-site:global-styles"] {
   display: flex;
 }
 .interface-pinned-items .components-button svg {
@@ -787,6 +787,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   display: block;
   width: 100%;
   height: 100%;
+  background: #fff;
 }
 .edit-site-visual-editor .edit-site-visual-editor__editor-canvas {
   height: 100%;
@@ -819,7 +820,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   	See: https://github.com/WordPress/gutenberg/issues/40450
   */
 }
-.edit-site-visual-editor.is-view-mode .block-editor-block-contextual-toolbar {
+.edit-site-visual-editor.is-view-mode .block-editor-block-contextual-toolbar.is-fixed {
   display: none;
 }
 
@@ -908,6 +909,98 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
 }
 
+.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  /* Set left position when auto-fold is not on the body element. */
+  right: 0;
+}
+@media (min-width: 783px) {
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    right: 160px;
+  }
+}
+
+.auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  /* Auto fold is when on smaller breakpoints, nav menu auto collapses. */
+}
+@media (min-width: 783px) {
+  .auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    right: 36px;
+  }
+}
+@media (min-width: 961px) {
+  .auto-fold .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    right: 160px;
+  }
+}
+
+/* Sidebar manually collapsed. */
+.folded .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  right: 0;
+}
+@media (min-width: 783px) {
+  .folded .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    right: 36px;
+  }
+}
+
+body.is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  right: 0 !important;
+}
+
+.edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+  position: sticky;
+  top: 0;
+  z-index: 31;
+  display: block;
+  width: 100%;
+}
+@media (min-width: 782px) {
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 180px;
+    position: fixed;
+    top: 32px;
+    min-height: initial;
+    display: flex;
+    height: 60px;
+    align-items: center;
+    width: calc(100% - 180px);
+  }
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+  }
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 240px;
+    top: 0;
+  }
+  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed.is-collapsed {
+    width: initial;
+  }
+  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed:empty {
+    width: initial;
+  }
+  .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 80px;
+    width: calc(100% + 40px - 180px);
+  }
+  .is-fullscreen-mode .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    margin-right: 144px;
+  }
+}
+@media (min-width: 960px) {
+  .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .show-icon-labels .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: auto;
+  }
+  .is-fullscreen-mode .edit-site-visual-editor .block-editor-block-contextual-toolbar.is-fixed {
+    width: calc(100% - 280px - 256px);
+  }
+}
+
 .edit-site-canvas-loader {
   width: 100%;
   height: 100%;
@@ -918,7 +1011,7 @@ body.is-fullscreen-mode .interface-interface-skeleton {
   opacity: 0;
   align-items: center;
   justify-content: center;
-  animation: 0.5s ease 1s edit-site-canvas-loader__fade-in-animation;
+  animation: 0.5s ease 0.2s edit-site-canvas-loader__fade-in-animation;
   animation-fill-mode: forwards;
 }
 @media (prefers-reduced-motion: reduce) {
@@ -1728,6 +1821,9 @@ body.is-fullscreen-mode .edit-site-list-header {
   }
 }
 
+.edit-site-list__rename-modal {
+  z-index: 1000001;
+}
 @media (min-width: 782px) {
   .edit-site-list__rename-modal .components-base-control {
     width: 320px;
@@ -2020,9 +2116,6 @@ body.is-fullscreen-mode .edit-site-list-header {
   fill: #fff;
 }
 .edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon {
-  display: inline-flex;
-}
-.edit-site-patterns__pattern-title .edit-site-patterns__pattern-lock-icon svg {
   fill: currentcolor;
 }
 
@@ -2167,15 +2260,34 @@ body.is-fullscreen-mode .edit-site-list-header {
   box-sizing: content-box;
 }
 
-.edit-site-page-panels__edit-template-preview {
-  border: 1px solid #e0e0e0;
-  height: 200px;
-  max-height: 200px;
-  overflow: hidden;
+.edit-site-swap-template-modal {
+  z-index: 1000001;
 }
 
-.edit-site-page-panels__edit-template-button {
-  justify-content: center;
+.edit-site-page-panels__swap-template__confirm-modal__actions {
+  margin-top: 24px;
+}
+
+.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
+  column-count: 2;
+  column-gap: 24px;
+  padding-top: 2px;
+}
+@media (min-width: 782px) {
+  .edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
+    column-count: 3;
+  }
+}
+@media (min-width: 1280px) {
+  .edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list {
+    column-count: 4;
+  }
+}
+.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__list-item {
+  break-inside: avoid-column;
+}
+.edit-site-page-panels__swap-template__modal-content .block-editor-block-patterns-list .block-editor-block-patterns-list__item:not(:focus):not(:hover) .block-editor-block-preview__container {
+  box-shadow: 0 0 0 1px #ddd;
 }
 
 .edit-site-change-status__content .components-popover__content {
@@ -2195,15 +2307,24 @@ body.is-fullscreen-mode .edit-site-list-header {
 }
 
 .edit-site-summary-field .components-dropdown {
-  flex-grow: 1;
+  width: 70%;
 }
 .edit-site-summary-field .edit-site-summary-field__trigger {
-  width: 100%;
+  max-width: 100%;
+  display: block;
+  text-align: right;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 .edit-site-summary-field .edit-site-summary-field__label {
   width: 30%;
 }
 
+.edit-site-page-panels-edit-template__dropdown .components-popover__content {
+  min-width: 240px;
+}
+
 .components-panel__header.edit-site-sidebar-edit-mode__panel-tabs {
   justify-content: flex-start;
   padding-right: 0;
@@ -3187,10 +3308,13 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar__notice.is-dismissible {
   padding-left: 8px;
 }
+.edit-site-sidebar__notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]) {
+  color: #ccc;
+}
 .edit-site-sidebar__notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):focus,
 .edit-site-sidebar__notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):active,
 .edit-site-sidebar__notice .components-notice__dismiss:not(:disabled):not([aria-disabled=true]):not(.is-secondary):hover {
-  color: #f0f0f0;
+  color: #fff;
 }
 
 /* In general style overrides are discouraged.
@@ -3211,6 +3335,7 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
 .edit-site-sidebar-navigation-screen__input-control .components-input-control__input {
   color: #e0e0e0 !important;
   background: #2f2f2f !important;
+  border-radius: 2px;
 }
 .edit-site-sidebar-navigation-screen__input-control .components-input-control__backdrop {
   border: 4px !important;
@@ -3219,20 +3344,14 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #949494;
 }
 
-.edit-site-sidebar-navigation-screen-details-footer {
-  padding-top: 8px;
-  padding-bottom: 8px;
-  padding-right: 16px;
-}
-
-.edit-site-sidebar-navigation-screen-global-styles__revisions {
-  border-radius: 2px;
-}
-.edit-site-sidebar-navigation-screen-global-styles__revisions:not(:hover) {
-  color: #e0e0e0;
+.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:focus,
+.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item:hover,
+.edit-site-sidebar-navigation-screen-details-footer div.edit-site-sidebar-navigation-item.components-item[aria-current] {
+  background: none;
 }
-.edit-site-sidebar-navigation-screen-global-styles__revisions:not(:hover) .edit-site-sidebar-navigation-screen-global-styles__revisions__label {
-  color: #949494;
+.edit-site-sidebar-navigation-screen-details-footer .edit-site-sidebar-navigation-screen-details-footer__icon {
+  margin-right: auto;
+  fill: #949494;
 }
 
 .sidebar-navigation__more-menu .components-button {
@@ -3351,10 +3470,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   margin-left: 8px;
 }
 
-.edit-site-sidebar-navigation-screen-pattern__lock-icon {
-  display: inline-flex;
-}
-
 .edit-site-sidebar-navigation-screen-patterns__group {
   margin-bottom: 24px;
 }
@@ -3559,10 +3674,6 @@ body.is-fullscreen-mode .edit-site .components-editor-notices__snackbar {
   color: #fff;
 }
 
-.edit-site-sidebar-navigation-screen-navigation-menus__content .popover-slot .wp-block-navigation-submenu {
-  display: none;
-}
-
 .edit-site-sidebar-navigation-screen-navigation-menus__loading.components-spinner {
   margin-right: auto;
   margin-left: auto;
@@ -3700,6 +3811,125 @@ body:has(.edit-site-resizable-frame__inner.is-resizing) {
   width: 100%;
 }
 
+@media (min-width: 782px) {
+  .font-library-modal.font-library-modal {
+    width: 65vw;
+  }
+}
+.font-library-modal .components-modal__header {
+  border-bottom: none;
+}
+.font-library-modal .components-modal__content {
+  padding-top: 0;
+}
+.font-library-modal .font-library-modal__subtitle {
+  text-transform: uppercase;
+  font-weight: 500;
+  font-size: 11px;
+}
+
+.font-library-modal__tab-layout main {
+  padding-bottom: 4rem;
+}
+.font-library-modal__tab-layout footer {
+  border-top: 1px solid #e5e5e5;
+  margin: 0 -32px -32px;
+  padding: 16px 32px;
+  position: absolute;
+  bottom: 32px;
+  width: 100%;
+  background-color: #fff;
+}
+
+.font-library-modal__fonts-grid .font-library-modal__fonts-grid__main {
+  display: flex;
+  flex-direction: column;
+}
+
+.font-library-modal__font-card {
+  border: 1px solid #e5e5e5;
+  height: auto;
+  padding: 1rem;
+  margin-top: -1px;
+  /* To collapse the margin with the previous element */
+}
+.font-library-modal__font-card .font-library-modal__font-card__name {
+  font-weight: bold;
+}
+.font-library-modal__font-card .font-library-modal__font-card__count {
+  color: #6e6e6e;
+}
+
+.font-library-modal__library-font-variant {
+  border: 1px solid #e5e5e5;
+  padding: 1rem;
+  margin-top: -1px;
+  /* To collapse the margin with the previous element */
+}
+
+.font-library-modal__font-variant {
+  border-bottom: 1px solid #e5e5e5;
+  padding-bottom: 1rem;
+}
+
+.font-library-modal__tab-panel [role=tablist] {
+  position: sticky;
+  top: 0;
+  width: calc(100% + 64px);
+  border-bottom: 1px solid #e6e6e6;
+  background: #fff;
+  margin: 0 -32px;
+  padding: 0 16px;
+  z-index: 1;
+}
+
+.font-library-modal__upload-area {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  height: 100px;
+  width: 100%;
+  background-color: #f0f0f0;
+}
+
+.font-library-modal__font-name {
+  font-weight: bold;
+}
+
+.font-library-modal__font-filename {
+  color: #6e6e6e;
+}
+
+.font-library-modal__font-variant_demo-wrapper {
+  white-space: nowrap;
+  overflow: hidden;
+  width: 100%;
+  position: relative;
+}
+.font-library-modal__font-variant_demo-wrapper::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 30vw;
+  height: 100%;
+  background: linear-gradient(to left, rgba(255, 255, 255, 0), white);
+}
+
+.font-library__google-fonts-confirm {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.font-library__google-fonts-confirm h3 {
+  font-size: 1.4rem;
+}
+.font-library__google-fonts-confirm .components-card {
+  width: 50%;
+  min-width: 250px;
+  max-width: 350px;
+}
+
 body.js #wpadminbar {
   display: none;
 }