From 251b6a8e3fecd77deafdedf088ba492d68e7f1a0 Mon Sep 17 00:00:00 2001 From: marcoc Date: Thu, 11 Jan 2024 18:04:20 +0100 Subject: [PATCH 1/4] added cover block support and .fullwidth class --- assets/styles/layout/_main.scss | 89 +++++++++++++++++++++++++++++++++ 1 file changed, 89 insertions(+) diff --git a/assets/styles/layout/_main.scss b/assets/styles/layout/_main.scss index e69de29..25284f2 100755 --- a/assets/styles/layout/_main.scss +++ b/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; + } + } + } + } +} \ No newline at end of file From f34cfd1bff9b6cc71fd4552b139a59fb432dfb29 Mon Sep 17 00:00:00 2001 From: marcoc Date: Thu, 11 Jan 2024 18:04:33 +0100 Subject: [PATCH 2/4] added .fullwidth class support --- assets/scripts/scripts.js | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/assets/scripts/scripts.js b/assets/scripts/scripts.js index 29a9b85..a509ad9 100755 --- a/assets/scripts/scripts.js +++ b/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); \ No newline at end of file From 6e8f0b0bb9ef11bfd4aede2c0860ed9c4597e630 Mon Sep 17 00:00:00 2001 From: marcoc Date: Thu, 11 Jan 2024 18:09:03 +0100 Subject: [PATCH 3/4] added deferred youtuibe video block --- blocks/deferred-youtube-video/block.json | 29 +++++++++++++ blocks/deferred-youtube-video/index.asset.php | 1 + blocks/deferred-youtube-video/index.css | 1 + blocks/deferred-youtube-video/index.js | 1 + blocks/deferred-youtube-video/render.php | 19 +++++++++ blocks/deferred-youtube-video/style-index.css | 1 + blocks/deferred-youtube-video/view.asset.php | 1 + blocks/deferred-youtube-video/view.js | 1 + functions.php | 42 ++++--------------- 9 files changed, 63 insertions(+), 33 deletions(-) create mode 100644 blocks/deferred-youtube-video/block.json create mode 100644 blocks/deferred-youtube-video/index.asset.php create mode 100644 blocks/deferred-youtube-video/index.css create mode 100644 blocks/deferred-youtube-video/index.js create mode 100644 blocks/deferred-youtube-video/render.php create mode 100644 blocks/deferred-youtube-video/style-index.css create mode 100644 blocks/deferred-youtube-video/view.asset.php create mode 100644 blocks/deferred-youtube-video/view.js diff --git a/blocks/deferred-youtube-video/block.json b/blocks/deferred-youtube-video/block.json new file mode 100644 index 0000000..4b1039f --- /dev/null +++ b/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" +} \ No newline at end of file diff --git a/blocks/deferred-youtube-video/index.asset.php b/blocks/deferred-youtube-video/index.asset.php new file mode 100644 index 0000000..1dbd34c --- /dev/null +++ b/blocks/deferred-youtube-video/index.asset.php @@ -0,0 +1 @@ + array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '30ac4daf8a08f102d49b'); diff --git a/blocks/deferred-youtube-video/index.css b/blocks/deferred-youtube-video/index.css new file mode 100644 index 0000000..2b36215 --- /dev/null +++ b/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%} diff --git a/blocks/deferred-youtube-video/index.js b/blocks/deferred-youtube-video/index.js new file mode 100644 index 0000000..23e8bec --- /dev/null +++ b/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=i)&&Object.keys(o.O).every((e=>o.O[e](r[d])))?r.splice(d--,1):(a=!1,i0&&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);uo(451)));n=o.O(n)})(); \ No newline at end of file diff --git a/blocks/deferred-youtube-video/render.php b/blocks/deferred-youtube-video/render.php new file mode 100644 index 0000000..a4eb961 --- /dev/null +++ b/blocks/deferred-youtube-video/render.php @@ -0,0 +1,19 @@ + +
style="max-width:;height: auto; margin: 0 auto;"> +
+ + +
+
+ + diff --git a/blocks/deferred-youtube-video/style-index.css b/blocks/deferred-youtube-video/style-index.css new file mode 100644 index 0000000..0936fa5 --- /dev/null +++ b/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%} diff --git a/blocks/deferred-youtube-video/view.asset.php b/blocks/deferred-youtube-video/view.asset.php new file mode 100644 index 0000000..d69da90 --- /dev/null +++ b/blocks/deferred-youtube-video/view.asset.php @@ -0,0 +1 @@ + array(), 'version' => '933cec89fc99fe06a0dd'); diff --git a/blocks/deferred-youtube-video/view.js b/blocks/deferred-youtube-video/view.js new file mode 100644 index 0000000..a0c9e37 --- /dev/null +++ b/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)); \ No newline at end of file diff --git a/functions.php b/functions.php index b5c3caa..69b7fe9 100755 --- a/functions.php +++ b/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'; - - ?> - - - - Date: Thu, 11 Jan 2024 18:09:32 +0100 Subject: [PATCH 4/4] Updated README.md --- README.md | 26 +++++++++++--------------- 1 file changed, 11 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 5aa3120..3eb4f66 100755 --- a/README.md +++ b/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