Feature/section bg image

block-languages/benenson-blocks.pot

@@ -41,7 +41,7 @@ msgid "Standard"
 msgstr ""
 
 #: src/scripts/blocks/action/BlockEdit.js:62
-#: src/scripts/blocks/section/DisplayComponent.js:53
+#: src/scripts/blocks/section/DisplayComponent.js:70
 msgid "Wide"
 msgstr ""
 
@@ -103,7 +103,7 @@ msgstr ""
 #: src/scripts/blocks/blockquote/index.js:238
 #: src/scripts/blocks/header/DisplayComponent.js:102
 #: src/scripts/blocks/menu/DisplayComponent.js:10
-#: src/scripts/blocks/section/DisplayComponent.js:20
+#: src/scripts/blocks/section/DisplayComponent.js:37
 msgid "White"
 msgstr ""
 
@@ -122,7 +122,7 @@ msgstr ""
 #: src/scripts/blocks/link/DisplayComponent.js:16
 #: src/scripts/blocks/menu/DisplayComponent.js:91
 #: src/scripts/blocks/post-list/DisplayComponent.js:54
-#: src/scripts/blocks/section/DisplayComponent.js:16
+#: src/scripts/blocks/section/DisplayComponent.js:33
 #: src/scripts/blocks/slider/DisplayComponent.js:203
 msgid "Options"
 msgstr ""
@@ -184,7 +184,6 @@ msgstr ""
 #: src/scripts/blocks/header/DisplayComponent.js:80
 #: src/scripts/blocks/image/BlockEdit.js:205
 #: src/scripts/blocks/link/DisplayComponent.js:60
-#: src/scripts/blocks/link/DisplayComponent.js:63
 #: src/scripts/blocks/slider/DisplayComponent.js:35
 msgid "Left"
 msgstr ""
@@ -200,7 +199,6 @@ msgstr ""
 #: src/scripts/blocks/header/DisplayComponent.js:87
 #: src/scripts/blocks/image/BlockEdit.js:208
 #: src/scripts/blocks/link/DisplayComponent.js:66
-#: src/scripts/blocks/link/DisplayComponent.js:69
 #: src/scripts/blocks/slider/DisplayComponent.js:38
 msgid "Right"
 msgstr ""
@@ -223,7 +221,7 @@ msgstr ""
 #: src/scripts/blocks/header/DisplayComponent.js:117
 #: src/scripts/blocks/links-with-icons/InnerBlockEdit.js:228
 #: src/scripts/blocks/logo-list/InnerBlockEdit.js:145
-#: src/scripts/blocks/section/DisplayComponent.js:35
+#: src/scripts/blocks/section/DisplayComponent.js:52
 msgid "Small"
 msgstr ""
 
@@ -249,7 +247,7 @@ msgstr ""
 #: src/scripts/blocks/links-with-icons/BlockEdit.js:67
 #: src/scripts/blocks/logo-list/BlockEdit.js:58
 #: src/scripts/blocks/menu/DisplayComponent.js:11
-#: src/scripts/blocks/section/DisplayComponent.js:23
+#: src/scripts/blocks/section/DisplayComponent.js:40
 #: src/scripts/blocks/section/index.js:27
 msgid "Grey"
 msgstr ""
@@ -441,7 +439,7 @@ msgid "Edit File"
 msgstr ""
 
 #: src/scripts/blocks/header/DisplayComponent.js:114
-#: src/scripts/blocks/section/DisplayComponent.js:47
+#: src/scripts/blocks/section/DisplayComponent.js:64
 msgid "Normal"
 msgstr ""
 
@@ -472,6 +470,7 @@ msgid ""
 msgstr ""
 
 #: src/scripts/blocks/header/DisplayComponent.js:144
+#: src/scripts/blocks/section/DisplayComponent.js:82
 msgid "Background Image"
 msgstr ""
 
@@ -506,7 +505,7 @@ msgstr ""
 #: src/scripts/blocks/links-with-icons/BlockEdit.js:62
 #: src/scripts/blocks/logo-list/BlockEdit.js:53
 #: src/scripts/blocks/menu/DisplayComponent.js:102
-#: src/scripts/blocks/section/DisplayComponent.js:18
+#: src/scripts/blocks/section/DisplayComponent.js:35
 msgid "Background Colour"
 msgstr ""
 
@@ -519,7 +518,7 @@ msgstr ""
 #: src/scripts/blocks/link/DisplayComponent.js:45
 #: src/scripts/blocks/links-with-icons/BlockEdit.js:66
 #: src/scripts/blocks/logo-list/BlockEdit.js:57
-#: src/scripts/blocks/section/DisplayComponent.js:38
+#: src/scripts/blocks/section/DisplayComponent.js:55
 msgid "None"
 msgstr ""
 
@@ -569,7 +568,7 @@ msgid "Write caption…"
 msgstr ""
 
 #: src/scripts/blocks/iframe/DisplayComponent.js:91
-#: src/scripts/blocks/section/DisplayComponent.js:45
+#: src/scripts/blocks/section/DisplayComponent.js:62
 msgid "Width"
 msgstr ""
 
@@ -1005,16 +1004,16 @@ msgstr ""
 msgid "Posts"
 msgstr ""
 
-#: src/scripts/blocks/section/DisplayComponent.js:30
+#: src/scripts/blocks/section/DisplayComponent.js:47
 msgid "Padding"
 msgstr ""
 
-#: src/scripts/blocks/section/DisplayComponent.js:50
+#: src/scripts/blocks/section/DisplayComponent.js:67
 #: src/scripts/blocks/tweet/index.js:90
 msgid "Narrow"
 msgstr ""
 
-#: src/scripts/blocks/section/DisplayComponent.js:60
+#: src/scripts/blocks/section/DisplayComponent.js:77
 msgid "Id (scroll location)"
 msgstr ""
 

src/scripts/blocks/section/DisplayComponent.js

@@ -1,4 +1,5 @@
 import classNames from 'classnames';
+import PostMediaSelector from '../PostMediaSelector';
 
 const { __ } = wp.i18n;
 const { Component, Fragment } = wp.element;
@@ -8,8 +9,24 @@ const { InspectorControls, InnerBlocks } = wp.editor;
 class DisplayComponent extends Component {
   createUpdateAttribute = key => value => this.props.setAttributes({ [key]: value });
 
+  onMediaChange = (media) => {
+    if (media) {
+      this.props.setAttributes({ mediaId: media.id });
+      this.props.setAttributes({ mediaUrl: media.source_url });
+      return;
+    }
+
+    this.props.setAttributes({ mediaId: null });
+    this.props.setAttributes({ mediaUrl: null });
+  };
+
   render() {
     const { attributes } = this.props;
+    const styles = {
+      backgroundImage: `url(${attributes.mediaUrl})`,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center center',
+    };
 
     return (<Fragment>
       <InspectorControls>
@@ -62,12 +79,18 @@ class DisplayComponent extends Component {
             value={ attributes.id }
           />
         </PanelBody>
+        <PanelBody title={ __('Background Image', 'benenson') }>
+          <PostMediaSelector
+            onUpdate={ this.onMediaChange }
+            mediaId={ attributes.mediaId }
+          />
+        </PanelBody>
       </InspectorControls>
       <section className={ classNames({
         section: true,
         'section--tinted': attributes.background === 'grey',
         [`section--${attributes.padding}`]: !!attributes.padding,
-      }) }>
+      }) } style={ attributes.mediaUrl ? styles : null }>
         <div className="container">
           <InnerBlocks />
         </div>

src/scripts/blocks/section/index.js

@@ -30,6 +30,12 @@ registerBlockType('benenson/block-section', {
     background: {
       type: 'string',
     },
+    mediaUrl: {
+      type: 'string',
+    },
+    mediaId: {
+      type: 'integer',
+    },
     padding: {
       type: 'string',
     },