@secretstache/wordpress-gutenberg 0.5.4 → 0.5.6

package/build/styles.css

@@ -135,6 +135,8 @@
   .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > .block-list-appender.wp-block:only-child,
   .editor-styles-wrapper .block-editor-block-list__layout.is-root-container > p.wp-block:only-child {
     margin: 2rem 0; }
+  .editor-styles-wrapper .block-editor-block-list__layout.is-root-container .components-notice {
+    color: #000; }
 
 .editor-sidebar .bc-url-input {
   min-width: 100%; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@secretstache/wordpress-gutenberg",
-  "version": "0.5.4",
+  "version": "0.5.6",
   "description": "",
   "author": "Secret Stache",
   "license": "GPL-2.0-or-later",

package/src/components/MediaControl.js

@@ -1,4 +1,4 @@
-import { BaseControl, Button, Icon as WPIcon } from '@wordpress/components';
+import { BaseControl, Button, FocalPointPicker, Icon as WPIcon } from '@wordpress/components';
 import { MediaUpload, MediaUploadCheck } from '@wordpress/block-editor';
 import { page as pageIcon } from '@wordpress/icons';
 
@@ -110,41 +110,67 @@ export const AnimationRenderer = ({
 };
 
 export const MediaControl = ({
+    type = MEDIA_TYPE.IMAGE,
     label,
+
     mediaId,
     mediaUrl,
     mediaFileName = '',
+
     onSelect,
     onRemove,
-    type = MEDIA_TYPE.IMAGE,
+
     selectButtonLabel,
     removeButtonLabel,
+
+    hasFocalPoint = true,
+    focalPointLabel = 'Focal Point',
+    focalPoint = { x: 0.5, y: 0.5 },
+    onFocalPointChange,
+
     ...other
 }) => {
     if (type === MEDIA_TYPE.IMAGE) {
         return (
-            <BaseControl label={label || 'Image'}>
-                <MediaUploadCheck>
-                    <MediaUpload
-                        onSelect={onSelect}
-                        allowedTypes={['image', 'image/svg+xml']}
-                        accept="image/*"
-                        value={mediaId}
-                        render={({ open }) => (
-                            <ImageRenderer
-                                imageId={mediaId}
-                                imageUrl={mediaUrl}
-                                onImageClick={open}
-                                onSelectClick={open}
-                                onRemoveClick={onRemove}
-                                selectButtonLabel={selectButtonLabel || 'Select Image'}
-                                removeButtonLabel={removeButtonLabel || 'Remove Image'}
+            <>
+                <BaseControl label={label || 'Image'}>
+                    <MediaUploadCheck>
+                        <MediaUpload
+                            onSelect={onSelect}
+                            allowedTypes={['image', 'image/svg+xml']}
+                            accept="image/*"
+                            value={mediaId}
+                            render={({ open }) => (
+                                <ImageRenderer
+                                    imageId={mediaId}
+                                    imageUrl={mediaUrl}
+                                    onImageClick={open}
+                                    onSelectClick={open}
+                                    onRemoveClick={onRemove}
+                                    selectButtonLabel={selectButtonLabel || 'Select Image'}
+                                    removeButtonLabel={removeButtonLabel || 'Remove Image'}
+                                />
+                            )}
+                            {...other}
+                        />
+                    </MediaUploadCheck>
+                </BaseControl>
+
+                {
+                    hasFocalPoint && mediaId && mediaUrl && (
+                        <BaseControl label={focalPointLabel}>
+                            <FocalPointPicker
+                                __nextHasNoMarginBottom
+                                url={mediaUrl}
+                                value={focalPoint}
+                                onDragStart={onFocalPointChange}
+                                onDrag={onFocalPointChange}
+                                onChange={onFocalPointChange}
                             />
-                        )}
-                        {...other}
-                    />
-                </MediaUploadCheck>
-            </BaseControl>
+                        </BaseControl>
+                    )
+                }
+            </>
         );
     } else if (type === MEDIA_TYPE.VIDEO) {
         return (

package/src/components/MediaWithFocalPointControl.js

@@ -0,0 +1,78 @@
+import { BaseControl, FocalPointPicker } from '@wordpress/components';
+import { useCallback, memo } from '@wordpress/element';
+
+import { MediaControl } from './MediaControl.js';
+import { MEDIA_TYPE } from '../utils/index.js';
+
+/**
+ * Media control with focal point functionality
+ *
+ * @param {Object} props - Component props
+ * @returns {JSX.Element} Component JSX
+ */
+export const MediaWithFocalPointControl = memo(({
+    attributes,
+    setAttributes,
+    mediaAttributeName = 'media',
+    focalPointAttributeName = 'focalPoint',
+    mediaLabel = 'Image',
+    focalPointLabel = 'Focal Point',
+    mediaControlProps = {},
+}) => {
+    const media = attributes[mediaAttributeName];
+    const focalPoint = attributes[focalPointAttributeName] || { x: 0.5, y: 0.5 };
+
+    const onFocalPointChange = useCallback((newFocalPoint) => {
+        setAttributes({ [focalPointAttributeName]: newFocalPoint });
+    }, [ focalPointAttributeName ]);
+
+    const onMediaSelect = useCallback((newMedia) => {
+        setAttributes({
+            [mediaAttributeName]: {
+                id: newMedia.id,
+                url: newMedia.url,
+                alt: newMedia.alt || '',
+            },
+
+            [focalPointAttributeName]: { x: 0.5, y: 0.5 }
+        });
+    }, [ mediaAttributeName ]);
+
+    const onMediaRemove = useCallback(() => {
+        setAttributes({
+            [mediaAttributeName]: {
+                id: null,
+                url: null,
+                alt: null,
+            }
+        });
+    }, [ mediaAttributeName ]);
+
+    return (
+        <>
+            <BaseControl label={mediaLabel}>
+                <MediaControl
+                    type={MEDIA_TYPE.IMAGE}
+                    mediaId={media?.id}
+                    mediaUrl={media?.url}
+                    onSelect={onMediaSelect}
+                    onRemove={onMediaRemove}
+                    {...mediaControlProps}
+                />
+            </BaseControl>
+
+            {media?.url && (
+                <BaseControl label={focalPointLabel}>
+                    <FocalPointPicker
+                        __nextHasNoMarginBottom
+                        url={media.url}
+                        value={focalPoint}
+                        onDragStart={onFocalPointChange}
+                        onDrag={onFocalPointChange}
+                        onChange={onFocalPointChange}
+                    />
+                </BaseControl>
+            )}
+        </>
+    );
+});

package/src/components/index.js

@@ -7,9 +7,10 @@ export { SortableSelect, SortableSelectAsync } from './SortableSelect';
 export { DataQueryControls } from './DataQueryControls.js';
 export { SpacingControl } from './SpacingControl.js';
 export { ResponsiveSpacingControl } from './ResponsiveSpacingControl.js';
-export { ResourcesWrapper } from './ResourcesWrapper.js'
-export { DividersControl } from './DividersControl.js'
-export { MediaTypeControl } from './MediaTypeControl.js'
-export { InsertBlockToolbar } from './InsertBlockToolbar.js'
-export { PreviewControl } from './PreviewControl.js'
-export { EmptyBlockAppender } from './EmptyBlockAppender.js'
+export { ResourcesWrapper } from './ResourcesWrapper.js';
+export { DividersControl } from './DividersControl.js';
+export { MediaTypeControl } from './MediaTypeControl.js';
+export { InsertBlockToolbar } from './InsertBlockToolbar.js';
+export { PreviewControl } from './PreviewControl.js';
+export { EmptyBlockAppender } from './EmptyBlockAppender.js';
+export { MediaWithFocalPointControl } from './MediaWithFocalPointControl.js';

package/src/styles/styles.scss

@@ -62,6 +62,10 @@
     & > p.wp-block:only-child {
         margin: 2rem 0;
     }
+
+    .components-notice {
+        color: #000;
+    }
 }
 
 .editor-sidebar {

package/src/utils/helpers.js

@@ -254,3 +254,22 @@ export function updateBlockApiVersion(blockName, apiVersion = 3) {
         });
     }
 }
+
+/**
+ * Creates object-position style based on focal point coordinates
+ *
+ * @param {Object} focalPoint - Focal point coordinates { x, y }
+ * @returns {Object} Style object with objectPosition property
+ */
+export const getFocalPointStyle = (focalPoint) => {
+    if (!focalPoint) {
+        return { objectPosition: '50% 50%' };
+    }
+
+    // Handle edge case where x or y is 0
+    const x = (focalPoint.x !== undefined && focalPoint.x !== null) ? focalPoint.x * 100 : 50;
+    const y = (focalPoint.y !== undefined && focalPoint.y !== null) ? focalPoint.y * 100 : 50;
+
+    return { objectPosition: `${x}% ${y}%` };
+};
+