Split the figure component out into its own file

10up · Oct 6, 2023 · 4cb8b51 · 4cb8b51
1 parent 4491c43
commit 4cb8b51
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 27 deletions.
diff --git a/components/image/figure.js b/components/image/figure.js
@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types';
+import { StyledComponentContext } from '../styled-components-context';
+import { InlineControlsStyleWrapper } from './styles';
+
+export const Figure = (props) => {
+	const { style, children, ...rest } = props;
+
+	return (
+		<StyledComponentContext cacheKey="tenup-component-image">
+			<InlineControlsStyleWrapper {...style} {...rest}>
+				{children}
+			</InlineControlsStyleWrapper>
+		</StyledComponentContext>
+	);
+};
+
+Figure.defaultProps = {
+	style: {},
+	children: [],
+};
+
+Figure.propTypes = {
+	style: PropTypes.object,
+	children: PropTypes.array,
+};
diff --git a/components/image/index.js b/components/image/index.js
@@ -5,10 +5,10 @@ import PropTypes from 'prop-types';
 /**
  * Internal Dependencies
  */
-import { StyledComponentContext } from '../styled-components-context';
+
 import { Media, ImageContext } from './media';
+import { Figure } from './figure';
 import { InlineControls } from './inline-controls';
-import { InlineControlsStyleWrapper } from './styles';
 import { useMedia } from '../../hooks/use-media';
 
 const ImageWrapper = (props) => {
@@ -154,25 +154,3 @@ ImageWrapper.propTypes = {
 	onRemove: PropTypes.func,
 	children: PropTypes.array,
 };
-
-const Figure = (props) => {
-	const { style, children, ...rest } = props;
-
-	return (
-		<StyledComponentContext cacheKey="tenup-component-image">
-			<InlineControlsStyleWrapper {...style} {...rest}>
-				{children}
-			</InlineControlsStyleWrapper>
-		</StyledComponentContext>
-	);
-};
-
-Figure.defaultProps = {
-	style: {},
-	children: [],
-};
-
-Figure.propTypes = {
-	style: PropTypes.object,
-	children: PropTypes.array,
-};
diff --git a/example/src/blocks/multiple-image-example/edit.js b/example/src/blocks/multiple-image-example/edit.js
@@ -22,7 +22,8 @@ export function BlockEdit(props) {
             className="example-image"
             focalPoint={focalPoint1}
             onChangeFocalPoint={(value) => setAttributes({focalPoint1: value})}
-            hasInlineControls={true} onRemove={() => setAttributes({image1: null})}
+            hasInlineControls={true}
+            onRemove={() => setAttributes({image1: null})}
             isOptional={false}
             />
 
@@ -33,7 +34,8 @@ export function BlockEdit(props) {
             className="example-image"
             focalPoint={focalPoint2}
             onChangeFocalPoint={(value) => setAttributes({focalPoint2: value})}
-            hasInlineControls={true} onRemove={() => setAttributes({image2: null})}
+            hasInlineControls={true}
+            onRemove={() => setAttributes({image2: null})}
             />
 
             <Image
@@ -43,7 +45,8 @@ export function BlockEdit(props) {
             className="example-image"
             focalPoint={focalPoint3}
             onChangeFocalPoint={(value) => setAttributes({focalPoint3: value})}
-            hasInlineControls={true} onRemove={() => setAttributes({image3: null})}
+            hasInlineControls={true}
+            onRemove={() => setAttributes({image3: null})}
             />
         </div>
     )