Added Image and FocalPointImage components. Added example of how to build an Image Control with Focal Point Picker flow.

Author: tnke

README.md

@@ -10,6 +10,40 @@ To include the editor styles, add this to the top of your block's `_editor.scss`
 
 ## Components
 
+### FocalPointImage
+
+Purely presentational component, which helps work with the `FocalPointPicker` from `@wordpress/components`.
+
+Renders a standard `<img />` element from data received from the MediaUpload flow. See `<Image>` below for all available props.
+
+```javascript
+<FocalPointImage
+  url="https://..."
+  focalPoint={{
+    x: 0.5,
+    y: 0.5,
+  }}
+/>
+```
+
+### Image
+
+Simple presentational component, which renders a standard `<img />` element from data format which is received from the MediaUpload flow.
+
+For example instead of `src` it uses an `url` prop etc.
+
+```javascript
+<Image
+  id={myImageId}
+  url="https://..."
+  alt="My alt text"
+  width={1600}
+  height={900}
+  title="My title text"
+  loading="lazy"
+/>
+```
+
 ### ImageControl
 
 Simple image upload and replacement flow for managing media.
@@ -265,8 +299,96 @@ export default function Edit({ attributes, setAttributes }) {
 }
 ```
 
+### Image Control with Focal Point Picker
+
+This flow describes how to setup image media management with a focal point picker:
+
+![Image Control with Focal Point Picker example](assets/ImageControlWithFocalPointPicker-screenshot-01.png)
+
+First, you need two attributes for your block's `block.json`:
+
+```json
+{
+  "attributes": {
+    "myImage": {
+      "type": "object"
+    },
+    "myFocalPoint": {
+      "type": "object"
+    }
+  }
+}
+```
+
+In your block's `edit.js`, use `ImageControl` from this toolkit and `FocalPointPicker` from `@wordpress/components`.
+
+Note how we disable the preview of ImageControl with `showPreview` set to `false`. This allows us to replace it with the focal point picker control after a media item has been selected.
+
+Whenever the media item is removed, we also reset the focal point.
+
+Then use `FocalPointImage` from this toolkit to render the positioned image result.
+
+```javascript
+import {
+  ImageControl,
+  FocalPointImage,
+  utils,
+} from "@evermade/wp-block-toolkit";
+
+import { FocalPointPicker } from "@wordpress/components";
+import { InspectorControls } from "@wordpress/block-editor";
+import { Fragment } from "@wordpress/element";
+
+export default function Edit({ attributes, setAttributes }) {
+  const { myImage, myFocalPoint } = attributes;
+
+  return (
+    <Fragment>
+      <InspectorControls>
+        {myImage && (
+          <FocalPointPicker
+            url={myImage?.url}
+            value={myFocalPoint}
+            onChange={(newFocalPoint) =>
+              setAttributes({
+                myFocalPoint: newFocalPoint,
+              })
+            }
+          />
+        )}
+
+        <ImageControl
+          id={myImage?.id}
+          showPreview={false}
+          onSelect={(image) =>
+            setAttributes({
+              myImage: utils.pickImageProps(image),
+            })
+          }
+          onRemove={() =>
+            setAttributes({
+              myImage: undefined,
+              myFocalPoint: undefined,
+            })
+          }
+        />
+      </InspectorControls>
+
+      <div className="my-block">
+        {myImage && <FocalPointImage {...myImage} focalPoint={myFocalPoint} />}
+      </div>
+    </Fragment>
+  );
+}
+```
+
 ## Changelog
 
+### 7.1.0
+
+- Fixed `ImageControl` export to default.
+- Added `Image` and `FocalPointImage` presentational components.
+
 ### 7.0.0
 
 - Updated npm dependencies

assets/ImageControlWithFocalPointPicker-screenshot-01.png

@@ -1 +1 @@
-<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => 'e0aa4d99057053f9e5e4');
+<?php return array('dependencies' => array('react', 'react-dom', 'react-jsx-runtime', 'wp-block-editor', 'wp-components', 'wp-data', 'wp-element', 'wp-i18n', 'wp-primitives'), 'version' => '9cb812ccf9d5225f2fbd');

build/index.asset.php

@@ -5,6 +5,27 @@ type BlockNames = string[];
 /**
  * Components
  */
+type ImageProps = {
+  id: number;
+  url: string;
+  alt: string;
+  width: number;
+  height: number;
+  title: string;
+  loading: "lazy" | "eager";
+};
+
+export const FocalPointImage: React.FC<
+  ImageProps & {
+    focalPoint: {
+      x: number;
+      y: number;
+    };
+  }
+>;
+
+export const Image: React.FC<ImageProps>;
+
 export const ImageControl: React.FC<{
   id: number;
   fallback: string;

build/index.js

@@ -1,6 +1,6 @@
 {
   "name": "@evermade/wp-block-toolkit",
-  "version": "7.0.0",
+  "version": "7.1.0",
   "description": "Toolkit for developing WordPress Gutenberg blocks.",
   "main": "build/index.js",
   "repository": {

index.d.ts

@@ -0,0 +1,11 @@
+import Image from "./Image";
+
+const FocalPointImage = ({ focalPoint = { x: 0.5, y: 0.5 }, ...props }) => {
+  const style = {
+    objectPosition: `${focalPoint.x * 100}% ${focalPoint.y * 100}%`,
+  };
+
+  return <Image {...props} style={style} />;
+};
+
+export default FocalPointImage;

package.json

@@ -0,0 +1,25 @@
+export const Image = ({
+  id,
+  url,
+  alt,
+  width,
+  height,
+  title,
+  loading = "lazy",
+  ...rest
+}) => {
+  return (
+    <img
+      src={url}
+      alt={alt}
+      width={width}
+      height={height}
+      title={title}
+      loading={loading}
+      className={`wp-image-${id}`}
+      {...rest}
+    />
+  );
+};
+
+export default Image;

src/components/FocalPointImage.js

@@ -12,7 +12,7 @@ import { useSelect } from "@wordpress/data";
 import { MediaUpload, MediaUploadCheck } from "@wordpress/block-editor";
 import { Fragment } from "@wordpress/element";
 
-export const ImageControl = ({
+const ImageControl = ({
   id,
   fallback = __(
     "You don't have permission to upload media.",
@@ -97,3 +97,5 @@ export const ImageControl = ({
     </div>
   );
 };
+
+export default ImageControl;

src/components/Image.js

@@ -6,7 +6,9 @@ import "./editor.scss";
 /**
  * Components
  */
-import { ImageControl } from "./components/ImageControl";
+import FocalPointImage from "./components/FocalPointImage";
+import Image from "./components/Image";
+import ImageControl from "./components/ImageControl";
 import InlineNotice from "./components/InlineNotice";
 import PostControl from "./components/PostControl";
 import RequireBlocks from "./components/RequireBlocks";
@@ -29,6 +31,8 @@ import { usePostSearch } from "./hooks/use-post-search";
 import * as utils from "./utils";
 
 export {
+  FocalPointImage,
+  Image,
   ImageControl,
   InlineNotice,
   PostControl,