Add Stretch style widget WIP

src/Blocks/StretchBlock.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { defineMessages, injectIntl } from 'react-intl';
+import { Icon } from '@plone/volto/components';
+import { Button } from 'semantic-ui-react';
+import imageFitSVG from '@plone/volto/icons/image-fit.svg';
+import imageFullSVG from '@plone/volto/icons/image-full.svg';
+
+const messages = defineMessages({
+  fit: {
+    id: 'Fit',
+    defaultMessage: 'Fit',
+  },
+  stretch: {
+    id: 'Stretch',
+    defaultMessage: 'Stretch',
+  },
+});
+
+const StretchBlock = ({ stretch, onChangeBlock, data, intl, block }) => {
+  /**
+   * Stretch block handler
+   * @method onStretchBlock
+   * @param {string} stretch Stretchment option
+   * @returns {undefined}
+   */
+  function onStretchBlock(stretch) {
+    onChangeBlock(block, {
+      ...data,
+      stretch,
+    });
+  }
+
+  return (
+    <div>
+      <Button.Group>
+        <Button
+          icon
+          basic
+          aria-label={intl.formatMessage(messages.fit)}
+          onClick={() => onStretchBlock('fit')}
+          active={data.stretch === 'fit' || !data.stretch}
+        >
+          <Icon name={imageFitSVG} size="24px" />
+        </Button>
+      </Button.Group>
+      <Button.Group>
+        <Button
+          icon
+          basic
+          aria-label={intl.formatMessage(messages.stretch)}
+          onClick={() => onStretchBlock('stretch')}
+          active={data.stretch === 'stretch'}
+        >
+          <Icon name={imageFullSVG} size="24px" />
+        </Button>
+      </Button.Group>
+    </div>
+  );
+};
+
+export default injectIntl(StretchBlock);

src/StyleWrapper/StyleWrapperView.jsx

@@ -86,7 +86,9 @@ const StyleWrapperView = (props) => {
     isDropCap,
     isScreenHeight,
     hidden = false,
+    stretch,
   } = styleData;
+
   const containerType = data['@type'];
   const backgroundImage = styleData.backgroundImage;
 
@@ -102,7 +104,8 @@ const StyleWrapperView = (props) => {
     customClass ||
     isDropCap ||
     hidden ||
-    customId;
+    customId ||
+    stretch;
 
   const attrs = {
     style: inlineStyles,
@@ -112,6 +115,7 @@ const StyleWrapperView = (props) => {
       'styled-with-bg': styleData.backgroundColor || backgroundImage,
       'screen-height': isScreenHeight,
       'full-width': align === 'full',
+      stretch: stretch === 'stretch',
       large: size === 'l',
       medium: size === 'm',
       small: size === 's',

src/StyleWrapper/schema.js

@@ -16,7 +16,7 @@ export const StyleSchema = () => ({
     {
       id: 'standard',
       title: 'Standard',
-      fields: ['textAlign', 'fontSize', 'align', 'size', 'isDropCap'],
+      fields: ['textAlign', 'fontSize', 'align', "stretch", 'size', 'isDropCap'],
     },
     {
       id: 'decorations',
@@ -33,7 +33,7 @@ export const StyleSchema = () => ({
     {
       id: 'layout',
       title: 'Layout',
-      fields: ['margin', 'padding', 'size', 'align'], // todo: width, conflicts with size
+      fields: ['margin', 'padding', 'size', 'align', 'stretch'], // todo: width, conflicts with size
     },
     {
       id: 'advanced',
@@ -54,6 +54,10 @@ export const StyleSchema = () => ({
       title: 'Align',
       widget: 'style_align',
     },
+    stretch: {
+      title: 'Stretch',
+      widget: 'style_stretch',
+    },
     fontSize: {
       title: 'Font size',
       description: 'Relative to normal size of text in the block',

src/Widgets/Stretch.jsx

@@ -0,0 +1,30 @@
+/**
+ * StretchWidget component.
+ * To benefit from styling integration, use with a field named 'Stretch'
+ * @module components/manage/Widgets/StretchWidget
+ */
+
+import React from 'react';
+import { injectIntl } from 'react-intl';
+
+import { FormFieldWrapper } from '@plone/volto/components';
+import StretchBlock from '../Blocks/StretchBlock';
+
+const StretchWidget = (props) => {
+  const { id, onChange, value } = props;
+
+  return (
+    <FormFieldWrapper {...props} className="align-widget">
+      <div className="align-tools">
+        <StretchBlock
+          stretch={value}
+          onChangeBlock={(block, { stretch }) => onChange(id, stretch)}
+          data={{ stretch: value }}
+          block={id}
+        />
+      </div>
+    </FormFieldWrapper>
+  );
+};
+
+export default injectIntl(StretchWidget);

src/index.js

@@ -5,6 +5,8 @@ import {
 } from './BlockStyleWrapper';
 import StyleSelectWidget from './Widgets/StyleSelect';
 import AlignWidget from './Widgets/Align';
+import StretchWidget from './Widgets/Stretch';
+
 import TextAlignWidget from './Widgets/TextAlign';
 import SliderWidget from './Widgets/Slider';
 import SizeWidget from './Widgets/Size';
@@ -64,6 +66,7 @@ const applyConfig = (config) => {
 
   config.widgets.widget.style_select = StyleSelectWidget;
   config.widgets.widget.style_align = AlignWidget; // avoid conflict for now
+  config.widgets.widget.style_stretch = StretchWidget; // Make stretch widget
   config.widgets.widget.style_text_align = TextAlignWidget; // avoid conflict for now
   config.widgets.widget.style_size = SizeWidget; // avoid conflict for now
   config.widgets.widget.style_simple_color = SimpleColorPicker;