Components: Add Pagination component

[t-hamano]

What problem does this address?

The current Gutenberg project uses pagination in several places.

These paginations are built uniquely in each location, but I imagine they could be implemented as a common component. In other words, it is a component similar to the_posts_pagination() function.

What is your proposed solution?

If we mimic the output of the_posts_pagination(), it will probably look something like this:

Apart from this, we may also need a type that allows you to enter the page number in a text box:

I'm imagining the following usage, for example:

import { Pagination } from '@wordpress/components';

function MyComponent() {
	const [ currentPage, setCurrentPage ] = useState( 1 );
	return (
		<div className="my-pagination">
			<Pagination
				total="10"
				current={ currentPage }
				midSize="3"
				prevText="Previous page"
				nextText="Next page"
				type="list"
				hasPageInput
				isSmall
				onChange={ ( newPage ) => setCurrentPage( newPage ) }
			/>
		</div>
	);
}

Screenshots

Below is the pagination that I was able to find. In addition to this, pagination may also be implemented for revisions, as seen in #53621.

Patterns Inserter

Pattern Page

Data View