Data views: set initial selection

src/sidebar.jsx

@@ -1,6 +1,6 @@
 import { DataViews } from '@wordpress/dataviews';
 import { __ } from '@wordpress/i18n';
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 import { getTitleFromBlocks } from './read-write';
 
 function Title({ item: { path, blocks } }) {
@@ -31,6 +31,17 @@ export default function SiderBar({ items, setItem, currentId, setCurrentId }) {
 		);
 	}
 
+	// Temporary hack until we can control selection in data views.
+	useEffect(() => {
+		const button = document.getElementById('view-list-0-' + currentId);
+
+		if (button?.getAttribute('aria-pressed') === 'false') {
+			const { activeElement } = document;
+			button.click();
+			activeElement.focus();
+		}
+	}, [currentId]);
+
 	return (
 		<DataViews
 			data={items}

src/style.css

@@ -106,6 +106,7 @@ ul.dataviews-view-list li {
 #select .components-toolbar {
   border-color: #e0e0e0;
   border-width: 0 1px 0 0;
+  background-color: transparent;
 }
 
 #editor > div {