Import blog post flow

[psrpinto]

This PR implements the UI for importing a single blog post. It doesn't import anything yet though, communication with the WP API will be implemented later.

This is just the basic UI, I will iterate on it in future PRs. See next steps below.

Screen.Recording.2024-09-12.at.11.54.30.mov

Next steps

• Call the paste handler of the block editor on the elements the user selects.
• Attempt to automatically identify each section, using CSS selectors. For now it just says "Not found", it should instead already display e.g. the title, if we were able to automatically find it.

Summary of changes

flows

The import process for each type of content (post, page, product, etc) is called a "flow" and is implemented as a component, under ui/flows/. For example, the flow for importing a single blog post is at ui/flows/blog-post/BlogPostFlow. This PR only implements the blog-post flow, in the future there will be other ones.

bus

Suggestions for a better name are welcome :)

There's now a bus module (as in, message bus) that allows for communication between the app and the content script, and vice-versa. I looked into using comlink for this, but AFAICT it doesn't work out of the box in web extensions, so I decided to keep it simple for now.

The app has an AppBus and the content script has a ContentBus. Under the hood, these "buses" use sendMessage(), they're just a means to expose a specific API on top of sendMessage().

The ContentBus currently exposes the following actions:

• enableHighlighting, to start the highlighting of hovered elements
• disableHighlighting, to stop the highlighting of hovered elements

The AppBus currently exposes the following actions:

• elementClicked, to communicate which element has been clicked in the content window

You would call one of the actions as follows:

await ContentBus.disableHighlighting();

You can start listening to messages with:

AppBus.listen( async ( message: Message ) => {
	switch ( message.action ) {
		case AppBus.actions.ElementClicked:
			// Do something with the message.
	}
} );

For the moment there can only be a single listener per bus, but we can easily change this if/when there is a need for more than one.

[ashfame]

Looks good!