+ );
+}
diff --git a/packages/edit-widgets/src/components/secondary-sidebar/style.scss b/packages/edit-widgets/src/components/secondary-sidebar/style.scss
new file mode 100644
index 00000000000000..5acf945480a528
--- /dev/null
+++ b/packages/edit-widgets/src/components/secondary-sidebar/style.scss
@@ -0,0 +1,25 @@
+.edit-widgets-editor__list-view-panel {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ // Same width as the Inserter.
+ // @see packages/block-editor/src/components/inserter/style.scss
+ min-width: 350px;
+}
+
+.edit-widgets-editor__list-view-panel-content {
+ // Leave space for the close button
+ height: calc(100% - #{$button-size} - #{$grid-unit-10});
+ overflow-y: auto;
+ padding: $grid-unit-10;
+}
+
+.edit-widgets-editor__list-view-panel-header {
+ align-items: center;
+ border-bottom: $border-width solid $gray-300;
+ display: flex;
+ justify-content: space-between;
+ height: $grid-unit-60;
+ padding-left: $grid-unit-20;
+ padding-right: $grid-unit-05;
+}
diff --git a/packages/edit-widgets/src/store/actions.js b/packages/edit-widgets/src/store/actions.js
index 93462625e0a9e8..0701274885d71c 100644
--- a/packages/edit-widgets/src/store/actions.js
+++ b/packages/edit-widgets/src/store/actions.js
@@ -361,6 +361,19 @@ export function setIsInserterOpened( value ) {
};
}
+/**
+ * Returns an action object used to open/close the list view.
+ *
+ * @param {boolean} isOpen A boolean representing whether the list view should be opened or closed.
+ * @return {Object} Action object.
+ */
+export function setIsListViewOpened( isOpen ) {
+ return {
+ type: 'SET_IS_LIST_VIEW_OPENED',
+ isOpen,
+ };
+}
+
/**
* Returns an action object signalling that the user closed the sidebar.
*
diff --git a/packages/edit-widgets/src/store/reducer.js b/packages/edit-widgets/src/store/reducer.js
index b0fe86db810723..ff942b955edcdc 100644
--- a/packages/edit-widgets/src/store/reducer.js
+++ b/packages/edit-widgets/src/store/reducer.js
@@ -31,20 +31,45 @@ export function widgetAreasOpenState( state = {}, action ) {
}
/**
- * Reducer tracking whether the inserter is open.
+ * Reducer to set the block inserter panel open or closed.
*
- * @param {boolean|Object} state
- * @param {Object} action
+ * Note: this reducer interacts with the list view panel reducer
+ * to make sure that only one of the two panels is open at the same time.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
*/
-function blockInserterPanel( state = false, action ) {
+export function blockInserterPanel( state = false, action ) {
switch ( action.type ) {
+ case 'SET_IS_LIST_VIEW_OPENED':
+ return action.isOpen ? false : state;
case 'SET_IS_INSERTER_OPENED':
return action.value;
}
return state;
}
+/**
+ * Reducer to set the list view panel open or closed.
+ *
+ * Note: this reducer interacts with the inserter panel reducer
+ * to make sure that only one of the two panels is open at the same time.
+ *
+ * @param {Object} state Current state.
+ * @param {Object} action Dispatched action.
+ */
+export function listViewPanel( state = false, action ) {
+ switch ( action.type ) {
+ case 'SET_IS_INSERTER_OPENED':
+ return action.value ? false : state;
+ case 'SET_IS_LIST_VIEW_OPENED':
+ return action.isOpen;
+ }
+ return state;
+}
+
export default combineReducers( {
blockInserterPanel,
+ listViewPanel,
widgetAreasOpenState,
} );
diff --git a/packages/edit-widgets/src/store/selectors.js b/packages/edit-widgets/src/store/selectors.js
index a45d5a223e45a2..c672454fff1657 100644
--- a/packages/edit-widgets/src/store/selectors.js
+++ b/packages/edit-widgets/src/store/selectors.js
@@ -277,3 +277,14 @@ export const canInsertBlockInWidgetArea = createRegistrySelector(
);
}
);
+
+/**
+ * Returns true if the list view is opened.
+ *
+ * @param {Object} state Global application state.
+ *
+ * @return {boolean} Whether the list view is opened.
+ */
+export function isListViewOpened( state ) {
+ return state.listViewPanel;
+}
diff --git a/packages/edit-widgets/src/style.scss b/packages/edit-widgets/src/style.scss
index 7d75dc6443bda2..1a537c325b4e31 100644
--- a/packages/edit-widgets/src/style.scss
+++ b/packages/edit-widgets/src/style.scss
@@ -10,6 +10,7 @@
@import "./components/layout/style.scss";
@import "./components/welcome-guide/style.scss";
@import "./components/widget-areas-block-editor-content/style.scss";
+@import "./components/secondary-sidebar/style.scss";
// In order to use mix-blend-mode, this element needs to have an explicitly set background-color
// We scope it to .wp-toolbar to be wp-admin only, to prevent bleed into other implementations