Add block container stub

src/SearchBlock/BlockContainer/BlockContainer.jsx

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default function BlockContainer(props) {
+  return null;
+}

src/SearchBlock/BlockContainer/NewBlockAddButton.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Button } from 'semantic-ui-react';
+import { BlockChooser, Icon } from '@plone/volto/components';
+import useOutsideClick from '@eeacms/search/lib/hocs/useOutsideClick';
+import addSVG from '@plone/volto/icons/add.svg';
+
+const NewBlockAddButton = (props) => {
+  const { allowedBlocks, block, index, onChangeGridItem } = props;
+  const ref = React.useRef();
+  const [isOpenMenu, setOpenMenu] = React.useState(false);
+
+  useOutsideClick(ref, () => setOpenMenu(false));
+
+  return (
+    <>
+      {isOpenMenu ? (
+        <div ref={ref}>
+          <BlockChooser
+            onMutateBlock={(block, value) => onChangeGridItem(index, value)}
+            currentBlock={block}
+            showRestricted
+            allowedBlocks={allowedBlocks}
+          />
+        </div>
+      ) : (
+        <Button
+          basic
+          icon
+          onClick={() => setOpenMenu(true)}
+          className="add-block-button"
+          aria-label={`Add grid block in position ${index}`}
+        >
+          <Icon name={addSVG} className="circled" size="24px" />
+        </Button>
+      )}
+    </>
+  );
+};
+
+export default NewBlockAddButton;

src/SearchBlock/BlockContainer/index.js

@@ -0,0 +1 @@
+export BlockContainer from './BlockContainer';

src/SearchBlock/SearchBlockView.jsx

@@ -20,7 +20,7 @@ function SearchBlockView(props) {
 
   const registry = React.useMemo(() => {
     // TODO: this has the effect that the appConfig is never stable if the
-    // schema changes.
+    // schema changes, even if it's unrelated.
     const reg = applyBlockSettings(
       config.settings.searchlib,
       appName,
@@ -49,6 +49,7 @@ function SearchBlockView(props) {
     <div>
       {mode !== 'view' && 'EEA Semantic Search block'}
       <Variation
+        slotFills={data.slotFills}
         registry={registry}
         appName={appName}
         mode={mode}

src/SearchBlock/templates/FullView.jsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { BodyClass } from '@plone/volto/helpers';
 import { SearchApp } from '@eeacms/search';
+import { BlockContainer } from './../BlockContainer';
 
 const overlayStyle = {
   position: 'absolute',
@@ -9,6 +10,22 @@ const overlayStyle = {
   zIndex: '100',
 };
 
+const slots = [
+  'aboveSearchInput',
+  'belowSearchInput',
+  'aboveResults',
+  'belowResults',
+];
+
+const getBlocks = (slotFills = {}, mode = 'view') => {
+  return Object.assign(
+    {},
+    slots.map((name) => ({
+      [name]: <BlockContainer block={name} data={slotFills[name]} />,
+    })),
+  );
+};
+
 function FullView(props) {
   const { appName, mode } = props;
 
@@ -20,7 +37,10 @@ function FullView(props) {
         {mode !== 'view' && (
           <div className="overlay" style={overlayStyle}></div>
         )}
-        <SearchApp {...props} />
+        <SearchApp
+          {...props}
+          slotFills={getBlocks(props.data?.slotFills, mode)}
+        />
         {props.children}
       </div>
     </BodyClass>