Add Title mixin logic and sync it with paragraph blocks

Author: Cocola

src/scss/abstract/_mixins.scss

@@ -248,4 +248,58 @@
         backface-visibility: hidden;
     }
     perspective: $perspective;
+}
+
+//Title mixins
+@mixin title($size: md) {
+	font-weight: 700;
+	line-height: $heading-line-height;
+	font-family: $customfont-2;
+
+	.fonts-loading & {
+		font-family: $font-sansserif;
+	}
+
+	@if $size == XXL {
+		font-size: 40px;
+
+		@include breakpoints(sm) {
+			font-size: 40px*1.5;
+		}
+	}
+	@if $size == XL {
+		font-size: 36px;
+
+		@include breakpoints(sm) {
+			font-size: 36px*1.5;
+		}
+	}
+	@if $size == L {
+		font-size: 32px;
+
+		@include breakpoints(sm) {
+			font-size: 32px*1.5;
+		}
+	}
+	@if $size == M {
+		font-size: 28px;
+
+		@include breakpoints(sm) {
+			font-size: 28px*1.5;
+		}
+	}
+	@if $size == S {
+		font-size: 24px;
+
+		@include breakpoints(sm) {
+			font-size: 24px*1.5;
+		}
+	}
+	@if $size == XS {
+		font-size: 20px;
+
+		@include breakpoints(sm) {
+			font-size: 20*1.5;
+		}
+	}
 }

src/scss/base/_text.scss

@@ -48,16 +48,28 @@ a {
 
 /* Headings
 ----------------------------------------------------------------------------------------------------*/
-@for $i from 1 through 6 {
-	h#{$i} {
-		line-height: $heading-line-height;
-		font-size: $heading-font-size - ($i - 1) * 2px;
-		font-family: $customfont-2;
-
-		.fonts-loading & {
-			font-family: $font-sansserif;
-		}
-	}
+h1 {
+	@include title(XXL);
+}
+
+h2 {
+	@include title(XL);
+}
+
+h3 {
+	@include title(L);
+}
+
+h4 {
+	@include title(M);
+}
+
+h5 {
+	@include title(S);
+}
+
+h6 {
+	@include title(XS);
 }
 
 /* Lists

src/scss/wp/_gutenberg.scss

@@ -39,4 +39,20 @@
             }
         }
     }
+}
+
+//Paragraph
+p {
+    //H2 like style
+    &.has-huge-font-size {
+        @include title(XL);
+    }
+    //H3 like style
+    &.has-large-font-size {
+        @include title(L);
+    }
+    //H4 like style
+    &.has-medium-font-size {
+        @include title(M);
+    }
 }