Merge branch 'main' into feature/9248

.github/workflows/tests-e2e.yml

@@ -150,12 +150,12 @@ jobs:
             snapshots: true
             shard: '4/4'
           - browser: 'chrome'
-            wp: '6.0-RC1'
+            wp: '6.0-RC2'
             experimental: true
             snapshots: false
             shard: '1/2'
           - browser: 'chrome'
-            wp: '6.0-RC1'
+            wp: '6.0-RC2'
             experimental: true
             snapshots: false
             shard: '2/2'

bin/local-env/install-wordpress.sh

@@ -143,7 +143,7 @@ echo -e $(status_message "Installing WordPress importer...")
 wp plugin install wordpress-importer --activate --force --quiet
 
 # Only install woocommerce on latest version of WordPress.
-if [ "$WP_VERSION" == "latest" ] || [ "$WP_VERSION" == "6.0-RC1" ]; then
+if [ "$WP_VERSION" == "latest" ] || [ "$WP_VERSION" == "6.0-RC2" ]; then
 	echo -e $(status_message "Installing WooCommerce plugin...")
 	wp plugin install woocommerce --activate --force --quiet
 fi
@@ -230,7 +230,7 @@ wp post list --post_type=attachment --format=yaml
 wp plugin list --format=yaml
 
 # Only install woocommerce on latest version of WordPress.
-if [ "$WP_VERSION" == "latest" ] || [ "$WP_VERSION" == "6.0-RC1" ]; then
+if [ "$WP_VERSION" == "latest" ] || [ "$WP_VERSION" == "6.0-RC2" ]; then
 	echo -e $(status_message "Import sample woocommerce products...")
 	wp import /var/www/html/wp-content/plugins/woocommerce/sample-data/sample_products.xml --authors=skip --quiet
 	# deactivate test etc... can activate as needed

docs/third-party-integration/story-editor/integration-layer.md

@@ -436,6 +436,7 @@ Design Checks :
 - `PageTooManyLinks`
 - `VideoElementResolution`
 - `ImageElementResolution`
+- `FirstPageAnimation`
 
 Priority Checks :
 

includes/data/fonts/fonts.json

@@ -32638,6 +32638,31 @@
       "lGap": 0
     }
   },
+  {
+    "family": "Roboto Flex",
+    "fallbacks": ["sans-serif"],
+    "weights": [400],
+    "styles": ["regular"],
+    "variants": [[0, 400]],
+    "service": "fonts.google.com",
+    "metrics": {
+      "upm": 2048,
+      "asc": 1900,
+      "des": -500,
+      "tAsc": 1900,
+      "tDes": -500,
+      "tLGap": 0,
+      "wAsc": 2461,
+      "wDes": 600,
+      "xH": 1052,
+      "capH": 1456,
+      "yMin": -600,
+      "yMax": 2461,
+      "hAsc": 1900,
+      "hDes": -500,
+      "lGap": 0
+    }
+  },
   {
     "family": "Roboto Mono",
     "fallbacks": ["monospace"],

packages/design-system/package.json

@@ -46,7 +46,7 @@
     "mousetrap": "^1.6.5",
     "polished": "^4.2.2",
     "prop-types": "^15.8.1",
-    "react-modal": "^3.14.4",
+    "react-modal": "^3.15.1",
     "react-transition-group": "^4.4.2",
     "styled-components": "^5.3.3",
     "uuid": "^8.3.2"

packages/design-system/src/components/contextMenu/menu.js

@@ -153,6 +153,8 @@ const Menu = forwardRef(
 
         if (menuRef.current === evt.target && isFocusOutsideMenu) {
           const focusableChildren = getFocusableChildren(menuRef.current);
+          // used to shift focus outline correctly
+          document.dispatchEvent(new KeyboardEvent('keydown', { key: 'tab' }));
           focusableChildren?.[0]?.focus();
         }
       },

packages/element-library/src/gif/index.js

@@ -19,7 +19,7 @@
  */
 export { default as Edit } from './edit';
 export { default as Frame } from './frame';
-export { default as LayerContent } from './layer';
+export { default as getLayerText } from './layer';
 export { default as Output } from './output';
 export { default as LayerIcon } from './icon';
 export { default as TextContent } from '../media/textContent';

packages/element-library/src/gif/layer.js

@@ -17,20 +17,11 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
-import { StoryPropTypes } from '@googleforcreators/elements';
 
-/**
- * Internal dependencies
- */
-import { LayerText } from '../shared';
-
-function GifLayerContent({ element }) {
+function getGifLayerText(element) {
   const { alt } = element?.resource || {};
 
-  return <LayerText>{alt || __('GIF', 'web-stories')}</LayerText>;
+  return alt || __('GIF', 'web-stories');
 }
-GifLayerContent.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-};
 
-export default GifLayerContent;
+export default getGifLayerText;

packages/element-library/src/image/index.js

@@ -21,7 +21,7 @@ export { default as Edit } from './edit';
 export { default as Frame } from './frame';
 export { default as Output } from './output';
 export { default as LayerIcon } from './icon';
-export { default as LayerContent } from './layer';
+export { default as getLayerText } from './layer';
 export { default as Display } from '../media/imageDisplay';
 export { default as TextContent } from '../media/textContent';
 

packages/element-library/src/image/layer.js

@@ -17,20 +17,11 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
-import { StoryPropTypes } from '@googleforcreators/elements';
 
-/**
- * Internal dependencies
- */
-import { LayerText } from '../shared';
-
-function ImageLayerContent({ element }) {
+function getImageLayerText(element) {
   const { alt } = element?.resource || {};
 
-  return <LayerText>{alt || __('Image', 'web-stories')}</LayerText>;
+  return alt || __('Image', 'web-stories');
 }
-ImageLayerContent.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-};
 
-export default ImageLayerContent;
+export default getImageLayerText;

packages/element-library/src/product/index.js

@@ -19,7 +19,7 @@
  */
 export { default as Display } from './display';
 export { default as Output } from './output';
-export { default as LayerContent } from './layer';
+export { default as getLayerText } from './layer';
 export { default as LayerIcon } from './icon';
 
 export * from './constants';

packages/element-library/src/product/layer.js

@@ -18,22 +18,9 @@
  * External dependencies
  */
 import { __ } from '@googleforcreators/i18n';
-import { StoryPropTypes } from '@googleforcreators/elements';
 
-/**
- * Internal dependencies
- */
-import { LayerText } from '../shared/layerText';
-
-function ProductLayerContent({ element }) {
-  return (
-    <LayerText>
-      {element?.product?.productTitle || __('Product', 'web-stories')}
-    </LayerText>
-  );
+function getProductLayerText(element) {
+  return element?.product?.productTitle || __('Product', 'web-stories');
 }
-ProductLayerContent.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-};
 
-export default ProductLayerContent;
+export default getProductLayerText;

packages/element-library/src/shape/index.js

@@ -19,7 +19,7 @@
  */
 export { default as Display } from './display';
 export { default as Output } from './output';
-export { default as LayerContent } from './layer';
+export { default as getLayerText } from './layer';
 export { default as LayerIcon } from './icon';
 
 export * from './constants';

packages/element-library/src/shape/layer.js

@@ -18,20 +18,10 @@
  */
 import { __ } from '@googleforcreators/i18n';
 import { getMaskByType } from '@googleforcreators/masks';
-import { StoryPropTypes } from '@googleforcreators/elements';
 
-/**
- * Internal dependencies
- */
-import { LayerText } from '../shared';
-
-function ShapeLayerContent({ element }) {
+function getShapeLayerText(element) {
   const maskDef = getMaskByType(element.mask.type);
-
-  return <LayerText>{maskDef.name || __('Shape', 'web-stories')}</LayerText>;
+  return maskDef.name || __('Shape', 'web-stories');
 }
-ShapeLayerContent.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-};
 
-export default ShapeLayerContent;
+export default getShapeLayerText;

packages/element-library/src/shared/index.js

@@ -16,5 +16,4 @@
 
 export * from './constants';
 export * from './shared';
-export { LayerText } from './layerText';
 export { default as useColorTransformHandler } from './useColorTransformHandler';

packages/element-library/src/sticker/icon.js

@@ -28,15 +28,15 @@ const style = {
 
 const Noop = () => null;
 
-function StickerLayerContent({ element }) {
+function StickerLayerIcon({ element }) {
   const { sticker } = element;
   const Sticker = stickers[sticker.type]?.svg || Noop;
 
   return <Sticker style={style} />;
 }
 
-StickerLayerContent.propTypes = {
+StickerLayerIcon.propTypes = {
   element: StoryPropTypes.elements.sticker.isRequired,
 };
 
-export default StickerLayerContent;
+export default StickerLayerIcon;

packages/element-library/src/sticker/index.js

@@ -17,7 +17,7 @@
 /**
  * Internal dependencies
  */
-export { default as LayerContent } from './layer';
+export { default as getLayerText } from './layer';
 export { default as Output } from './output';
 export { default as LayerIcon } from './icon';
 export { default as Display } from './display';

packages/element-library/src/sticker/layer.js

@@ -18,21 +18,10 @@
  */
 import { __ } from '@googleforcreators/i18n';
 import stickers from '@googleforcreators/stickers';
-import { StoryPropTypes } from '@googleforcreators/elements';
 
-/**
- * Internal dependencies
- */
-import { LayerText } from '../shared';
-
-function StickerLayerContent({ element }) {
+function getStickerLayerText(element) {
   const { sticker } = element;
-  const layerTitle =
-    stickers[sticker?.type]?.title || __('Sticker', 'web-stories');
-  return <LayerText>{layerTitle}</LayerText>;
+  return stickers[sticker?.type]?.title || __('Sticker', 'web-stories');
 }
-StickerLayerContent.propTypes = {
-  element: StoryPropTypes.element.isRequired,
-};
 
-export default StickerLayerContent;
+export default getStickerLayerText;

packages/element-library/src/text/index.js

@@ -22,7 +22,7 @@ export { default as Edit } from './edit';
 export { default as Frame } from './frame';
 export { default as Output } from './output';
 export { default as TextContent } from './textContent';
-export { default as LayerContent } from './layer';
+export { default as getLayerText } from './layer';
 export { default as LayerIcon } from './icon';
 export { default as updateForResizeEvent } from './updateForResizeEvent';