added deferred youtuibe video block

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));