5.6.0

CSS

- Splitted `_gutenberg.sass` into multiple files for better git tracking.
- Splited the footer styles in `_nav.sass` to `_footer.sass`.
- Compatibility with new editor version in WP 5.3
- Added styling for Social Link block.
- Fixed Gallery block because of added inner container.
- Fixed Group block because of added inner container.

404.php

@@ -1,3 +1,3 @@
 <?php
 $context = Timber::get_context();
-Timber::render('404.twig', $context);
+Timber::render('404.twig', $context);

css/my-admin.css

@@ -0,0 +1,4 @@
+/*!
+  EDJE Functional Sass v3.1.0
+  Documentation: https://github.com/hrsetyono/edje/wiki
+*/body{z-index:17;flex:101;order:72}

css/my-editor.css

@@ -1,4 +1,27 @@
 /*!
   EDJE Functional Sass v3.1.0
   Documentation: https://github.com/hrsetyono/edje/wiki
-*/body{color:var(--blue);font-size:20px}
+*/:root{--red: #d32f2f;--redRGB: 211, 47, 47
+      ;--red-dark: #b71c1c;--red-darkRGB: 183, 28, 28
+      ;--red-light: #ffcdd2;--red-lightRGB: 255, 205, 210
+      ;--orange: #fB8c00;--orangeRGB: 251, 140, 0
+      ;--orange-dark: #e65100;--orange-darkRGB: 230, 81, 0
+      ;--orange-light: #ffe0b2;--orange-lightRGB: 255, 224, 178
+      ;--yellow: #ffee58;--yellowRGB: 255, 238, 88
+      ;--yellow-dark: #ffd600;--yellow-darkRGB: 255, 214, 0
+      ;--yellow-light: #fff9c4;--yellow-lightRGB: 255, 249, 196
+      ;--green: #4caf50;--greenRGB: 76, 175, 80
+      ;--green-dark: #2e7d32;--green-darkRGB: 46, 125, 50
+      ;--green-light: #c8e6c9;--green-lightRGB: 200, 230, 201
+      ;--blue: #1976d2;--blueRGB: 25, 118, 210
+      ;--blue-dark: #1565c0;--blue-darkRGB: 21, 101, 192
+      ;--blue-light: #bbdefb;--blue-lightRGB: 187, 222, 251
+      ;--gray: #b0bec5;--grayRGB: 176, 190, 197
+      ;--gray-dark: #90a4ae;--gray-darkRGB: 144, 164, 174
+      ;--gray-light: #eceff1;--gray-lightRGB: 236, 239, 241
+      ;--black: #000;--blackRGB: 0, 0, 0
+      ;--white: #fff;--whiteRGB: 255, 255, 255
+      ;--main: var(--blue);--mainRGB: var(--blueRGB);--main-dark: var(--blue-dark);--main-darkRGB: var(--blue-darkRGB);--main-light: var(--blue-light);--main-lightRGB: var(--blue-lightRGB);--sub: var(--gray);--subRGB: var(--grayRGB);--sub-dark: var(--gray-dark);--sub-darkRGB: var(--gray-darkRGB);--sub-light: var(--gray-light);--sub-lightRGB: var(--gray-lightRGB);--text: #222;--textRGB: 34, 34, 34
+      ;--passive: #888;--passiveRGB: 136, 136, 136
+      ;--header: var(--text);--headerRGB: var(--textRGB);--body: #fff;--bodyRGB: 255, 255, 255
+      }

functions/enqueue.php

@@ -25,6 +25,10 @@ function my_public_assets() {
   wp_enqueue_style( 'h-lightbox' );
   wp_enqueue_style( 'h-slider' );
 
+  // Disable gutenberg default style
+  wp_dequeue_style( 'wp-block-library' );
+  wp_dequeue_style( 'wp-block-library-theme' );
+
   // Javascript
   wp_enqueue_script( 'my-app', $js_dir . '/app.js', ['jquery'], ASSETS_VERSION, true );
 }

functions/helpers.php

@@ -25,7 +25,7 @@ static function has_required_plugins( array $plugins = ['H', 'Timber'] ) {
       add_action('admin_notices', function() {
         $text = sprintf(
           __('You need to activate WP Edje and Timber. <a href="%s">Activate now »</a>.', 'my'),
-          admin_url('plugins.php')
+          admin_url('plugins.php') . '?s=timber'
         );
         echo '<div class="notice notice-error"><p>' . $text . '</p></div>';
       });

js/app.js

@@ -1,5 +1,4 @@
-(function() { 'use strict';
-if( window.jQuery ) { $ = jQuery; }
+(function( $ ) { 'use strict';
 
 document.addEventListener( 'DOMContentLoaded', onReady );
 window.addEventListener( 'load', onLoad );
@@ -28,11 +27,11 @@ var myApp = {
    * Read more https://github.com/hrsetyono/hSlider
    */
   gallerySlider() {
-    let $targets = $('.wp-block-gallery.is-style-h-slider');
+    let $targets = $('.wp-block-gallery.is-style-h-slider .blocks-gallery-grid');
 
     $targets.each( function() {
       let $t = $(this);
-      let perSlide = $t.attr('class').match( /columns-(\d+)/ );
+      let perSlide = $t.closest('.wp-block-gallery').attr('class').match( /columns-(\d+)/ );
 
       hSlider( $t.get(0), {
         index: 0,
@@ -122,4 +121,4 @@ var myNav = {
 
 // Browser compatibility, leave this untouched
 if('registerElement' in document) { document.createElement( 'h-grid' ); document.createElement( 'h-tile' ); }
-})();
+})( jQuery );

package.json

@@ -10,6 +10,6 @@
   "devDependencies": {},
   "scripts": {
     "sass": "node-sass -w sass -o css --output-style compressed",
-    "bsync": "browser-sync start --proxy \"demo.test\" --files \"assets/css/*.css\""
+    "bsync": "browser-sync start --proxy \"demo.test\" --files \"css/*.css\""
   }
 }

sass/_edje/_functional-vars.scss

@@ -1,22 +1,70 @@
 $_h-all: (); // store all the Functional variables
 
-
-// Z-Index
-$h-z-index: (
-  names: ( z: z-index ),
-  values: (
-    '-1': -1,
-    0: 0,
-    1: 1,
-    2: 2,
-    5: 5,
-    10: 10,
-    50: 50,
-    100: 100,
-  )
+// -------------------
+// DYNAMIC PROPERTIES
+// -------------------
+
+// Properties that can use color from $h-colors and allow opacity prefix
+// EXAMPLE: c-red      >>> color: $red
+//          bg-main_10 >>> background-color: rgba($main, .10)
+$h-props-color: (
+  bg: background-color,
+  bc: border-color,
+  c: color
+);
+
+// Properties that can accept any number and allow unit prefix (default is rem)
+// EXAMPLE: p1_5    >>> padding: 1.5rem
+//          h50p    >>> height: 50%
+//          top70px >>> top: 70px
+$h-props-measurement: (
+  top: top,
+  right: right,
+  bottom: bottom,
+  left: left,
+
+  p: padding,
+  pt: padding-top,
+  pr: padding-right,
+  pb: padding-bottom,
+  pl: padding-left,
+  pv: ( padding-top, padding-bottom ),
+  ph: ( padding-right, padding-left ),
+
+  m: margin,
+  mt: margin-top,
+  mr: margin-right,
+  mb: margin-bottom,
+  ml: margin-left,
+  mv: ( margin-top, margin-bottom ),
+  mh: ( margin-right, margin-left ),
+
+  h: height,
+  minh: min-height,
+  maxh: max-height,
+  w: width,
+  minw: min-width,
+  maxw: max-width,
+
+  bw: border-width,
+  btw: border-top-width,
+  brw: border-right-width,
+  bbw: border-bottom-width,
+  blw: border-left-width,
+);
+
+
+// Properties that accept plain number
+$h-props-plain-number: (
+  z: z-index,
+  flex: flex,
+  order: order,
 );
 
 
+/////
+
+
 // Border width
 $h-border: (
   names: (
@@ -39,10 +87,6 @@ $h-border: (
 
 // Border Radius
 $h-border-radius: (
-  br: ( border-radius: $g-radius ), // deprecated
-  br-circle: ( border-radius: 50% ), // deprecated
-  br-pill: ( border-radius: 999px ), // deprecated
-
   brad0: ( border-radius: 0 ),
   brad: ( border-radius: $g-radius ),
   brad-circle: ( border-radius: 50% ),
@@ -90,20 +134,6 @@ $h-shadow: (
 );
 
 
-// Hover Effect
-$h-hover: (
-  hover-dim: (
-    ':hover': ( opacity: .6 ),
-    ':active': ( opacity: .8 ),
-  ),
-  hover-grow: (
-    ':hover': ( '-webkit-transform': scale(1.05), transform: scale(1.05) ),
-    ':active': ( '-webkit-transform': scale(1), transform: scale(1) ),
-  ),
-  hover-u: ( ':hover': ( text-decoration: underline ) ),
-);
-
-
 // Transition
 $h-transition: (
   transition: ( transition: $g-transition ),
@@ -164,7 +194,7 @@ $h-line-height: (
     0: 0,
     1: 1,
     '-normal': normal,
-    '-body': $font-line,
+    '-text': $font-line,
     '-header': $header-line,
   )
 );
@@ -184,8 +214,8 @@ $_h-display: (
   d-iblock: ( display: inline-block ),
   d-block: ( display: block ),
   d-none: ( display: none ),
-  d-flex: ( '_display': '-webkit-flex', display: flex ),
-  d-grid: ( '_display': '-ms-grid', display: grid ),
+  d-flex: ( _display: -webkit-flex, display: flex ),
+  d-grid: ( _display: -ms-grid, display: grid ),
 );
 
 // Flexbox
@@ -228,38 +258,6 @@ $_h-justify-content: (
 );
 
 
-// Flex portion
-$_h-flex-portion: (
-  names: (
-    flex: flex,
-  ),
-  values: (
-    0: 0,
-    1: 1,
-    2: 2,
-    3: 3,
-    4: 4,
-    5: 5
-  )
-);
-
-
-// Flex order
-$_h-flex-order: (
-  names: (
-    order: order,
-  ),
-  values: (
-    1: 1,
-    2: 2,
-    3: 3,
-    4: 4,
-    5: 5,
-    '-last': 999
-  ),
-);
-
-
 // Flex Align Self
 $_h-align-self: (
   names: (
@@ -378,7 +376,7 @@ $_h-position: (
   relative: ( position: relative ),
   absolute: ( position: absolute ),
   fixed: ( position: fixed ),
-  sticky: ( position: sticky ),
+  sticky: ( _position: -webkit-sticky, position: sticky ),
 
   absolute-fill: ( position: absolute, top: 0, right: 0, left: 0, bottom: 0 ),
 );
@@ -391,10 +389,6 @@ $_h-float: (
   float-none: ( float: none ),
   clear-both: ( clear: both ),
   clear-none: ( clear: none ),
-  // clearfix: (
-  //   '::before': ( content: " ", display: table ),
-  //   '::after': ( content: " ", display: table, clear: both )
-  // )
 );
 
 
@@ -489,7 +483,7 @@ $_h-font-weight: (
     600: 600,
     700: 700,
     900: 900,
-    '-body': $font-weight,
+    '-text': $font-weight,
     '-header': $header-weight,
   )
 );
@@ -529,15 +523,12 @@ $_h-all: map-merge( $_h-all, _merge(
   $_h-flex,
   $_h-align-items,
   $_h-justify-content,
-  $_h-flex-order,
-  $_h-flex-portion,
   $_h-align-self,
   $_h-overflow,
   $_h-cursor,
   $_h-display-misc,
 
   $_h-position,
-  $h-z-index,
   $_h-float,
 
   $h-border,