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 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 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 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'; - - ?> - - - -