Revert change name field, return to url because the transformers hooks into that.

Makefile

@@ -21,7 +21,7 @@ GREEN=`tput setaf 2`
 RESET=`tput sgr0`
 YELLOW=`tput setaf 3`
 
-PLONE_VERSION=6
+PLONE_VERSION=6.0.6
 VOLTO_VERSION=17.0.0-alpha.27
 
 ADDON_NAME='@kitconcept/volto-highlight-block'

dockerfiles/docker-compose.yml

@@ -9,7 +9,7 @@ services:
       args:
         ADDON_NAME: "${ADDON_NAME}"
         ADDON_PATH: "${ADDON_PATH}"
-        VOLTO_VERSION: ${VOLTO_VERSION:-17.0.0-alpha.16}
+        VOLTO_VERSION: ${VOLTO_VERSION:-17}
     volumes:
       - ${CURRENT_DIR}:/app/src/addons/${ADDON_PATH}/
     environment:
@@ -26,10 +26,11 @@ services:
       - dev
 
   backend:
-    image: plone/plone-backend:${PLONE_VERSION:-6.0.6}
+    image: plone/plone-backend:${PLONE_VERSION:-6}
     environment:
       SITE: Plone
       CORS_ALLOW_ORIGIN: '*'
+      ADDONS: 'plone.restapi==9.0.0'
     ports:
       - 8080:8080
     profiles:

news/7.breaking

@@ -0,0 +1,3 @@
+Revert change name field, return to `url` because the transformers hooks into that. Adjust code to it, fix bugs. @sneridagh
+
+**Warning** Do not use `2.0.0`, it's a brownbag release.

package.json

@@ -34,6 +34,16 @@
   "devDependencies": {
     "@babel/eslint-parser": "7.22.15",
     "@plone/scripts": "^3.0.0",
+    "eslint": "8.49.0",
+    "eslint-config-prettier": "8.10.0",
+    "eslint-config-react-app": "7.0.1",
+    "eslint-import-resolver-alias": "1.1.2",
+    "eslint-import-resolver-babel-plugin-root-import": "1.1.1",
+    "eslint-plugin-import": "2.28.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
+    "eslint-plugin-prettier": "3.4.1",
+    "eslint-plugin-react": "7.33.2",
+    "eslint-plugin-react-hooks": "4.6.0",
     "postcss-scss": "4.0.8",
     "prettier": "2.0.5",
     "release-it": "^16.1.5",

src/components/Blocks/Highlight/Data.jsx

@@ -3,20 +3,28 @@ import { useIntl } from 'react-intl';
 import { BlockDataForm } from '@plone/volto/components';
 
 import { HighlightSchema } from './schema';
+import { useSelector } from 'react-redux';
 
 const HighlightData = (props) => {
   const { block, blocksConfig, data, onChangeBlock } = props;
   const intl = useIntl();
   const schema = HighlightSchema({ ...props, intl });
+  const dataAdapter = blocksConfig.highlight.dataAdapter;
+  const request = useSelector((state) => state.content.subrequests[block]);
+  const content = request?.data;
 
   return (
     <BlockDataForm
       schema={schema}
       title={schema.title}
       onChangeField={(id, value) => {
-        onChangeBlock(block, {
-          ...data,
-          [id]: value,
+        dataAdapter({
+          block,
+          data,
+          id,
+          onChangeBlock,
+          value,
+          content,
         });
       }}
       formData={data}

src/components/Blocks/Highlight/View.jsx

@@ -6,22 +6,42 @@ import TextLineEdit from '@plone/volto/components/manage/TextLineEdit/TextLineEd
 import ImageWidget from '../../ImageWidget/ImageWidget';
 import { flattenToAppURL, isInternalURL } from '@plone/volto/helpers';
 import { Container as SemanticContainer, Button } from 'semantic-ui-react';
+import { useSelector } from 'react-redux';
 import config from '@plone/volto/registry';
 
 const HighlightView = (props) => {
-  const { block, className, data, isEditMode, onChangeBlock } = props;
+  const {
+    block,
+    blocksConfig,
+    className,
+    data,
+    isEditMode,
+    onChangeBlock,
+  } = props;
+
+  const dataAdapter = blocksConfig.highlight.dataAdapter;
+  const request = useSelector((state) => state.content.subrequests[block]);
+  const content = request?.data;
 
   const buttonLink = data?.buttonLink?.[0] ? data?.buttonLink[0]['@id'] : '';
 
   let renderedImage = null;
-  if (data.image) {
+  if (data.url) {
     let Image = config.getComponent('Image').component;
     if (Image) {
       // custom image component expects item summary as src
       renderedImage = (
         <Image
-          item={data.image.image_scales ? data.image : null}
-          src={!data.image.image_scales ? data.image['@id'] : null}
+          item={
+            data.image_scales
+              ? {
+                  '@id': data.url,
+                  image_field: data.image_field,
+                  image_scales: data.image_scales,
+                }
+              : null
+          }
+          src={!data.image_scales ? data.url : null}
           alt=""
           loading="lazy"
           responsive={true}
@@ -32,10 +52,10 @@ const HighlightView = (props) => {
       renderedImage = (
         <img
           src={
-            isInternalURL(data.image['@id'])
+            isInternalURL(data.url['@id'])
               ? // Backwards compat in the case that the block is storing the full server URL
-                `${flattenToAppURL(data.image['@id'])}/@@images/image`
-              : data.image['@id']
+                `${flattenToAppURL(data.url['@id'])}/@@images/image`
+              : data.url['@id']
           }
           alt=""
           loading="lazy"
@@ -50,7 +70,7 @@ const HighlightView = (props) => {
 
   return (
     <div className={cx('block highlight', className)}>
-      {data.image ? (
+      {data.url ? (
         <div className="teaser-item top">
           <div className="highlight-image-wrapper">{renderedImage}</div>
           <div className={cx('highlight-description')}>
@@ -97,12 +117,16 @@ const HighlightView = (props) => {
               inline
               // Since we are using a component that has a widget interface
               // we need to adapt its props to it
-              id="image"
+              id="url"
               // This is called in case of the inline widget (eg. NOT the sidebar form)
               onChange={(id, value) => {
-                onChangeBlock(block, {
-                  ...data,
-                  [id]: value,
+                dataAdapter({
+                  block,
+                  data,
+                  id,
+                  onChangeBlock,
+                  value,
+                  content,
                 });
               }}
             />

src/components/Blocks/Highlight/adapter.js

@@ -0,0 +1,32 @@
+import { flattenToAppURL } from '@plone/volto/helpers';
+
+export const HighlightBlockDataAdapter = ({
+  block,
+  data,
+  id,
+  onChangeBlock,
+  value,
+  content,
+}) => {
+  let dataSaved = {
+    ...data,
+    [id]: value,
+  };
+  if (id === 'url' && typeof value === 'object') {
+    dataSaved = {
+      ...dataSaved,
+      [id]: flattenToAppURL(value['@id']),
+      image_field: 'image',
+      image_scales: value.image_scales,
+    };
+  }
+  // I uploaded the image right now, no image info
+  if (id === 'url' && typeof value === 'string') {
+    dataSaved = {
+      ...dataSaved,
+      image_field: 'image',
+      image_scales: { image: [content?.image] },
+    };
+  }
+  onChangeBlock(block, dataSaved);
+};

src/components/Blocks/Highlight/schema.js

@@ -54,11 +54,11 @@ export function HighlightSchema(props) {
       {
         id: 'default',
         title: 'Default',
-        fields: ['image', 'button', 'buttonLink', 'buttonText'],
+        fields: ['url', 'button', 'buttonLink', 'buttonText'],
       },
     ],
     properties: {
-      image: {
+      url: {
         title: intl.formatMessage(messages.image),
         widget: 'image',
       },

src/components/ImageWidget/ImageWidget.jsx

@@ -72,21 +72,15 @@ const ImageWidget = (props) => {
 
   const request = useSelector((state) => state.content.subrequests[block]);
   const content = request?.data;
+  const urlUploaded = content ? content['@id'] : null;
   const requestLoaded = request ? request.loaded : null;
 
   useEffect(() => {
-    const imageUploaded = content
-      ? {
-          '@id': content['@id'],
-          image_field: 'image',
-          image_scales: { image: [content?.image] },
-        }
-      : null;
     if (loading && requestLoaded && uploading) {
       setUploading(false);
-      onChange(id, imageUploaded);
+      onChange(id, urlUploaded);
     }
-  }, [id, content, requestLoaded, loading, uploading, onChange]);
+  }, [id, urlUploaded, requestLoaded, loading, uploading, onChange]);
 
   loading = usePrevious(request?.loading);
 
@@ -206,9 +200,9 @@ const ImageWidget = (props) => {
         <FormFieldWrapper {...props} noForInFieldLabel className="image">
           {value ? (
             <div className="image-widget-filepath-preview">
-              {flattenToAppURL(value['@id'])}&nbsp;
+              {flattenToAppURL(value)}&nbsp;
               {isInternalURL ? (
-                <UniversalLink href={value['@id']} openLinkInNewTab>
+                <UniversalLink href={value} openLinkInNewTab>
                   <Icon name={openinnewtabSVG} size="16px" />
                 </UniversalLink>
               ) : null}
@@ -247,12 +241,7 @@ const ImageWidget = (props) => {
                           e.preventDefault();
                           openObjectBrowser({
                             onSelectItem: (url, image) => {
-                              onChange(id, {
-                                '@id': image['@id'],
-                                image_field: 'image',
-                                // Always a catalog entry here
-                                image_scales: image.image_scales,
-                              });
+                              onChange(id, image);
                             },
                           });
                         }}
@@ -334,7 +323,7 @@ const ImageWidget = (props) => {
               >
                 <Icon name={clearSVG} className="circled" size="24px" />
               </Button>
-              <ImagePreview src={value['@id']} />
+              <ImagePreview src={value} />
             </div>
           ) : null}
         </>

src/index.js

@@ -1,5 +1,6 @@
 import HighlightView from './components/Blocks/Highlight/View';
 import HighlightEdit from './components/Blocks/Highlight/Edit';
+import { HighlightBlockDataAdapter } from './components/Blocks/Highlight/adapter';
 import presentationSVG from '@plone/volto/icons/presentation.svg';
 import ImageWidget from './components/ImageWidget/ImageWidget';
 import './theme/highlight.scss';
@@ -25,6 +26,7 @@ const applyConfig = (config) => {
     restricted: false,
     mostUsed: true,
     sidebarTab: 1,
+    dataAdapter: HighlightBlockDataAdapter,
     descriptionColors: CONTENT_COLORS,
   };