update component according latest eightshift standards

infinum · Jun 13, 2024 · abcd57d · abcd57d
1 parent b38a738
commit abcd57d
Show file tree

Hide file tree

Showing 7 changed files with 83 additions and 235 deletions.
diff --git a/blocks/init/src/Blocks/components/embed/components/embed-editor.js b/blocks/init/src/Blocks/components/embed/components/embed-editor.js
@@ -1,9 +1,7 @@
 import React from 'react';
-import classnames from 'classnames';
-import { video } from '@wordpress/icons';
 import { Placeholder } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
-import { selector, checkAttr } from '@eightshift/frontend-libs/scripts';
+import { checkAttr, classnames, bem, icons } from '@eightshift/frontend-libs/scripts';
 import manifest from '../manifest.json';
 
 export const EmbedEditor = (attributes) => {
@@ -20,44 +18,37 @@ export const EmbedEditor = (attributes) => {
 	const embedUse = checkAttr('embedUse', attributes, manifest);
 	let embedUrl = checkAttr('embedUrl', attributes, manifest);
 
-	const embedClass = classnames([
-		selector(componentClass, componentClass),
-		selector(blockClass, blockClass, selectorClass),
-		selector(additionalClass, additionalClass),
-	]);
-
-	const embedIframeClass = classnames([
-		selector(componentClass, componentClass, 'iframe'),
-		selector(blockClass, blockClass, `${selectorClass}-iframe`),
-	]);
-
-	if (embedUrl.includes('https://www.youtube.com/watch?v=')) {
-		embedUrl = embedUrl.replace('watch?v=', 'embed/');
-	}
+	const embedClass = classnames(
+		componentClass,
+		bem(blockClass, selectorClass),
+		additionalClass,
+	);
 
-	if (embedUrl.includes('https://vimeo.com')) {
-		const matches = [...embedUrl.matchAll(/https:\/\/vimeo\.com\/(\d+)/g)];
+	const embedIframeClass = classnames(
+		bem(componentClass, 'iframe'),
+		bem(blockClass, `${selectorClass}-iframe`),
+	);
 
-		const videoId = matches[0][1] ?? '';
-		embedUrl = `https://player.vimeo.com/video/${videoId}`;
+	if (!embedUse) {
+		return null;
 	}
 
 	return (
 		<>
-			{embedUse &&
-				<>
-					{(embedUrl === '') ?
-						<Placeholder icon={video} label={__('Please add embed using sidebar options!', 'safer-internet')} /> :
-						<div className={embedClass}>
-							<iframe
-								title={'video'}
-								className={embedIframeClass}
-								src={embedUrl}
-							/>
-						</div>
-					}
-				</>
-			}
+			{embedUrl ? (
+				<div className={embedClass}>
+					<iframe
+						title={__('video', '%g_textdomain%')}
+						className={embedIframeClass}
+						src={embedUrl}
+					/>
+				</div>
+			) : (
+				<Placeholder
+					icon={icons.video}
+					label={__('Please add embed using sidebar options!', '%g_textdomain%')}
+				/>
+			)}
 		</>
 	);
 };
diff --git a/blocks/init/src/Blocks/components/embed/components/embed-options.js b/blocks/init/src/Blocks/components/embed/components/embed-options.js
@@ -1,24 +1,23 @@
 import React from 'react';
-import { __, sprintf } from '@wordpress/i18n';
-import { useState } from '@wordpress/element';
-import { ToggleControl, TextControl, Notice } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+import { TextControl } from '@wordpress/components';
 import {
 	UseToggle,
 	checkAttr,
-	getAttrKey
+	getAttrKey,
+	Notification,
+	icons,
+	Section
 } from '@eightshift/frontend-libs/scripts';
 import manifest from '../manifest.json';
 
 export const EmbedOptions = (attributes) => {
-	const {
-		title: manifestTitle,
-	} = manifest;
+	const { title: manifestTitle } = manifest;
 
 	const {
 		setAttributes,
 		label = manifestTitle,
 		embedShowControls = true,
-
 		showEmbedUse = true,
 		showEmbedUrl = true,
 		showEmbedTitle = true,
@@ -41,97 +40,86 @@ export const EmbedOptions = (attributes) => {
 	const embedPictureInPicture = checkAttr('embedPictureInPicture', attributes, manifest);
 	const embedAllowFullScreen = checkAttr('embedAllowFullScreen', attributes, manifest);
 
-	const [showAdvanced, setShowAdvanced] = useState(false);
-
 	return (
 		<UseToggle
-			label={sprintf(__('%s', 'safer-internet'), label)}
+			label={label}
 			checked={embedUse}
 			onChange={(value) => setAttributes({ [getAttrKey('embedUse', attributes, manifest)]: value })}
 			noUseToggle={!showEmbedUse}
 			noLabel={!label}
 		>
-
-			{embedUse &&
+			{embedUse && (
 				<>
-
-					{showEmbedUrl &&
+					{showEmbedUrl && (
 						<>
 							<TextControl
-								label={__('Url', 'safer-internet')}
+								label={__('URL', '%g_textdomain%')}
 								value={embedUrl}
 								onChange={(value) => setAttributes({ [getAttrKey('embedUrl', attributes, manifest)]: value })}
-								help={__('Will work with YouTube and Vimeo links', 'safer-internet')}
+								help={__('Video link format ex: https://www.youtube.com/embed/VIDEO_ID', '%g_textdomain%')}
+							/>
+							<Notification
+								type="warning"
+								text={__('Please pay attention so everything is GDPR compliant', '%g_textdomain%')}
+								iconOverride={icons.a11yWarning}
+								noBottomSpacing
 							/>
-
-							<Notice
-								status={'warning'}
-								isDismissible={false}
-							>
-								{__('Please pay attention so everything is GDPR compliant.', 'safer-internet')}
-							</Notice>
 						</>
-					}
+					)}
 
-					{showEmbedTitle &&
+					{showEmbedTitle && (
 						<TextControl
-							label={__('Title', 'safer-internet')}
+							label={__('Title', '%g_textdomain%')}
 							value={embedTitle}
 							onChange={(value) => setAttributes({ [getAttrKey('embedTitle', attributes, manifest)]: value })}
-							help={__('Not visible, used for improving accessibility', 'safer-internet')}
+							help={__('Not visible, used for improving accessibility', '%g_textdomain%')}
 						/>
-					}
+					)}
 
 					<br />
 
-					{showEmbedAdvanced &&
-						<ToggleControl
-							label={__('Show advanced options', 'safer-internet')}
-							checked={showAdvanced}
-							onChange={() => setShowAdvanced(!showAdvanced)}
-						/>
-					}
-
-					{showAdvanced &&
-						<>
-							{showEmbedAutoplay &&
-								<ToggleControl
-									label={__('Autoplay', 'safer-internet')}
+					{showEmbedAdvanced && (
+						<Section
+							icon={icons.plusCircleFillAlt}
+							label={__('Advanced options', '%g_textdomain%')}
+							collapsable
+							reducedBottomSpacing
+						>
+							{showEmbedAutoplay && (
+								<UseToggle
+									label={__('Autoplay', '%g_textdomain%')}
 									checked={embedAutoplay}
 									onChange={(value) => setAttributes({ [getAttrKey('embedAutoplay', attributes, manifest)]: value })}
 								/>
-							}
+							)}
 
-							{showEmbedEncryptedMedia &&
-								<ToggleControl
-									label={__('Encrypted Media', 'safer-internet')}
+							{showEmbedEncryptedMedia && (
+								<UseToggle
+									label={__('Encrypted Media', '%g_textdomain%')}
 									checked={embedEncryptedMedia}
 									onChange={(value) => setAttributes({ [getAttrKey('embedEncryptedMedia', attributes, manifest)]: value })}
 								/>
-							}
+							)}
 
-							{showEmbedPictureInPicture &&
-								<ToggleControl
-									label={__('Picture in picture', 'safer-internet')}
+							{showEmbedPictureInPicture && (
+								<UseToggle
+									label={__('Picture in picture', '%g_textdomain%')}
 									checked={embedPictureInPicture}
 									onChange={(value) => setAttributes({ [getAttrKey('embedPictureInPicture', attributes, manifest)]: value })}
 								/>
-							}
+							)}
 
-							{showEmbedAllowFullScreen &&
-								<ToggleControl
-									label={__('Allow full screen', 'safer-internet')}
+							{showEmbedAllowFullScreen && (
+								<UseToggle
+									label={__('Allow full screen', '%g_textdomain%')}
 									checked={embedAllowFullScreen}
 									onChange={(value) => setAttributes({ [getAttrKey('embedAllowFullScreen', attributes, manifest)]: value })}
 								/>
-							}
-
-						</>
-					}
-
+							)}
+						</Section>
+					)}
 				</>
-			}
-
+			)}
 		</UseToggle>
 	);
 };
diff --git a/blocks/init/src/Blocks/components/embed/embed-style.scss b/blocks/init/src/Blocks/components/embed/embed-style.scss
@@ -2,12 +2,16 @@
 	position: relative;
 	width: 100%;
 	overflow: hidden;
-	padding-top: 56.25%;
+
+	&::before {
+		content: "";
+		display: block;
+		padding-top: 56.25%;
+	}
 
 	&__iframe {
 		position: absolute;
-		top: 0;
-		left: 0;
+		inset: 0;
 		width: 100%;
 		height: 100%;
 		border: 0;

diff --git a/blocks/init/src/Blocks/components/embed/embed.php b/blocks/init/src/Blocks/components/embed/embed.php
@@ -46,34 +46,6 @@
 ]);
 
 $embedAllowFullScreen = $embedAllowFullScreen ? 'allowfullscreen' : '';
-
-/**
- * YouTube provider
- *
- * The link
- *   https://www.youtube.com/watch?v=dQw4w9WgXcQ
- * will be transformed to
- *   https://www.youtube.com/embed/dQw4w9WgXcQ .
- */
-if (strpos($embedUrl, 'https://www.youtube.com/watch?v=') !== false) {
-	$embedUrl = str_replace('watch?v=', 'embed/', $embedUrl);
-}
-
-/**
- * Vimeo provider
- *
- * The link
- *   https://vimeo.com/642263700
- * will be transformed to
- *   https://player.vimeo.com/video/642263700 .
- */
-if (strpos($embedUrl, 'https://vimeo.com') !== false) {
-	preg_match_all('/https:\/\/vimeo\.com\/(\d+)/', $embedUrl, $matches);
-
-	$videoId = $matches[1][0] ?? '';
-	$embedUrl = "https://player.vimeo.com/video/{$videoId}";
-}
-
 ?>
 
 <div class="<?php echo esc_attr($embedClass); ?>">

diff --git a/blocks/init/src/Blocks/custom/embed/components/embed-toolbar.js b/blocks/init/src/Blocks/custom/embed/components/embed-toolbar.js
diff --git a/blocks/init/src/Blocks/custom/embed/embed-block.js b/blocks/init/src/Blocks/custom/embed/embed-block.js
@@ -1,18 +1,14 @@
 import React from 'react';
-import { BlockControls, InspectorControls } from '@wordpress/block-editor';
+import { InspectorControls } from '@wordpress/block-editor';
 import { EmbedEditor } from './components/embed-editor';
 import { EmbedOptions } from './components/embed-options';
-import { EmbedToolbar } from './components/embed-toolbar';
 
 export const Embed = (props) => {
 	return (
 		<>
 			<InspectorControls>
 				<EmbedOptions {...props} />
 			</InspectorControls>
-			<BlockControls>
-				<EmbedToolbar {...props} />
-			</BlockControls>
 			<EmbedEditor {...props} />
 		</>
 	);