enables the search bar as sticky to the add-block popup

src/client/components/forms/field-types/Flexible/BlockSelector/BlockSearch/index.scss

@@ -4,9 +4,11 @@ $icon-width: base(1);
 $icon-margin: base(.25);
 
 .block-search {
-  position: relative;
+  position: sticky;
+  top: 0;
   display: flex;
   align-items: center;
+  z-index: 1;
 
   &__input {
     @include formInput;

src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import FallbackBlockImage from '../../../../../graphics/FallbackBlockImage';
+import DefaultBlockImage from '../../../../../graphics/DefaultBlockImage';
 
 import './index.scss';
 
@@ -12,9 +12,9 @@ const BlockSelection = (props) => {
     addRow, addRowIndex, block, close,
   } = props;
 
-  const { labels, slug, blockImage } = block;
-
-  console.log(blockImage);
+  const {
+    labels, slug, blockImage, blockImageAltText,
+  } = block;
 
   const handleBlockSelection = () => {
     close();
@@ -29,8 +29,15 @@ const BlockSelection = (props) => {
       onClick={handleBlockSelection}
     >
       <div className={`${baseClass}__image`}>
-        {/* <img src={blockImage} /> */}
-        <FallbackBlockImage />
+        {blockImage
+          ? (
+            <img
+              src={blockImage}
+              alt={blockImageAltText}
+            />
+          )
+          : <DefaultBlockImage />
+        }
       </div>
       <div className={`${baseClass}__label`}>{labels.singular}</div>
     </div>
@@ -51,6 +58,7 @@ BlockSelection.propTypes = {
     }),
     slug: PropTypes.string,
     blockImage: PropTypes.string,
+    blockImageAltText: PropTypes.string,
   }).isRequired,
   close: PropTypes.func.isRequired,
 };

src/client/components/forms/field-types/Flexible/BlockSelector/BlockSelection/index.scss

@@ -7,18 +7,12 @@
   width: 33%;
   padding: base(.75) base(.5);
   cursor: pointer;
+  align-items: center;
 
   &:hover {
     background-color: $color-background-gray;
   }
 
-  &__image {
-    svg {
-      width: 100%;
-      height: auto;
-    }
-  }
-
   &__label {
     margin-top: base(.25);
     font-weight: 600;

src/client/components/forms/field-types/Flexible/BlockSelector/BlocksContainer/index.scss

@@ -3,4 +3,10 @@
 .blocks-container {
   width: 100%;
   margin-top: base(1);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  max-width: 450px;
+  max-height: 300px;
+  position: relative;
 }

src/client/components/graphics/DefaultBlockImage/index.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-const FallbackBlockImage = () => {
+const DefaultBlockImage = () => {
   return (
     <svg
       width="82"
@@ -37,4 +37,4 @@ const FallbackBlockImage = () => {
   );
 };
 
-export default FallbackBlockImage;
+export default DefaultBlockImage;