Block: Improve carousel UX

.eslintrc

@@ -58,7 +58,7 @@
       "",
       {
         "pattern": " \\* Copyright \\d{4} Google LLC",
-        "template": " * Copyright 2024 Google LLC"
+        "template": " * Copyright 2025 Google LLC"
       },
       " *",
       " * Licensed under the Apache License, Version 2.0 (the \"License\");",

babel.config.cjs

@@ -33,6 +33,13 @@ module.exports = function (api) {
           targets,
           useBuiltIns: 'usage',
           corejs: require('core-js/package.json').version,
+          // Remove some unnecessary polyfills, similar to how Gutenberg is handling that.
+          // See https://github.com/WordPress/gutenberg/blob/e95970d888c309274e24324d593c77c536c9f1d8/packages/babel-preset-default/polyfill-exclusions.js.
+          exclude: [
+            'es.array.push',
+            /^es(next)?\.set\./,
+            /^es(next)?\.iterator\./,
+          ],
         },
       ],
       [

includes/Assets.php

@@ -302,7 +302,15 @@ public function register_style( string $style_handle, $src, array $deps = [], $v
 	 */
 	public function register_script( string $script_handle, $src, array $deps = [], $ver = false, bool $in_footer = false, bool $with_i18n = true ): bool {
 		if ( ! isset( $this->register_scripts[ $script_handle ] ) ) {
-			$this->register_scripts[ $script_handle ] = wp_register_script( $script_handle, $src, $deps, $ver, $in_footer );
+			$this->register_scripts[ $script_handle ] = wp_register_script(
+				$script_handle,
+				$src,
+				$deps,
+				$ver,
+				[
+					'in_footer' => $in_footer,
+				]
+			);
 
 			if ( $src && $with_i18n ) {
 				wp_set_script_translations( $script_handle, 'web-stories' );

includes/Renderer/Stories/Carousel_Renderer.php

@@ -66,8 +66,7 @@
 	public function load_assets(): void {
 		parent::load_assets();
 
-		$this->assets->register_script_asset( self::SCRIPT_HANDLE );
-		$this->assets->register_style_asset( self::SCRIPT_HANDLE );
+		$this->assets->register_script_asset( self::SCRIPT_HANDLE, [], false );
 
 		wp_localize_script(
 			self::SCRIPT_HANDLE,
@@ -98,13 +97,22 @@
 		ob_start();
 		?>
 		<div class="<?php echo esc_attr( $container_classes ); ?>" data-id="<?php echo esc_attr( (string) $this->instance_id ); ?>">
-			<div class="web-stories-list__inner-wrapper <?php echo esc_attr( 'carousel-' . $this->instance_id ); ?>" style="<?php echo esc_attr( $container_styles ); ?>">
+			<div
+			class="web-stories-list__inner-wrapper <?php echo esc_attr( 'carousel-' . $this->instance_id ); ?>"
+			style="<?php echo esc_attr( $container_styles ); ?>"
+			>
 				<?php
+				$this->maybe_render_archive_link();
+
 				if ( ! $this->context->is_amp() ) {
-					$this->assets->enqueue_script_asset( self::SCRIPT_HANDLE );
-					$this->assets->enqueue_style_asset( self::SCRIPT_HANDLE );
+					$this->assets->enqueue_script( self::SCRIPT_HANDLE );
 					?>
-					<div class="web-stories-list__carousel <?php echo esc_attr( $this->get_view_type() ); ?>" data-id="<?php echo esc_attr( 'carousel-' . $this->instance_id ); ?>">
+					<div
+					class="web-stories-list__carousel <?php echo esc_attr( $this->get_view_type() ); ?>"
+					data-id="<?php echo esc_attr( 'carousel-' . $this->instance_id ); ?>"
+					data-prev="<?php esc_attr_e( 'Previous', 'web-stories' ); ?>"
+					data-next="<?php esc_attr_e( 'Next', 'web-stories' ); ?>"
+					>
 						<?php
 						array_map(
 							function () {
@@ -140,7 +148,6 @@
 					</amp-carousel>
 					<?php
 				}
-				$this->maybe_render_archive_link();
 				?>
 			</div>
 		</div>
@@ -164,13 +171,14 @@
 	 *
 	 * @since 1.5.0
 	 *
-	 * @return array<string,array<string,bool>> Carousel settings.
+	 * @return array<string,array<string,bool>|string> Carousel settings.
 	 */
 	protected function get_carousel_settings(): array {
 		return [
-			'config' => [
+			'config'     => [
 				'isRTL' => is_rtl(),
 			],
+			'publicPath' => $this->assets->get_base_url( 'assets/js/' ),
 		];
 	}
 }

packages/glider/package.json

@@ -24,9 +24,11 @@
     "npm": ">= 7.3"
   },
   "type": "module",
-  "main": "./src/index.js",
+  "main": "./src/index.ts",
   "dependencies": {
     "glider-js": "^1.7.9"
   },
-  "devDependencies": {}
+  "devDependencies": {
+    "@types/glider-js" : "^1.7.11"
+  }
 }

packages/glider/src/index.js → packages/glider/src/index.ts

@@ -25,19 +25,26 @@ import 'glider-js/glider.css';
  *
  * Glider-JS doesn't support RTL at the moment, this is to add basic
  * functioning support for the nav arrows as otherwise the nav arrows
- * becomes useless on RTL sites.
+ * become useless on RTL sites.
  *
  * @todo Maybe replace glider-js with other lightweight lib which has RTL support. or Replace it with 'amp-carousel' once we have the support.
- * @param {Object|string} slide Slide arrow string based on action.
- * @param {boolean}       dot   Is dot navigation action.
- * @param {Object}        e     Event object.
- * @return {boolean} Navigation done.
+ * @param slideIndex Slide arrow string based on action.
+ * @param isActuallyDotIndex   Is dot navigation action.
+ * @param e     Event object.
+ * @return Navigation done.
  */
-Glider.prototype.scrollItem = function (slide, dot, e) {
-  // glider-js doesn't seem to pass right amount of arguments.
-  if (e === undefined && dot?.target) {
-    e = dot;
-    dot = false;
+Glider.prototype.scrollItem = function (
+  slideIndex: number,
+  isActuallyDotIndex: boolean,
+  e: Event
+) {
+  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Workaround
+  // @ts-ignore
+  if (e === undefined && isActuallyDotIndex?.target) {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- Workaround
+    // @ts-ignore
+    e = isActuallyDotIndex;
+    isActuallyDotIndex = false;
   }
 
   if (e === undefined) {
@@ -50,17 +57,21 @@ Glider.prototype.scrollItem = function (slide, dot, e) {
   }
 
   // Somehow slidesToScroll and slidesToShow can end up being 0.
-  this.opt.slidesToScroll = Math.max(1, this.opt.slidesToScroll);
-  this.opt.slidesToShow = Math.max(1, this.opt.slidesToShow);
+  this.opt.slidesToScroll = Math.max(1, this.opt.slidesToScroll as number);
+  this.opt.slidesToShow = Math.max(1, this.opt.slidesToShow as number);
   // This will also cause this.itemWidth to be Infinity because division by zero returns Infinity in JS.
   // Update this.itemWidth with actual value in this case.
   if (this.itemWidth === Number.POSITIVE_INFINITY) {
     // It's a sibling.
-    const carouselWrapper = e.target.parentElement.querySelector(
+    const carouselWrapper = (
+      e.target as HTMLElement
+    ).parentElement?.querySelector(
       '.web-stories-list__carousel'
-    );
+    ) as HTMLElement;
     const itemStyle = window.getComputedStyle(
-      carouselWrapper.querySelector('.web-stories-list__story')
+      carouselWrapper.querySelector(
+        '.web-stories-list__story'
+      ) as unknown as HTMLElement
     );
 
     this.itemWidth =
@@ -69,56 +80,62 @@ Glider.prototype.scrollItem = function (slide, dot, e) {
         Number.parseFloat(itemStyle.marginRight));
   }
 
-  const originalSlide = slide;
+  const originalSlide = slideIndex;
   ++this.animate_id;
 
-  if (dot === true) {
-    slide = slide * this.containerWidth;
-    slide = Math.round(slide / this.itemWidth) * this.itemWidth;
+  if (isActuallyDotIndex === true) {
+    slideIndex = slideIndex * this.containerWidth;
+    slideIndex = Math.round(slideIndex / this.itemWidth) * this.itemWidth;
   } else {
-    if (typeof slide === 'string') {
-      const backwards = slide === 'prev';
+    if (typeof slideIndex === 'string') {
+      const backwards = slideIndex === 'prev';
 
       // use precise location if fractional slides are on
       if (this.opt.slidesToScroll % 1 || this.opt.slidesToShow % 1) {
-        slide = this.getCurrentSlide();
+        slideIndex = this.getCurrentSlide();
       } else {
-        slide = !isNaN(this.slide) ? this.slide : 0;
+        slideIndex = !isNaN(this.slide) ? this.slide : 0;
       }
 
       if (backwards) {
-        slide -= this.opt.slidesToScroll;
+        slideIndex -= this.opt.slidesToScroll;
       } else {
-        slide += this.opt.slidesToScroll;
+        slideIndex += this.opt.slidesToScroll;
       }
 
       if (this.opt.rewind) {
-        const scrollLeft = this.ele.scrollLeft;
-        slide =
+        const scrollLeft = (this.ele as HTMLElement)
+          .scrollLeft as unknown as number;
+        slideIndex =
           backwards && !scrollLeft
             ? this.slides.length
             : !backwards &&
                 scrollLeft + this.containerWidth >= Math.floor(this.trackWidth)
               ? 0
-              : slide;
+              : slideIndex;
       }
     }
 
-    slide = Math.min(slide, this.slides.length);
+    slideIndex = Math.min(slideIndex, this.slides.length);
 
-    this.slide = slide;
-    slide = this.itemWidth * slide;
+    this.slide = slideIndex;
+    slideIndex = this.itemWidth * slideIndex;
   }
 
   this.scrollTo(
-    slide,
-    this.opt.duration * Math.abs(this.ele.scrollLeft - slide),
-    function () {
+    slideIndex,
+    this.opt.duration *
+      Math.abs((this.ele as HTMLElement).scrollLeft - slideIndex),
+    function (this: Glider<HTMLElement>) {
       this.updateControls();
       this.emit('animated', {
         value: originalSlide,
         type:
-          typeof originalSlide === 'string' ? 'arrow' : dot ? 'dot' : 'slide',
+          typeof originalSlide === 'string'
+            ? 'arrow'
+            : isActuallyDotIndex
+              ? 'dot'
+              : 'slide',
       });
     }
   );

packages/glider/tsconfig.json

@@ -0,0 +1,9 @@
+{
+  "extends": "../../tsconfig.shared.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "declarationDir": "dist-types"
+  },
+  "references": [],
+   "include": ["src/**/*"]
+}

packages/stories-block/src/block/block-types/latest-stories/edit.js

@@ -26,8 +26,7 @@
 import { addQueryArgs } from '@wordpress/url';
 import { Button, Placeholder } from '@wordpress/components';
 import { BlockIcon } from '@wordpress/block-editor';
-import { useSelect } from '@wordpress/data';
-import { store as coreStore } from '@wordpress/core-data';
+import { useEntityRecords } from '@wordpress/core-data';
 
 /**
  * Internal dependencies
@@ -49,57 +48,39 @@
   const { numOfStories, order, orderby, archiveLinkLabel, authors, taxQuery } =
     attributes;
 
-  /**
-   * Fetch stories based on the query.
-   *
-   * @return {void}
-   */
-  const { isFetchingStories, fetchedStories } = useSelect(
-    (select) => {
-      const { getEntityRecords, isResolving } = select(coreStore);
-      const newQuery = {
-        per_page: 20,
-        _embed: 'author,wp:featuredmedia',
-        orderby: orderby || 'modified',
-        order: order || 'desc',
-        author: authors || undefined,
-        ...taxQuery,
-      };
-
-      return {
-        fetchedStories:
-          getEntityRecords('postType', 'web-story', newQuery) || [],
-        isFetchingStories:
-          isResolving('postType', 'web-story', newQuery) || false,
-      };
-    },
-    [order, orderby, authors, taxQuery]
-  );
+  const data = useEntityRecords('postType', 'web-story', {
+    per_page: 20,
+    _embed: 'author,wp:featuredmedia',
+    orderby: orderby || 'modified',
+    order: order || 'desc',
+    author: authors || undefined,
+    ...taxQuery,
+  });
 
   const viewAllLabel = archiveLinkLabel
     ? archiveLinkLabel
     : __('View All Stories', 'web-stories');
 
   const storiesToDisplay =
-    fetchedStories.length > numOfStories
-      ? fetchedStories.slice(0, numOfStories)
-      : fetchedStories;
+    data.records?.length > numOfStories
+      ? data.records.slice(0, numOfStories)
+      : data.records;
 
   return (
     <>
       <StoriesInspectorControls
         attributes={attributes}
         setAttributes={setAttributes}
       />
-      {isFetchingStories && <StoriesLoading />}
-      {!isFetchingStories && Boolean(storiesToDisplay?.length) && (
+      {!data.hasResolved && <StoriesLoading />}
+      {data.hasResolved && Boolean(storiesToDisplay?.length) && (
         <StoriesPreview
           attributes={attributes}
           stories={storiesToDisplay}
           viewAllLabel={viewAllLabel}
         />
       )}
-      {!isFetchingStories && !storiesToDisplay?.length && (
+      {data.hasResolved && !storiesToDisplay?.length && (
         <Placeholder
           icon={<BlockIcon icon={<WebStoriesLogo />} showColors />}
           label={__('Latest Stories', 'web-stories')}