Seven image alignment

apps/seven/acceptance/tests/basic.test.ts

@@ -2,7 +2,7 @@ import { expect, test } from '../../../../packages/tooling/playwright/test';
 
 test.describe('Basic Playwright Test', () => {
   test('should visit the root URL', async ({ page }) => {
-    await page.goto('/');
+    await page.goto('http://localhost:3000/');
     await expect(page).toHaveURL(/\/$/);
     await expect(page.getByText('Home')).toBeVisible();
   });

packages/blocks/Image/Image.module.css

@@ -0,0 +1,4 @@
+.block {
+  max-width: var(--block-size);
+  float: var(--block-align);
+}

packages/blocks/Image/ImageBlockEdit.tsx

@@ -8,6 +8,7 @@ import type {
 } from '@plone/types';
 import Image from '@plone/layout/components/Image/Image';
 import clsx from 'clsx';
+import styles from './Image.module.css';
 import config from '@plone/registry';
 
 function flattenToAppUrl(url: string) {
@@ -72,17 +73,13 @@ const ImageBlockEdit = (props: BlockEditProps) => {
         {
           center: !Boolean(data.align),
         },
+        styles['block'],
         data.align,
+        data.size,
       )}
     >
       {data.url ? (
         <Image
-          className={clsx({
-            'full-width': data.align === 'full',
-            large: data.size === 'l',
-            medium: data.size === 'm',
-            small: data.size === 's',
-          })}
           item={imageItem}
           src={
             data.image_scales

packages/blocks/Image/ImageBlockView.tsx

@@ -1,5 +1,7 @@
 import type { BlockViewProps, ContainedItem } from '@plone/types';
 import Image from '@plone/layout/components/Image/Image';
+import clsx from 'clsx';
+import styles from './Image.module.css';
 
 const ImageBlockView = (props: BlockViewProps) => {
   const { data } = props;
@@ -10,14 +12,23 @@ const ImageBlockView = (props: BlockViewProps) => {
     image_field: data.image_field,
     image_scales: data.image_scales,
   } as ContainedItem;
-
   return (
-    <figure>
-      <Image
-        item={item}
-        alt={(data.alt as string) || ''}
-        imageField={data.image_field as string}
-      />
+    <figure className={clsx(styles['block'])}>
+      <div
+        className={clsx(
+          'image align block',
+          // {
+          //   center: !Boolean(data.align),
+          // },
+          styles['block'],
+        )}
+      >
+        <Image
+          item={item}
+          alt={(data.alt as string) || ''}
+          imageField={data.image_field as string}
+        />
+      </div>
     </figure>
   );
 };

packages/blocks/Image/schema.tsx

@@ -61,11 +61,13 @@ export function ImageSchema({
         widget: 'align',
         default: 'center',
         actions: ['left', 'right', 'center'],
+        styleField: true,
       },
       size: {
         title: 'Image size',
         widget: 'size',
         default: 'l',
+        styleField: true,
       },
       href: {
         title: 'Link to',

packages/blocks/index.ts

@@ -43,6 +43,41 @@ export default function install(config: ConfigType) {
     },
   ];
 
+  const alignment = [
+    {
+      name: 'default',
+      label: 'Default',
+      style: {},
+    },
+    {
+      name: 'left',
+      label: 'Left',
+      style: {
+        '--block-align': 'left',
+      },
+    },
+    {
+      name: 'right',
+      label: 'Right',
+      style: {
+        '--block-align': 'right',
+      },
+    },
+    {
+      name: 'l',
+      label: 'L',
+      style: {
+        '--block-size': '500px',
+      },
+    },
+  ];
+
+  config.registerUtility({
+    type: 'styleFieldDefinition',
+    name: 'align',
+    method: () => alignment,
+  });
+
   config.blocks.blocksConfig.image =
     ImageBlockInfo as unknown as BlockConfigBase;
   config.blocks.blocksConfig.teaser =