Editor: Add support for amp-story-audio-sticker

includes/KSES.php

@@ -736,6 +736,11 @@ public function filter_kses_allowed_html( $allowed_tags ) {
 				'clip-rule' => true,
 				'fill'      => true,
 			],
+			'amp-story-audio-sticker'       => [
+				'size'          => true,
+				'sticker'       => true,
+				'sticker-style' => true,
+			],
 		];
 
 		$allowed_tags = $this->array_merge_recursive_distinct( $allowed_tags, $story_components );

packages/design-system/src/icons/index.ts

@@ -17,6 +17,7 @@
 /**
  * Internal dependencies
  */
+
 export { default as AlignBottom } from './align_bottom.svg';
 export { default as AlignCenter } from './align_center.svg';
 export { default as AlignLeft } from './align_left.svg';
@@ -39,8 +40,9 @@ export { default as ArrowOutline } from './arrow_outline.svg';
 export { default as ArrowRight } from './arrow_right.svg';
 export { default as ArrowRightCurved } from './arrow_right_curved.svg';
 export { default as ArrowRightLarge } from './arrow_right_large.svg';
-export { default as ArrowUp } from './arrow_up.svg';
 export { default as ArrowsLeftRight } from './arrows_leftright.svg';
+export { default as ArrowUp } from './arrow_up.svg';
+export { default as AudioSticker } from './audio_stickers.svg';
 export { default as BackgroundBlur } from './background_blur.svg';
 export { default as BackgroundBlurOff } from './background_blur_off.svg';
 export { default as Border } from './border.svg';
@@ -83,6 +85,7 @@ export { default as FloppyDisk } from './floppy_disk.svg';
 export { default as GearWithGauge } from './gear_with_gauge.svg';
 export { default as Gif } from './gif.svg';
 export { default as Group } from './group.svg';
+export { default as History } from './history.svg';
 export { default as Keyboard } from './keyboard.svg';
 export { default as Launch } from './launch.svg';
 export { default as LetterAHeight } from './letter_a_height.svg';
@@ -94,9 +97,9 @@ export { default as LetterMOutline } from './letter_m_outline.svg';
 export { default as LetterSStrikethrough } from './letter_s_strikethrough.svg';
 export { default as LetterT } from './letter_t.svg';
 export { default as LetterTArrow } from './letter_t_arrow.svg';
+export { default as LetterTLargeLetterTSmall } from './letter_t_large_letter_t_small.svg';
 export { default as LetterTPlus } from './letter_t_plus.svg';
 export { default as LetterTUppercase } from './letter_t_uppercase.svg';
-export { default as LetterTLargeLetterTSmall } from './letter_t_large_letter_t_small.svg';
 export { default as LetterUUnderline } from './letter_u_underline.svg';
 export { default as Link } from './link.svg';
 export { default as LockClosed } from './lock_closed.svg';
@@ -123,12 +126,13 @@ export { default as PictureSwap } from './picture_swap.svg';
 export { default as Pipette } from './pipette.svg';
 export { default as Play } from './play.svg';
 export { default as PlayFilled } from './play_filled.svg';
-export { default as PlusFilledSmall } from './plus_filled_small.svg';
 export { default as PlayOutline } from './play_outline.svg';
 export { default as Plus } from './plus.svg';
 export { default as PlusFilled } from './plus_filled.svg';
+export { default as PlusFilledSmall } from './plus_filled_small.svg';
 export { default as PlusOutline } from './plus_outline.svg';
 export { default as QuestionMarkOutline } from './question_mark_outline.svg';
+export { default as RemoveMask } from './remove_mask.svg';
 export { default as Rotate } from './rotate.svg';
 export { default as Scissors } from './scissors.svg';
 export { default as Settings } from './settings.svg';
@@ -148,5 +152,3 @@ export { default as Union } from './union.svg';
 export { default as Video } from './video.svg';
 export { default as Visibility } from './visibility.svg';
 export { default as VisibilityOff } from './visibility_off.svg';
-export { default as RemoveMask } from './remove_mask.svg';
-export { default as History } from './history.svg';

packages/design-system/src/utils/panelTypes.ts

@@ -34,6 +34,7 @@ enum PanelTypes {
   ImageAccessibility = 'imageAccessibility',
   VideoAcessibility = 'videoAccessibility',
   Product = 'product',
+  AudioSticker = 'audioSticker',
 }
 
 export default PanelTypes;

packages/element-library/src/audioSticker/constants.js

@@ -0,0 +1,58 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { PanelTypes } from '@googleforcreators/design-system';
+
+/**
+ * Internal dependencies
+ */
+import { SHARED_DEFAULT_ATTRIBUTES } from '../shared';
+
+export const hasEditMode = false;
+export const hasEditModeIfLocked = false;
+export const hasEditModeMoveable = false;
+export const editModeGrayout = false;
+
+export const hasDesignMenu = true;
+
+export const hasDuplicateMenu = false;
+
+export const isMedia = false;
+
+export const canFlip = true;
+
+export const isMaskable = false;
+
+export const isAspectAlwaysLocked = true;
+
+export const resizeRules = {
+  vertical: false,
+  horizontal: false,
+  diagonal: false,
+};
+
+export const defaultAttributes = {
+  ...SHARED_DEFAULT_ATTRIBUTES,
+  size: 'small',
+  sticker: 'headphone-cat',
+  style: 'none',
+  lockDimensions: true,
+};
+
+export const panels = [PanelTypes.ElementAlignment, PanelTypes.AudioSticker];

packages/element-library/src/audioSticker/display.js

@@ -0,0 +1,60 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+import { StoryPropTypes } from '@googleforcreators/elements';
+
+/**
+ * Internal dependencies
+ */
+import { elementFillContent } from '../shared';
+import {
+  AUDIO_STICKERS,
+  AUDIO_STICKER_STYLES,
+  AUDIO_STICKER_LABELS,
+} from '../constants';
+
+const Element = styled.img`
+  ${elementFillContent}
+  ${({ stickerStyle }) => AUDIO_STICKER_STYLES[stickerStyle]}
+`;
+
+function AudioStickerDisplay({ element }) {
+  const {
+    width: elementWidth,
+    height: elementHeight,
+    sticker,
+    style,
+  } = element;
+
+  return (
+    <Element
+      src={AUDIO_STICKERS[sticker]}
+      stickerStyle={style}
+      height={elementHeight}
+      width={elementWidth}
+      alt={AUDIO_STICKER_LABELS[sticker].label}
+    />
+  );
+}
+
+AudioStickerDisplay.propTypes = {
+  element: StoryPropTypes.elements.shape.isRequired,
+};
+
+export default AudioStickerDisplay;

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

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import styled from 'styled-components';
+import { Icons } from '@googleforcreators/design-system';
+
+const IconContainer = styled.div`
+  height: 21px;
+  width: 21px;
+  overflow: hidden;
+`;
+
+function AudioStickerIcon() {
+  return (
+    <IconContainer>
+      <Icons.AudioSticker height={21} width={21} />
+    </IconContainer>
+  );
+}
+
+export default AudioStickerIcon;

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

@@ -0,0 +1,21 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export { default as Display } from './display';
+export { default as Output } from './output';
+export { default as LayerIcon } from './icon';
+export { default as getLayerText } from './layer';
+
+export * from './constants';

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

@@ -0,0 +1,25 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies
+ */
+import { __ } from '@googleforcreators/i18n';
+
+function getAudioStickerLayerText() {
+  return __('Audio Sticker', 'web-stories');
+}
+
+export default getAudioStickerLayerText;

packages/element-library/src/audioSticker/output.js

@@ -0,0 +1,41 @@
+/*
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import { StoryPropTypes } from '@googleforcreators/elements';
+
+function AudioStickerOutput({ element }) {
+  return (
+    <amp-story-audio-sticker
+      size={element.size}
+      sticker={element.sticker}
+      sticker-style={
+        element.style && element.style !== 'none' ? element.style : undefined
+      }
+      style={{
+        height: '100%',
+      }}
+    />
+  );
+}
+
+AudioStickerOutput.propTypes = {
+  element: StoryPropTypes.elements.audioSticker.isRequired,
+};
+
+export default AudioStickerOutput;

packages/element-library/src/audioSticker/test/output.js

@@ -0,0 +1,43 @@
+/*
+ * Copyright 2020 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * Internal dependencies
+ */
+import AudioStickerOutput from '../output';
+
+describe('AudioSticker output', () => {
+  // eslint-disable-next-line jest/no-disabled-tests -- This test will fail until this PR - https://github.com/ampproject/amphtml/pull/39913 is merged.
+  it.skip('should produce valid AMP output', async () => {
+    const props = {
+      element: {
+        type: 'audioSticker',
+        id: '123',
+        x: 50,
+        y: 100,
+        height: 1920,
+        width: 1080,
+        rotationAngle: 0,
+        size: 'small',
+        sticker: 'headphone-cat',
+        style: 'none',
+      },
+      box: { width: 1080, height: 1920, x: 50, y: 100, rotationAngle: 0 },
+    };
+
+    await expect(<AudioStickerOutput {...props} />).toBeValidAMPStoryElement();
+  });
+});