Updated README.md

README.md

@@ -1,26 +1,22 @@
-# barebones
+# barebones+
+_a [barebones](https://github.com/benchmarkstudios/barebones) fork by [Congegni](https://congegni.net)_
 
-A lightweight and skeletal WordPress boilerplate theme for HTML5 and beyond. There's lots of these out there but most themes include lots of bloat and files which you might not necessarily need, so we thought we would create our own which is great as a starting point with powerful features to encourage rapid development for most projects.
+We loved barebones, but we needed some adjustments for our projects.
 
 ## Features
 
-* Reset, normalisation and base font/form styles
-* Scss Boilerplate - semantically named files, organised by folders, all compiled into a single file
-* Semantic use of HTML5 elements, includes Google HTML5 shiv
-* WAI-ARIA role ready
-* jQuery plugin agnostic
-* Basic template files
-* Customised functions.php adding theme support for high customisation
-* Minimised HTTP requests for high Web Performance
-* Localised strings for multiple language support
-* Scss compiling and watching, css minification support
-* Base mobile nav out of the box
+* For standard barebones features, check out [here](https://github.com/benchmarkstudios/barebones?tab=readme-ov-file#features). We just removed some functions that we don't need.
+* Custom `index.php` as 404 template.
+* Deferred YouTube Video custom block.
+* Added a `css` class and a standard block support:
+  * `cover` block basic support (in `/assets/styles/_main.scss`)
+  * `.fullwidth` for full width elements (in `/assets/styles/_main.scss` and `/assets/scripts/scripts.js`)
 
 ## Installation
 
-Clone the barebones repositories into your WordPress /wp-content/themes/ directory:
+Clone the barebones+ repositories into your WordPress /wp-content/themes/ directory:
 
-    git clone https://github.com/benchmarkstudios/barebones
+    git clone https://git.congegni.net/Congegni/barebones
     cd barebones
 
 ### Using Laravel Mix

assets/scripts/scripts.js

@@ -14,3 +14,15 @@ const toggleMenu = (event) => {
 
 $('.js-menu-toggle').on('click', toggleMenu);
 
+const fullWidth = () => {
+    console.log('FullWidth: loaded;');
+    const windowWidth = $("body").prop("clientWidth");
+    const margin = - ((windowWidth - 1200) / 2) + 20;
+    $('.fullwidth').each(function(i, el) {
+        console.log($(this));
+        $(this).width(windowWidth);
+    });
+};
+
+$(window).on('load', fullWidth);
+$(window).on('resize', fullWidth);

assets/styles/layout/_main.scss

@@ -0,0 +1,89 @@
+.wp-block-cover {
+  position:relative;
+  overflow-x: hidden;
+
+  img {
+    width: 100%;
+
+    @include resp-max($breakpoint-md) {
+      width: 120%;
+      max-width: unset;
+      height: auto;
+      position: relative;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    @include resp-max($breakpoint-sm) {
+      height: 80vh;
+      width: auto;
+      position: relative;
+      left: 70%;
+    }
+
+    @include resp-max($breakpoint-xs) {
+      left:100%;
+    }
+  }
+
+  .wp-block-cover__inner-container {
+    position: absolute;
+    bottom:50%;
+    left: 50%;
+    transform: translate3d(-50%,50%,0);
+    width: 100%;
+    z-index: 3;
+  }
+}
+
+.fullwidth {
+
+  &.row {
+    gap:20px;
+
+    &::before,
+    &::after {
+      display:none;
+    }
+
+    @include resp-min($breakpoint-sm) {
+      .col {
+        padding-left:0;
+      }
+    }
+  }
+
+  @include resp-min($grid-max-width) {
+    margin-left: calc(0px - $grid-gutter - ((100vw - $grid-max-width) / 2));
+    margin-right: calc(0px - $grid-gutter - ((100vw - $grid-max-width) / 2));
+  }
+
+  @include resp-max($grid-max-width - 1) {
+    margin-left: calc(0px - $grid-gutter);
+    margin-right: calc(0px - $grid-gutter);
+  }
+
+  @include resp-max($breakpoint-sm) {
+    >* {
+      padding-left: $grid-gutter;
+      padding-right: $grid-gutter;
+    }
+  }
+
+  >div.is-layout-constrained {
+    @include clearfix;
+    max-width: $grid-max-width;
+    margin: 0 auto;
+    padding: 0 $grid-gutter;
+
+    >div.row {
+      @include resp-max($breakpoint-sm) {
+        margin-right: -$grid-gutter;
+
+        .col {
+          padding-right: $grid-gutter;
+        }
+      }
+    }
+  }
+}

blocks/deferred-youtube-video/block.json

@@ -0,0 +1,29 @@
+{
+  "$schema": "https://schemas.wp.org/trunk/block.json",
+  "apiVersion": 3,
+  "name": "create-block/deferred-youtube-video",
+  "version": "1.0.0",
+  "title": "Deferred Youtube Video",
+  "category": "widgets",
+  "icon": "youtube",
+  "description": "Youtube Player optimized for Core Web Vitals (connect to youtube after the page is fully loaded)",
+  "example": {},
+  "supports": {
+    "html": false,
+    "anchor": true
+  },
+  "attributes": {
+    "url": {
+      "type": "string"
+    },
+    "width": {
+      "type": "string"
+    }
+  },
+  "textdomain": "deferred-youtube-video",
+  "editorScript": "file:./index.js",
+  "viewScript": "file:./view.js",
+  "editorStyle": "file:./index.css",
+  "style": "file:./style-index.css",
+  "render": "file:./render.php"
+}

blocks/deferred-youtube-video/index.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '30ac4daf8a08f102d49b');

blocks/deferred-youtube-video/index.css

@@ -0,0 +1 @@
+.wp-block-create-block-deferred-youtube-video{border:1px dotted red}.wp-block-create-block-deferred-youtube-video .video-container{overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}.wp-block-create-block-deferred-youtube-video .video-container img{height:100%;left:0;-o-object-fit:cover;object-fit:cover;position:absolute;top:0;width:100%}.wp-block-create-block-deferred-youtube-video .video-container iframe{height:100%;left:0;margin:0 auto;overflow:hidden;position:absolute;top:0;transition:opacity 1s ease 0s;width:100%}

blocks/deferred-youtube-video/index.js

@@ -0,0 +1 @@
+(()=>{"use strict";var e,t={451:()=>{const e=window.wp.blocks,t=window.React,r=window.wp.i18n,o=window.wp.blockEditor,n=window.wp.components,i=JSON.parse('{"u2":"create-block/deferred-youtube-video"}');(0,e.registerBlockType)(i.u2,{edit:function({attributes:e,setAttributes:i}){const{url:l,width:a}=e;return(0,t.createElement)(t.Fragment,null,(0,t.createElement)(o.InspectorControls,{key:"setting"},(0,t.createElement)(n.PanelBody,{title:(0,r.__)("Settings","copyright-date-block")},(0,t.createElement)(n.TextControl,{label:(0,r.__)("Youtube Video ID","deferred-youtube-video"),value:l||"",onChange:e=>i({url:e})}),(0,t.createElement)(n.__experimentalUnitControl,{label:(0,r.__)("Width","deferred-youtube-video"),value:a||"100%",onUnitChange:e=>console.log("new unit"),onChange:e=>i({width:e})}))),(0,t.createElement)("div",{...(0,o.useBlockProps)()},(0,t.createElement)("div",{id:"video-container"},(0,t.createElement)("img",{className:"ytcover",loading:"lazy",src:"https://img.youtube.com/vi/"+l+"/maxresdefault.jpg"}))))}})}},r={};function o(e){var n=r[e];if(void 0!==n)return n.exports;var i=r[e]={exports:{}};return t[e](i,i.exports,o),i.exports}o.m=t,e=[],o.O=(t,r,n,i)=>{if(!r){var l=1/0;for(c=0;c<e.length;c++){for(var[r,n,i]=e[c],a=!0,d=0;d<r.length;d++)(!1&i||l>=i)&&Object.keys(o.O).every((e=>o.O[e](r[d])))?r.splice(d--,1):(a=!1,i<l&&(l=i));if(a){e.splice(c--,1);var u=n();void 0!==u&&(t=u)}}return t}i=i||0;for(var c=e.length;c>0&&e[c-1][2]>i;c--)e[c]=e[c-1];e[c]=[r,n,i]},o.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),(()=>{var e={826:0,431:0};o.O.j=t=>0===e[t];var t=(t,r)=>{var n,i,[l,a,d]=r,u=0;if(l.some((t=>0!==e[t]))){for(n in a)o.o(a,n)&&(o.m[n]=a[n]);if(d)var c=d(o)}for(t&&t(r);u<l.length;u++)i=l[u],o.o(e,i)&&e[i]&&e[i][0](),e[i]=0;return o.O(c)},r=globalThis.webpackChunkdeferred_youtube_video=globalThis.webpackChunkdeferred_youtube_video||[];r.forEach(t.bind(null,0)),r.push=t.bind(null,r.push.bind(r))})();var n=o.O(void 0,[431],(()=>o(451)));n=o.O(n)})();

blocks/deferred-youtube-video/render.php

@@ -0,0 +1,19 @@
+<?php
+/**
+ * @see https://github.com/WordPress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md#render
+ */
+?>
+<div <?php echo get_block_wrapper_attributes(); ?> style="max-width:<?php echo $attributes['width'] ?>;height: auto; margin: 0 auto;">
+	<div class="video-container">
+		<img class="dyvideo-cover lazyload"
+			 loading="lazy"
+			 src="https://i.ytimg.com/vi_webp/<?php echo $attributes['url'] ?>/maxresdefault.webp">
+		<iframe
+			class="dyvideo-iframe"
+			data-src="https://www.youtube.com/embed/<?php echo $attributes['url'] ?>?autoplay=0&rel=0">
+		</iframe>
+	</div>
+</div>
+
+<!-- srcdoc="<!DOCTYPE html><html><head><style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black;left:0}a{position:relative;display:block;}</style></head><body><a href='https://www.youtube.com/embed/<?php echo $attributes['url'] ?>?autoplay=1&rel=0&mute=1'><img src='https://img.youtube.com/vi/<?php echo $attributes['url'] ?>/maxresdefault.jpg' alt='Play Video' style='height:auto;width:100%;transform:translateX(-50%);position:relative;left:50%'><span>▶</span></a></body></html>"></iframe>
+	 -->

blocks/deferred-youtube-video/style-index.css

@@ -0,0 +1 @@
+.wp-block-create-block-deferred-youtube-video .video-container{overflow:hidden;padding-bottom:56.25%;position:relative;width:100%}.wp-block-create-block-deferred-youtube-video .video-container img{height:100%;left:0;position:absolute;top:0;width:100%}.wp-block-create-block-deferred-youtube-video .video-container iframe{height:100%;left:0;margin:0 auto;overflow:hidden;position:absolute;width:100%}

blocks/deferred-youtube-video/view.asset.php

@@ -0,0 +1 @@
+<?php return array('dependencies' => array(), 'version' => '933cec89fc99fe06a0dd');

blocks/deferred-youtube-video/view.js

@@ -0,0 +1 @@
+void 0===window.dyvideoDefer&&(window.dyvideoDefer=function(){console.log("ye"),document.querySelectorAll(".dyvideo-cover"),function(e){const o=document.querySelectorAll(".dyvideo-iframe");console.log(o),o.forEach((e=>{console.log(e),e.src=e.getAttribute("data-src"),e.onload=e.style.opacity=1}))}()},window.requestIdleCallback(dyvideoDefer));

functions.php

@@ -6,6 +6,15 @@
 
 require_once 'includes/custom-functions.php';
 
+/**
+ * Registering Custom Blocks
+ */
+
+function congegni_block_init() {
+    register_block_type( __DIR__ . '/blocks/deferred-youtube-video' );
+}
+add_action( 'init', 'congegni_block_init' );
+
 
 /**
  * Add support for useful stuff
@@ -69,8 +78,6 @@ add_filter('post_comments_feed_link', 'barebones_post_comments_feed_link');
  */
 
 function barebones_enqueue_scripts() {
-    // wp_enqueue_style( 'fonts', '//fonts.googleapis.com/css?family=Font+Family' );
-    // wp_enqueue_style( 'icons', '//use.fontawesome.com/releases/v5.0.10/css/all.css' );
     wp_deregister_script('jquery');
     wp_enqueue_style( 'styles', get_stylesheet_directory_uri() . '/style.css?' . filemtime( get_stylesheet_directory() . '/style.css' ) );
     wp_enqueue_script( 'scripts', get_stylesheet_directory_uri() . '/js/scripts.min.js?' . filemtime( get_stylesheet_directory() . '/js/scripts.min.js' ), [], null, true );
@@ -106,37 +113,6 @@ function defer_scripts( $tag, $handle, $src ) {
 add_filter( 'script_loader_tag', 'defer_scripts', 10, 3 );
 
 
-/**
- * Add custom scripts to head
- *
- * @return string
- */
-
-function add_gtag_to_head() {
-
-    // Check is staging environment
-    if ( strpos( get_bloginfo( 'url' ), '.test' ) !== false ) return;
-
-    // Google Analytics
-    $tracking_code = 'UA-*********-1';
-    
-    ?>
-        <!-- Global site tag (gtag.js) - Google Analytics -->
-        <script async src="https://www.googletagmanager.com/gtag/js?id=<?php echo $tracking_code; ?>"></script>
-        <script>
-            window.dataLayer = window.dataLayer || [];
-            function gtag(){dataLayer.push(arguments);}
-            gtag('js', new Date());
-
-            gtag('config', '<?php echo $tracking_code; ?>');
-        </script>
-    <?php
-}
-
-add_action( 'wp_head', 'add_gtag_to_head' );
-
-
-
 /**
  * Remove unnecessary scripts
  *