Add display component

[MAILPOET-2880]

assets/css/src/components-form-editor/_sidebar-style-settings.scss

@@ -23,6 +23,7 @@
     align-items: center;
     display: flex;
     flex-direction: row;
+    margin-bottom: 4px;
 
     input {
       flex-grow: 1;
@@ -35,4 +36,8 @@
       flex-shrink: 0;
     }
   }
+
+  .mailpoet-styles-settings-image-url-display {
+    margin-right: 1px;
+  }
 }

assets/js/src/form_editor/components/form_settings/styles_settings_panel.jsx

@@ -44,8 +44,10 @@ const BasicSettingsPanel = ({ onToggle, isOpened }) => {
           />
           <ImageSettings
             name={MailPoet.I18n.t('formSettingsStylesBackgroundImage')}
-            value={settings.backgroundImageUrl}
+            imageUrl={settings.backgroundImageUrl}
-            onChange={partial(updateStyles, 'backgroundImageUrl')}
+            onImageUrlChange={partial(updateStyles, 'backgroundImageUrl')}
+            imageDisplay={settings.backgroundImageDisplay}
+            onImageDisplayChange={partial(updateStyles, 'backgroundImageDisplay')}
           />
           <ColorSettings
             name={MailPoet.I18n.t('formSettingsStylesFontColor')}

assets/js/src/form_editor/components/image_settings.tsx

@@ -1,28 +1,33 @@
 import React from 'react';
 import { MediaUpload } from '@wordpress/block-editor';
 import MailPoet from 'mailpoet';
-import { Button } from '@wordpress/components';
+import { Button, SelectControl } from '@wordpress/components';
+import { customFieldTypes } from '../blocks/add_custom_field/add_custom_field_form';
 
 type Props = {
   name: string,
-  value?: string,
+  imageUrl?: string,
-  onChange: (value: string) => any,
+  onImageUrlChange: (value: string) => any,
+  imageDisplay?: string,
+  onImageDisplayChange: (value: string) => any,
 }
 
 const ImageSettings = ({
   name,
-  value,
+  imageUrl,
-  onChange,
+  onImageUrlChange,
+  imageDisplay,
+  onImageDisplayChange,
 }: Props) => (
   <div className="mailpoet-styles-settings-image-url">
     <h3 className="mailpoet-styles-settings-heading">
       {name}
     </h3>
     <div className="mailpoet-styles-settings-image-url-body">
-      <input type="text" value={value ?? ''} onChange={(event) => onChange(event.target.value)} />
+      <input type="text" value={imageUrl ?? ''} onChange={(event) => onImageUrlChange(event.target.value)} />
       <MediaUpload
-        value={value}
+        value={imageUrl}
-        onSelect={(image) => onChange(image.url)}
+        onSelect={(image) => onImageUrlChange(image.url)}
         allowedTypes={['image']}
         render={({ open }) => (
           <Button
@@ -35,6 +40,26 @@ const ImageSettings = ({
         )}
       />
     </div>
+    <div className="mailpoet-styles-settings-image-url-display">
+      <SelectControl
+        value={imageDisplay}
+        options={[
+          {
+            label: MailPoet.I18n.t('imagePlacementScale'),
+            value: 'scale',
+          },
+          {
+            label: MailPoet.I18n.t('imagePlacementFit'),
+            value: 'fit',
+          },
+          {
+            label: MailPoet.I18n.t('imagePlacementTile'),
+            value: 'tile',
+          },
+        ]}
+        onChange={onImageDisplayChange}
+      />
+    </div>
   </div>
 );
 

views/form/editor.html

@@ -165,6 +165,9 @@
   'formPreview': __('Form Preview'),
   'blockSpacerHeight': _x('Height', 'Settings in the spacer block'),
   'blockSpacerEnableDivider': _x('Enable Divider', 'Settings in the spacer block'),
+  'imagePlacementScale': _x('Scale', 'How a background image will be rendered: scale, fit or tile'),
+  'imagePlacementFit': _x('Fit', 'How a background image will be rendered: scale, fit or tile'),
+  'imagePlacementTile': _x('Tile', 'How a background image will be rendered: scale, fit or tile'),
   'blockDividerStyle': _x('Divider Style', 'Settings in the divider block (solid, dotted, …)'),
   'blockDividerStyleSolid': _x('Solid', 'Setting in the divider block'),
   'blockDividerStyleDashed': _x('Dashed', 'Setting in the divider block'),