Register font size values to be used on the font picker.

src/assets/js/js.js

@@ -203,7 +203,7 @@ jQuery( document ).ready(function( $ ) {
 		return false;
 	});
 	
-	$('.margin-pagination .navigation.pagination[role="navigation"]').addClass('justify-content-center justify-content-md-end');
+	$('.margin-pagination .navigation.pagination').addClass('justify-content-center justify-content-md-end');
 
 	$(document).on('click', '[data-toggle="lightbox"]', function(event) {
 		event.preventDefault();

src/assets/scss/_variables.scss

@@ -3,4 +3,8 @@
     --tainacan-interface--link-color: #298596;
     --tainacan-interface--tooltip-color: #e6f6f8;
     --tainacan-block-primary: var(--tainacan-interface--link-color, #298596);
+    --wp--preset--font-size--small: 14px;
+    --wp--preset--font-size--regular: 16px;
+    --wp--preset--font-size--large: 18px;
+    --wp--preset--font-size--huge: 24px;
 }

src/assets/scss/editor-style.scss

@@ -3,6 +3,11 @@
 .editor-styles-wrapper {
     background: white;
     padding: 3rem 0px 0px 0px !important;
+    font-size: 1rem !important;
+    --wp--preset--font-size--small: 14px !important;
+    --wp--preset--font-size--regular: 16px !important;
+    --wp--preset--font-size--large: 18px !important;
+    --wp--preset--font-size--huge: 24px !important;
 }
 .block-editor-block-preview__content {
     font-family: 'Roboto', sans-serif;
@@ -228,7 +233,6 @@
         color: inherit;
     }
 
-
     /* Buttons */
     .components-button.is-button {
         border: none;
@@ -368,26 +372,27 @@
         color: inherit;
     }
 
-    /* Modal container */
+    /* From WP version 5.9 on, we decided to remove this styling because it can cause too many conflicts */
-    .wp-block-tainacan-modal .components-modal__content {
+    // /* Modal container */
-        padding: 32px;
+    // .wp-block-tainacan-modal .components-modal__content {
-        overflow: hidden;
+    //     padding: 32px;
-    }
+    //     overflow: hidden;
+    // }
 
-    /* Modal Header */
+    // /* Modal Header */
-    .wp-block-tainacan-modal .components-modal__header {
+    // .wp-block-tainacan-modal .components-modal__header {
-        height: 32px;
+    //     height: 32px;
-        margin: 0 12px 32px 12px;
+    //     margin: 0 12px 32px 12px;
-        padding: 0;
+    //     padding: 0;
-        border-bottom: 1px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
+    //     border-bottom: 1px solid var(--tainacan-color-default, var(--tainacan-interface--link-color, #298596));
 
-        .components-modal__header-heading,
+    //     .components-modal__header-heading,
-        h1 {
+    //     h1 {
-            font-size: 1.125rem;
+    //         font-size: 1.125rem;
-            font-weight: 500;
+    //         font-weight: 500;
-            color: #555758;
+    //         color: #555758;
-        }
+    //     }
-    }
+    // }
 
     /* Blockquote */
     .wp-block-quote {
@@ -491,48 +496,6 @@
         font-size: 0.875rem;
     }
 
-    /* Tainacan Selection Modal */
-    .wp-block-tainacan-modal.dynamic-modal {
-
-        iframe {
-            width: calc(100% + 64px);
-            height: calc(100% - 104px);
-            margin-left: -32px;
-            margin-bottom: 0px;
-        }
-
-        .modal-footer-area {
-            height: 72px;
-            width: calc(100% + 64px);
-            margin-left: -32px !important;
-            margin-bottom: -32px !important;
-            padding: 1.2rem 3rem !important;
-            border-top: 1px solid #898d8f;
-        }
-    }
-    .wp-block-tainacan-modal .modal-footer-area{
-        margin: 0;
-        border: none;
-        padding-top: 0px;
-    }
-    .wp-block-tainacan-modal .modal-search-area {
-        padding: 0 14px;
-
-        .components-base-control {
-            width: 100%;
-
-            .components-base-control__field {
-                display: flex;
-                align-items: center;
-
-                label{
-                    flex-shrink: 0;
-                    margin-right: 12px;
-                }
-            }
-        }
-    }
-
     /* Extra title group class, that can be added for styling special headings */
     .wp-block-group.tainacan-group-heading {
         .wp-block-heading {

src/assets/scss/style.scss

@@ -15,10 +15,15 @@ Text Domain: tainacan-interface
 
 @import '_variables';
 
-body{
+body {
     font-family: 'Roboto' !important;
     overflow-x: hidden;
-    a{
+    --wp--preset--font-size--small: 14px;
+    --wp--preset--font-size--regular: 16px;
+    --wp--preset--font-size--large: 18px;
+    --wp--preset--font-size--huge: 24px;
+
+    a {
         color: var(--tainacan-interface--link-color, #298596);
         &:hover{
             color: var(--tainacan-interface--link-color, #298596);

src/functions.php

@@ -169,6 +169,28 @@ if ( ! function_exists( 'tainacan_setup' ) ) {
 		add_theme_support( 'align-wide' );
 		add_theme_support( 'custom-line-height' );
 		add_theme_support( 'custom-units' );
+		add_theme_support( 'editor-font-sizes', array(
+			array(
+				'name' => esc_attr__( 'Small', 'tainacan-interface' ),
+				'size' => 14,
+				'slug' => 'small'
+			),
+			array(
+				'name' => esc_attr__( 'Regular', 'tainacan-interface' ),
+				'size' => 16,
+				'slug' => 'regular'
+			),
+			array(
+				'name' => esc_attr__( 'Large', 'tainacan-interface' ),
+				'size' => 18,
+				'slug' => 'large'
+			),
+			array(
+				'name' => esc_attr__( 'Huge', 'tainacan-interface' ),
+				'size' => 24,
+				'slug' => 'huge'
+			)
+		) );
 		add_theme_support( 'editor-style' );
 		add_editor_style( 'editor-style.css' );
 

src/functions/customizer/header-general.php

@@ -215,6 +215,7 @@ function tainacan_header_settings_style_output() {
 		}
 		body.admin-bar nav.navbar {
 			top: 32px;
+			top: var(--wp-admin--admin-bar--height, 32px);
 		}'
 		: '');