added deferred youtuibe video block
This commit is contained in:
parent
f34cfd1bff
commit
6e8f0b0bb9
|
|
@ -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"
|
||||
}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?php return array('dependencies' => array('react', 'wp-block-editor', 'wp-blocks', 'wp-components', 'wp-i18n'), 'version' => '30ac4daf8a08f102d49b');
|
||||
|
|
@ -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%}
|
||||
|
|
@ -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)})();
|
||||
|
|
@ -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>
|
||||
-->
|
||||
|
|
@ -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%}
|
||||
|
|
@ -0,0 +1 @@
|
|||
<?php return array('dependencies' => array(), 'version' => '933cec89fc99fe06a0dd');
|
||||
|
|
@ -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));
|
||||
|
|
@ -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
|
||||
*
|
||||
|
|
|
|||
Loading…
Reference in New Issue