Tribe Embeds Updates

.github/workflows/release.yml

@@ -1,6 +1,7 @@
 name: 'Release'
 
 on:
+  workflow_dispatch:
   release:
     types: [published]
 
@@ -17,7 +18,7 @@ jobs:
         uses: shivammathur/setup-php@2.22.0
         with:
           tools: composer, wp
-          php-version: 8.0
+          php-version: 8.3
 
       - name: Checkout Repo
         uses: actions/checkout@v3
@@ -31,7 +32,7 @@ jobs:
           composer install --no-dev
           composer dump-autoload
       - name: NPM Setup
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v5
         with:
           node-version-file: "${{ env.BUILD_FOLDER }}/.nvmrc"
           cache: 'npm'
@@ -47,7 +48,7 @@ jobs:
       - name: Configure WP-CLI dist-archive-command
         run: |
           cd ${{ env.BUILD_FOLDER }}
-          wp package install wp-cli/dist-archive-command
+          wp package install wp-cli/dist-archive-command:^3.1
       - name: Build Plugin Zip
         run: |
           wp dist-archive ${{ env.BUILD_FOLDER }} --plugin-dirname=${{ env.PLUGIN_SLUG }}

.lando.yml

@@ -9,7 +9,7 @@ excludes:
   - .github
 
 config:
-  php: '8.0'
+  php: '8.3'
   via: nginx
   database: mysql
   webroot: dev/public

assets/js/embed.js

@@ -37,6 +37,28 @@ function createCaptionEl( caption ) {
 	return captionEl;
 }
 
+/**
+ * Configure and trigger play for <wistia-player> (Aurora web component).
+ * Uses the element's autoplay attribute and api-ready event; window._wq does not apply.
+ * See https://docs.wistia.com/docs/player-attributes-and-properties#autoplay
+ * and https://docs.wistia.com/docs/player-events
+ *
+ * @param {Element} playerEl The <wistia-player> DOM element (in the document).
+ */
+function playWistiaPlayer( playerEl ) {
+	if ( ! playerEl || playerEl.tagName !== 'WISTIA-PLAYER' ) return;
+	playerEl.setAttribute( 'autoplay', '' );
+	playerEl.addEventListener(
+		'api-ready',
+		() => {
+			if ( typeof playerEl.play === 'function' ) {
+				playerEl.play();
+			}
+		},
+		{ once: true }
+	);
+}
+
 /**
  * Setup event handlers
  *
@@ -53,6 +75,10 @@ function setupEventHandlers( embed, template ) {
 
 	if ( clickEls.length === 0 ) return;
 
+	const embedContent = template.content.children[ 0 ];
+	const isWistia =
+		embedContent && embedContent.querySelector( 'wistia-player' );
+
 	// loop through each click event - play button and thumbnail.
 	clickEls.forEach( ( clickEl ) => {
 		// when the element is clicked.
@@ -63,6 +89,14 @@ function setupEventHandlers( embed, template ) {
 			// grab just the first child of the template - this is the figure block element which wraps the iframe.
 			const content = contentOuter.children[ 0 ];
 
+			// Wistia: set autoplay on <wistia-player> in the clone so it plays once injected (web component uses attributes, not _wq).
+			if ( isWistia ) {
+				const playerInClone = content.querySelector( 'wistia-player' );
+				if ( playerInClone ) {
+					playerInClone.setAttribute( 'autoplay', '' );
+				}
+			}
+
 			// add the iframe embed content before the embed wrapper.
 			embed.before( content );
 
@@ -71,6 +105,14 @@ function setupEventHandlers( embed, template ) {
 
 			// remove the template item which holds the iframe.
 			template.remove();
+
+			// Wistia: ensure play when API is ready (handles async script load / custom element upgrade).
+			if ( isWistia ) {
+				const playerEl = content.querySelector( 'wistia-player' );
+				if ( playerEl ) {
+					playWistiaPlayer( playerEl );
+				}
+			}
 		} );
 	} );
 }
@@ -81,15 +123,24 @@ function setupEventHandlers( embed, template ) {
 function updateEmbeds() {
 	embedBlocks.forEach( ( embed ) => {
 		// get the associated template element which holds the embed code.
-		// it is the next element after the wrapper.
+		// it is the next element after the wrapper (only used for providers that use template, e.g. YouTube and Wistia).
 		const template = embed.nextElementSibling;
+		if ( ! template || template.tagName !== 'TEMPLATE' ) {
+			return;
+		}
 
-		const iframe = template.content.children[ 0 ].querySelector( 'iframe' );
-		setIframeAttributes( iframe );
+		const embedContent = template.content.children[ 0 ];
+		if ( ! embedContent ) {
+			return;
+		}
+
+		const iframe = embedContent.querySelector( 'iframe' );
+		if ( iframe ) {
+			setIframeAttributes( iframe );
+		}
 
-		// get the first child of the figure and add after tumbnail if present
-		const caption =
-			template.content.children[ 0 ].querySelector( 'figcaption' );
+		// get the first child of the figure and add after thumbnail if present
+		const caption = embedContent.querySelector( 'figcaption' );
 
 		if ( caption ) {
 			const captionEl = createCaptionEl( caption );

composer.json

@@ -13,7 +13,7 @@
 		"phpunit/phpunit": "^9.0",
 		"assertwell/wp-core-test-framework": "^0.2.0",
 		"phpstan/phpstan": "^1.10",
-		"php-stubs/wordpress-stubs": "^5.9",
+		"php-stubs/wordpress-stubs": "^6.6",
 		"szepeviktor/phpstan-wordpress": "^1.1",
 		"phpstan/extension-installer": "^1.1",
 		"php-stubs/acf-pro-stubs": "^5.12",

readme.md

@@ -32,39 +32,117 @@ If you need to rebuild the lando environment you will need to delete the `./dev/
 
 This repo is setup to use the [WP CLI dist-archive](https://developer.wordpress.org/cli/commands/dist-archive/) command.  To build the zip file for the make sure you have the dist-archive command package installed and run `wp dist-archive .` form the root folder. The zip file will be created one folder back form the root folder.
 
+### Vimeo
 
-### Providers
+In order to make Vimeo provider thumbs work correctly create an access token https://help.vimeo.com/hc/en-us/articles/12427789081745-How-to-generate-a-personal-access-token
+Use Tribe Embeds Settings page to store token via DB or set `VIMEO_ACCESS_TOKEN` in you wp-config.php
 
-Each provider represents separate service(YouTube, Vimeo, etc). In order to provide ability extend list of providers use `tribe-embeds_video_provider` hook. 
-For proper use add new class in your theme or plugin. Each provider should extend `Tribe\Tribe_Embed\Provider` class
-Usage example:
+
+## Hooks (filters & actions)
+
+These are the **public** extension points intended for themes/plugins to customize behavior. Names and arguments are considered part of the API.
+
+### Filters
+
+#### `tribe-embeds_allowed_provider_hosts`
+
+Expand or restrict the whitelist of hostnames that can be handled by built-in or custom providers.
+
+- **Signature:** `apply_filters( 'tribe-embeds_allowed_provider_hosts', $allowed_hosts, $host )`
+- **Args:**
+  - `$allowed_hosts` — array of allowed host strings (e.g. ['youtube.com', 'youtu.be', 'vimeo.com', 'dailymotion.com'])
+  - `$host` — the currently detected host
+- **Return:** Modified array of allowed hosts.
+- **Example:**
 ```php
-class TestProvider extends \Tribe\Tribe_Embed\Provider {
-....
-}
-
-function is_allowed_provider(): bool {
-...
-}
-
-/**
- * @var mixed|null $provider  
- * @var array $video_url_data Video url parsed with parse_url
- * @var array $block          The full block, including name and attributes.
- */
-add_filter( 'tribe-embeds_video_provider', function( $provider, $video_url_data, $block ) {
-    if ( is_allowed_provider( $video_url_data['host'] ) ) {
-        return $provider;
-    }
-    return ( new TestProvider( $video_url_data ) );
-}, 10, 3 );
+add_filter( 'tribe-embeds_allowed_provider_hosts', function ( array $hosts ) {
+    $hosts[] = 'videos.example.com';
+    return $hosts;
+}, 10 );
 ```
-A list of allowed providers can be updated via `tribe-embeds_allowed_provider_hosts` hook
+
+#### `tribe_embeds_video_provider`
+
+Allow short-circuit with a ready-made provider instance
+
+- **Signature:** `apply_filters( 'tribe_embeds_video_provider', null, $video_url_data, $block )`
+- **Args:**
+    - `null|<Provider object>` — if object provided resolves immediately and return provided object 
+    - `$video_url_data` — embed video ulr
+    - `$block` — current embed block data
+- **Return:** `null` or provided provider class
+- **Example:**
 ```php
-/**
- * Allows to inject custom provider hosts
- * @var array $allowed_hosts List of allowed hosts
- * @var string $host         Current video hostname                          
- */
-$allowed_hosts = apply_filters( 'tribe-embeds_allowed_provider_hosts', $allowed_hosts, $host );
+add_filter( 'tribe_embeds_video_provider', function ( $obj, $video_url_data, $block ) {
+    // Note: $video_url_data has parsed video url. Provider accepts url string 
+    $provider = new CustomProvider( $video_url );
+
+    return $provider;
+}, 10 );
 ```
+
+#### `tribe_embeds_allowed_provider_hosts_<slug>`
+
+Adjust allowed hosts for provider
+
+- **Signature:** `apply_filters( 'tribe_embeds_allowed_provider_hosts_' . $slug, $base, $provider_class );`
+- **Args:**
+    - `$base` — list of allowed hosts
+    - `$provider_class` — current provider class
+
+#### `tribe_embeds_allowed_provider_hosts`
+
+Adjust allowed hosts for provider
+
+- **Signature:** `apply_filters( 'tribe_embeds_allowed_provider_hosts', $by_provider, $provider_class );`
+- **Args:**
+    - `$by_provider` — List of hosts returned from `tribe_embeds_allowed_provider_hosts_<slug>`
+    - `$provider_class` — current provider class
+
+#### `tribe_embeds_image_sizes_<slug>`
+
+Get image sizes for a provider
+
+- **Signature:** `apply_filters( 'tribe_embeds_image_sizes_' . $slug, $base, $provider_class );`
+- **Args:**
+    - `$base` — list of image sizes
+    - `$provider_class` — current provider class
+
+#### `tribe_embeds_image_sizes`
+
+Get image sizes for a provider
+
+- **Signature:** `apply_filters( 'tribe_embeds_image_sizes', $by_provider, $provider_class );`
+- **Args:**
+    - `$by_provider` — list of image sizes `tribe_embeds_image_sizes`
+    - `$provider_class` — current provider class
+
+#### `tribe_embeds_provider_classes`
+
+Allow external override of provider class list
+
+- **Signature:** `apply_filters( 'tribe_embeds_provider_classes', $provider_classes ?: $defaults );`
+- **Args:**
+    - `$provider_classes` — list of existing providers classes
+
+#### `tribe_embed_<video-provider>_video_thumbnail_url`
+
+Allows adjusting image data for each provider. Use slug instead of `<video-provider>` e.g `tribe_embed_wistia_video_thumbnail_url`
+
+- **Signature:** `apply_filters( 'tribe_embed_wistia_video_thumbnail_url', $image_data, $video_id )`
+- **Args:**
+    - `$image_data` — Thumbnail image data
+    - `$video_id` — current video id
+- **Return:** Video thumbnail image data.
+
+####  `tribe_embeds_facade_html`
+
+Fires an action with the new block markup attached.
+
+- **Signature:** `apply_filters( 'tribe_embeds_facade_html', $facade_html, $provider, $block, $html )`
+- **Args:**
+    - `$facade_html` — Resulting html
+    - `$provider` — provider class
+    - `$block` — current block 
+    - `$html` — original block html
+- **Return:** Embed block markup