Changeset 3116570
- Timestamp:
- 07/11/2024 03:57:33 PM (2 months ago)
- Location:
- enhanced-embed-block
- Files:
-
- 8 added
- 6 edited
- 1 copied
Legend:
- Unmodified
- Added
- Removed
-
enhanced-embed-block/tags/1.1.0/css/lite-youtube-custom.css
r3095750 r3116570 6 6 */ 7 7 lite-youtube { 8 display: block ; /* required for layout if JS fails to load */9 padding-bottom: 0 ; /* remove old method of aspect ratio */10 aspect-ratio: 16/9 ;8 display: block; /* required for layout if JS fails to load */ 9 padding-bottom: 0; /* remove old method of aspect ratio */ 10 aspect-ratio: 16/9; 11 11 } 12 12 13 13 .lite-youtube-fallback { 14 display: flex; 15 flex-direction: column; 16 justify-content: center; 17 align-items: center; 18 text-align: center; 19 gap: 5%; 20 aspect-ratio: 16/9; 21 padding: 5%; 22 background-color: #000; 23 text-decoration: none; 24 transition: opacity 0.15s ease-in-out; 25 opacity: 0.85; 14 --eeb-fallback-background: #000; 15 16 display: flex !important; 17 flex-direction: column !important; 18 justify-content: center !important; 19 align-items: center !important; 20 text-align: center !important; 21 gap: 5% !important; 22 aspect-ratio: 16/9 !important; 23 padding: 5% !important; 24 background-color: var(--eeb-fallback-background) !important; 25 text-decoration: none !important; 26 transition: opacity 0.15s ease-in-out !important; 26 27 } 27 28 28 29 .lite-youtube-fallback:hover { 29 opacity: 1; 30 text-decoration: underline !important; 31 } 32 .lite-youtube-fallback:hover::before { 33 transform: scale(1.1) !important; 34 } 35 @media (prefers-reduced-motion: reduce) { 36 .lite-youtube-fallback:hover::before { 37 transform: none !important; 38 } 30 39 } 31 40 32 41 .lite-youtube-fallback:focus-visible { 33 outline: 1px solidred;34 outline -offset: 3px;35 o pacity: 1;42 red; 43 outline; 44 o; 36 45 } 37 46 … … 45 54 46 55 .lite-youtube-fallback::before { 47 display: block; 48 content: ""; 49 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="94" height="67" xml:space="preserve"><path fill="red" d="M15.113 3.169C8.148 3.716 2.883 9.38 2.543 16.36 2.262 22.114 2 28.731 2 33.301c0 4.621.27 11.341.551 17.138.336 6.891 5.484 12.52 12.355 13.151C22.511 64.293 33.515 65 47 65c13.449 0 24.434-.703 32.035-1.402 6.898-.637 12.055-6.301 12.387-13.219.293-6.106.578-13.086.578-17.078 0-3.949-.281-10.824-.57-16.883-.332-7.008-5.61-12.707-12.602-13.254C71.34 2.574 60.543 2 47 2c-13.578 0-24.396.578-31.887 1.169zM38 19.942l23.199 13.359L38 46.656V19.942z"/><path fill="white" d="m38 19.942 23.199 13.359L38 46.656z"/></svg>') 50 center / cover no-repeat; 51 width: 20%; 52 aspect-ratio: 94/67; 56 display: block !important; 57 content: "" !important; 58 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>') 59 center / cover no-repeat !important; 60 width: 68px !important; 61 height: 48px !important; 62 aspect-ratio: 94/67 !important; 63 transition: 0.15s transform ease-in-out !important; 53 64 } -
enhanced-embed-block/tags/1.1.0/enhanced-embed-block.php
r3095750 r3116570 7 7 * Author URI: https://MRWweb.com 8 8 * Text Domain: enhanced-embed-block 9 * Version: 1. 0.09 * Version: 1..0 10 10 * Requires at least: 6.5 11 11 * Requires PHP: 7.4 … … 13 13 * License URI: https://www.gnu.org/licenses/gpl-3.0.html 14 14 * 15 * @package Enhanced_ YouTube_Embed_Block15 * @package Enhanced_Embed_Block 16 16 */ 17 17 … … 20 20 use WP_HTML_TAG_Processor; 21 21 22 define( 'EEB_VERSION', '1. 0.0' );22 define( 'EEB_VERSION', '1..0' ); 23 23 24 24 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_lite_youtube_component' ); … … 36 36 array( 'in_footer' => true ) 37 37 ); 38 38 39 40 41 39 42 wp_enqueue_block_style( 40 43 'core/embed', … … 47 50 ); 48 51 } 52 49 53 50 54 /* Pre-2020 Blocks */ … … 60 64 */ 61 65 function replace_youtube_embed_with_web_component( $content, $block ) { 62 if ( 'youtube' !== $block['attrs']['providerNameSlug'] && isset( $block['attrs']['url'] ) ) { 66 $isValidYouTube = 'youtube' === $block['attrs']['providerNameSlug'] && isset( $block['attrs']['url'] ); 67 if( ! $isValidYouTube || is_feed() ) { 63 68 return $content; 64 69 } … … 78 83 $play_button = sprintf( __( 'Play: %s', 'enhanced-embed-block' ), $video_title ); 79 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 80 101 /* Craft the new output: the web component with HTML fallback link */ 81 102 $content = sprintf( 82 103 '<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"> 83 104 <div class="wp-block-embed__wrapper"> 84 <lite-youtube videoid="%1$s" videoplay="%2$s" videoStartAt="%3$d" poster loading="lazy" nocookie>85 <a href="% 4$s" class="lite-youtube-fallback" target="_blank" rel="noreferrer noopenner">Watch "%5$s" on YouTube</a>105 <lite-youtube videoid="%1$s" videoplay="%2$s" videoStartAt="%3$d" poster> 106 <a href="%$s" on YouTube</a> 86 107 </lite-youtube> 87 108 </div> 88 % 6$s109 %$s 89 110 </figure>', 90 111 esc_attr( $video_id ), 91 112 esc_attr( $play_button ), 92 113 $start_time ? intval( $start_time ) : 0, 114 115 93 116 esc_url( $block['attrs']['url'] ), 94 117 esc_html( $video_title ), … … 118 141 * @param string $html A block of HTML containing a YouTube iframe. 119 142 * @return string The figcaption OR an empty string 143 144 120 145 */ 121 146 function extract_figcaption_from_embed_code( $html ) { -
enhanced-embed-block/tags/1.1.0/readme.txt
r3101319 r3116570 1 1 === Enhanced Embed Block for YouTube === 2 Contributors: mrwweb 2 Contributors: mrwweb 3 3 Donate link: https://paypal.me/rootwiley 4 4 Tags: YouTube, embed, video, block, performance 5 5 Requires at least: 6.5 6 Tested up to: 6. 56 Tested up to: 6. 7 7 Requires PHP: 7.4 8 Stable tag: 1. 0.0-retry-github-action8 Stable tag: 1. 9 9 License: GPLv3 or later 10 10 License URI: https://www.gnu.org/licenses/gpl-3.0.html … … 58 58 = Does this create a new block? = 59 59 60 No. It enhances the default WordPress YouTube embed block.60 No. It enhances the default WordPress . 61 61 62 62 = Does it automatically enhance all my YouTube embeds? = … … 76 76 Not right now. If you'd pay for a PRO version with this feature, [let me know](https://mrwweb.com/wordpress-plugins/enhanced-embed-block/#pro). 77 77 78 = Known Issues =79 80 Some older videos do not have a thumbnail image in the modern webp format. This can lead to a blurry gray video poster image for the video. [Upstream issue](https://github.com/justinribeiro/lite-youtube/issues/79)81 82 78 == Software == 83 79 … … 86 82 == Changelog == 87 83 84 85 86 87 88 89 90 91 92 88 93 = 1.0.0 = 89 94 - Initial release to the WordPress repository! 90 95 91 96 == Upgrade Notice == 97 98 99 -
enhanced-embed-block/trunk/css/lite-youtube-custom.css
r3095750 r3116570 6 6 */ 7 7 lite-youtube { 8 display: block ; /* required for layout if JS fails to load */9 padding-bottom: 0 ; /* remove old method of aspect ratio */10 aspect-ratio: 16/9 ;8 display: block; /* required for layout if JS fails to load */ 9 padding-bottom: 0; /* remove old method of aspect ratio */ 10 aspect-ratio: 16/9; 11 11 } 12 12 13 13 .lite-youtube-fallback { 14 display: flex; 15 flex-direction: column; 16 justify-content: center; 17 align-items: center; 18 text-align: center; 19 gap: 5%; 20 aspect-ratio: 16/9; 21 padding: 5%; 22 background-color: #000; 23 text-decoration: none; 24 transition: opacity 0.15s ease-in-out; 25 opacity: 0.85; 14 --eeb-fallback-background: #000; 15 16 display: flex !important; 17 flex-direction: column !important; 18 justify-content: center !important; 19 align-items: center !important; 20 text-align: center !important; 21 gap: 5% !important; 22 aspect-ratio: 16/9 !important; 23 padding: 5% !important; 24 background-color: var(--eeb-fallback-background) !important; 25 text-decoration: none !important; 26 transition: opacity 0.15s ease-in-out !important; 26 27 } 27 28 28 29 .lite-youtube-fallback:hover { 29 opacity: 1; 30 text-decoration: underline !important; 31 } 32 .lite-youtube-fallback:hover::before { 33 transform: scale(1.1) !important; 34 } 35 @media (prefers-reduced-motion: reduce) { 36 .lite-youtube-fallback:hover::before { 37 transform: none !important; 38 } 30 39 } 31 40 32 41 .lite-youtube-fallback:focus-visible { 33 outline: 1px solidred;34 outline -offset: 3px;35 o pacity: 1;42 red; 43 outline; 44 o; 36 45 } 37 46 … … 45 54 46 55 .lite-youtube-fallback::before { 47 display: block; 48 content: ""; 49 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="94" height="67" xml:space="preserve"><path fill="red" d="M15.113 3.169C8.148 3.716 2.883 9.38 2.543 16.36 2.262 22.114 2 28.731 2 33.301c0 4.621.27 11.341.551 17.138.336 6.891 5.484 12.52 12.355 13.151C22.511 64.293 33.515 65 47 65c13.449 0 24.434-.703 32.035-1.402 6.898-.637 12.055-6.301 12.387-13.219.293-6.106.578-13.086.578-17.078 0-3.949-.281-10.824-.57-16.883-.332-7.008-5.61-12.707-12.602-13.254C71.34 2.574 60.543 2 47 2c-13.578 0-24.396.578-31.887 1.169zM38 19.942l23.199 13.359L38 46.656V19.942z"/><path fill="white" d="m38 19.942 23.199 13.359L38 46.656z"/></svg>') 50 center / cover no-repeat; 51 width: 20%; 52 aspect-ratio: 94/67; 56 display: block !important; 57 content: "" !important; 58 background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="red"/><path d="M45 24 27 14v20" fill="white"/></svg>') 59 center / cover no-repeat !important; 60 width: 68px !important; 61 height: 48px !important; 62 aspect-ratio: 94/67 !important; 63 transition: 0.15s transform ease-in-out !important; 53 64 } -
enhanced-embed-block/trunk/enhanced-embed-block.php
r3095750 r3116570 7 7 * Author URI: https://MRWweb.com 8 8 * Text Domain: enhanced-embed-block 9 * Version: 1. 0.09 * Version: 1..0 10 10 * Requires at least: 6.5 11 11 * Requires PHP: 7.4 … … 13 13 * License URI: https://www.gnu.org/licenses/gpl-3.0.html 14 14 * 15 * @package Enhanced_ YouTube_Embed_Block15 * @package Enhanced_Embed_Block 16 16 */ 17 17 … … 20 20 use WP_HTML_TAG_Processor; 21 21 22 define( 'EEB_VERSION', '1. 0.0' );22 define( 'EEB_VERSION', '1..0' ); 23 23 24 24 add_action( 'wp_enqueue_scripts', __NAMESPACE__ . '\enqueue_lite_youtube_component' ); … … 36 36 array( 'in_footer' => true ) 37 37 ); 38 38 39 40 41 39 42 wp_enqueue_block_style( 40 43 'core/embed', … … 47 50 ); 48 51 } 52 49 53 50 54 /* Pre-2020 Blocks */ … … 60 64 */ 61 65 function replace_youtube_embed_with_web_component( $content, $block ) { 62 if ( 'youtube' !== $block['attrs']['providerNameSlug'] && isset( $block['attrs']['url'] ) ) { 66 $isValidYouTube = 'youtube' === $block['attrs']['providerNameSlug'] && isset( $block['attrs']['url'] ); 67 if( ! $isValidYouTube || is_feed() ) { 63 68 return $content; 64 69 } … … 78 83 $play_button = sprintf( __( 'Play: %s', 'enhanced-embed-block' ), $video_title ); 79 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 80 101 /* Craft the new output: the web component with HTML fallback link */ 81 102 $content = sprintf( 82 103 '<figure class="wp-block-embed-youtube wp-block-embed is-type-video is-provider-youtube"> 83 104 <div class="wp-block-embed__wrapper"> 84 <lite-youtube videoid="%1$s" videoplay="%2$s" videoStartAt="%3$d" poster loading="lazy" nocookie>85 <a href="% 4$s" class="lite-youtube-fallback" target="_blank" rel="noreferrer noopenner">Watch "%5$s" on YouTube</a>105 <lite-youtube videoid="%1$s" videoplay="%2$s" videoStartAt="%3$d" poster> 106 <a href="%$s" on YouTube</a> 86 107 </lite-youtube> 87 108 </div> 88 % 6$s109 %$s 89 110 </figure>', 90 111 esc_attr( $video_id ), 91 112 esc_attr( $play_button ), 92 113 $start_time ? intval( $start_time ) : 0, 114 115 93 116 esc_url( $block['attrs']['url'] ), 94 117 esc_html( $video_title ), … … 118 141 * @param string $html A block of HTML containing a YouTube iframe. 119 142 * @return string The figcaption OR an empty string 143 144 120 145 */ 121 146 function extract_figcaption_from_embed_code( $html ) { -
enhanced-embed-block/trunk/readme.txt
r3101319 r3116570 1 1 === Enhanced Embed Block for YouTube === 2 Contributors: mrwweb 2 Contributors: mrwweb 3 3 Donate link: https://paypal.me/rootwiley 4 4 Tags: YouTube, embed, video, block, performance 5 5 Requires at least: 6.5 6 Tested up to: 6. 56 Tested up to: 6. 7 7 Requires PHP: 7.4 8 Stable tag: 1. 0.0-retry-github-action8 Stable tag: 1. 9 9 License: GPLv3 or later 10 10 License URI: https://www.gnu.org/licenses/gpl-3.0.html … … 58 58 = Does this create a new block? = 59 59 60 No. It enhances the default WordPress YouTube embed block.60 No. It enhances the default WordPress . 61 61 62 62 = Does it automatically enhance all my YouTube embeds? = … … 76 76 Not right now. If you'd pay for a PRO version with this feature, [let me know](https://mrwweb.com/wordpress-plugins/enhanced-embed-block/#pro). 77 77 78 = Known Issues =79 80 Some older videos do not have a thumbnail image in the modern webp format. This can lead to a blurry gray video poster image for the video. [Upstream issue](https://github.com/justinribeiro/lite-youtube/issues/79)81 82 78 == Software == 83 79 … … 86 82 == Changelog == 87 83 84 85 86 87 88 89 90 91 92 88 93 = 1.0.0 = 89 94 - Initial release to the WordPress repository! 90 95 91 96 == Upgrade Notice == 97 98 99
Note: See TracChangeset
for help on using the changeset viewer.