Add language chooser package and component

docs/manifest.json

@@ -1781,6 +1781,12 @@
 		"markdown_source": "../packages/keycodes/README.md",
 		"parent": "packages"
 	},
+	{
+		"title": "@wordpress/language-chooser",
+		"slug": "packages-language-chooser",
+		"markdown_source": "../packages/language-chooser/README.md",
+		"parent": "packages"
+	},
 	{
 		"title": "@wordpress/lazy-import",
 		"slug": "packages-lazy-import",

lib/client-assets.php

@@ -477,6 +477,15 @@ function gutenberg_register_packages_styles( $styles ) {
 		$version
 	);
 	$styles->add_data( 'wp-preferences', 'rtl', 'replace' );
+
+	gutenberg_override_style(
+		$styles,
+		'wp-language-chooser',
+		gutenberg_url( 'build/language-chooser/style.css' ),
+		array( 'wp-components' ),
+		$version
+	);
+	$styles->add_data( 'wp-language-chooser', 'rtl', 'replace' );
 }
 add_action( 'wp_default_styles', 'gutenberg_register_packages_styles' );
 

package.json

@@ -64,6 +64,7 @@
 		"@wordpress/is-shallow-equal": "file:packages/is-shallow-equal",
 		"@wordpress/keyboard-shortcuts": "file:packages/keyboard-shortcuts",
 		"@wordpress/keycodes": "file:packages/keycodes",
+		"@wordpress/language-chooser": "file:packages/language-chooser",
 		"@wordpress/list-reusable-blocks": "file:packages/list-reusable-blocks",
 		"@wordpress/media-utils": "file:packages/media-utils",
 		"@wordpress/notices": "file:packages/notices",

packages/language-chooser/.npmrc

@@ -0,0 +1 @@
+package-lock=false

packages/language-chooser/CHANGELOG.md

@@ -0,0 +1,7 @@
+<!-- Learn how to maintain this file at https://github.com/WordPress/gutenberg/tree/HEAD/packages#maintaining-changelogs. -->
+
+## Unreleased
+
+### New Features
+
+-   Initial public release.

packages/language-chooser/README.md

@@ -0,0 +1,23 @@
+# Language Chooser
+
+Package used for rendering a UI component for choosing preferred languages.
+
+> This package is meant to be used only with WordPress core. Feel free to use it in your own project but please keep in mind that it might never get fully documented.
+
+## Installation
+
+Install the module
+
+```bash
+npm install @wordpress/language-chooser --save
+```
+
+_This package assumes that your code will run in an **ES2015+** environment. If you're using an environment that has limited or no support for such language features and APIs, you should include [the polyfill shipped in `@wordpress/babel-preset-default`](https://github.com/WordPress/gutenberg/tree/HEAD/packages/babel-preset-default#polyfill) in your code._
+
+## Contributing to this package
+
+This is an individual package that's part of the Gutenberg project. The project is organized as a monorepo. It's made up of multiple self-contained software packages, each with a specific purpose. The packages in this monorepo are published to [npm](https://www.npmjs.com/) and used by [WordPress](https://make.wordpress.org/core/) as well as other software projects.
+
+To find out more about contributing to this package or Gutenberg as a whole, please read the project's main [contributor guide](https://github.com/WordPress/gutenberg/tree/HEAD/CONTRIBUTING.md).
+
+<br /><br /><p align="center"><img src="https://s.w.org/style/images/codeispoetry.png?1" alt="Code is Poetry." /></p>

packages/language-chooser/package.json

@@ -0,0 +1,45 @@
+{
+	"name": "@wordpress/language-chooser",
+	"version": "1.0.0-prerelease",
+	"description": "Component for choosing multiple preferred languages.",
+	"author": "The WordPress Contributors",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"wordpress",
+		"gutenberg",
+		"templates",
+		"reusable blocks"
+	],
+	"homepage": "https://github.com/WordPress/gutenberg/tree/HEAD/packages/language-chooser/README.md",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/WordPress/gutenberg.git",
+		"directory": "packages/language-chooser"
+	},
+	"bugs": {
+		"url": "https://github.com/WordPress/gutenberg/issues"
+	},
+	"engines": {
+		"node": ">=18.12.0",
+		"npm": ">=8.19.2"
+	},
+	"main": "build/index.js",
+	"module": "build-module/index.js",
+	"sideEffects": [
+		"build-style/**",
+		"src/**/*.scss"
+	],
+	"types": "build-types",
+	"dependencies": {
+		"@babel/runtime": "^7.16.0",
+		"@wordpress/a11y": "file:../a11y",
+		"@wordpress/components": "file:../components",
+		"@wordpress/compose": "file:../compose",
+		"@wordpress/element": "file:../element",
+		"@wordpress/i18n": "file:../i18n",
+		"@wordpress/keycodes": "file:../keycodes"
+	},
+	"publishConfig": {
+		"access": "public"
+	}
+}

packages/language-chooser/src/index.ts

@@ -0,0 +1 @@
+export { default as LanguageChooser } from './language-chooser';

packages/language-chooser/src/language-chooser/active-controls.tsx

@@ -0,0 +1,92 @@
+/**
+ * WordPress dependencies
+ */
+import { __, sprintf } from '@wordpress/i18n';
+import { Button, ButtonGroup } from '@wordpress/components';
+
+interface ActiveControlsProps {
+	onMoveUp: () => void;
+	onMoveDown: () => void;
+	onRemove: () => void;
+	isMoveUpDisabled: boolean;
+	isMoveDownDisabled: boolean;
+	isRemoveDisabled: boolean;
+}
+function ActiveControls( {
+	onMoveUp,
+	onMoveDown,
+	onRemove,
+	isMoveUpDisabled,
+	isMoveDownDisabled,
+	isRemoveDisabled,
+}: ActiveControlsProps ) {
+	return (
+		<ButtonGroup>
+			<Button
+				variant="secondary"
+				showTooltip
+				aria-keyshortcuts="ArrowUp"
+				aria-label={ sprintf(
+					/* translators: accessibility text */
+					__( 'Move up (%s)' ),
+					/* translators: keyboard shortcut (Arrow Up) */
+					__( 'Up' )
+				) }
+				label={
+					/* translators: keyboard shortcut (Arrow Up) */
+					__( 'Up' )
+				}
+				disabled={ isMoveUpDisabled }
+				accessibleWhenDisabled
+				onClick={ onMoveUp }
+				__next40pxDefaultSize
+			>
+				{ __( 'Move Up' ) }
+			</Button>
+			<Button
+				variant="secondary"
+				showTooltip
+				aria-keyshortcuts="ArrowDown"
+				aria-label={ sprintf(
+					/* translators: accessibility text */
+					__( 'Move down (%s)' ),
+					/* translators: keyboard shortcut (Arrow Down) */
+					__( 'Down' )
+				) }
+				label={
+					/* translators: keyboard shortcut (Arrow Down) */
+					__( 'Down' )
+				}
+				disabled={ isMoveDownDisabled }
+				accessibleWhenDisabled
+				onClick={ onMoveDown }
+				__next40pxDefaultSize
+			>
+				{ __( 'Move Down' ) }
+			</Button>
+			<Button
+				variant="secondary"
+				showTooltip
+				aria-keyshortcuts="Delete"
+				aria-label={ sprintf(
+					/* translators: accessibility text */
+					__( 'Remove from list (%s)' ),
+					/* translators: keyboard shortcut (Delete / Backspace) */
+					__( 'Delete' )
+				) }
+				label={
+					/* translators: keyboard shortcut (Delete / Backspace) */
+					__( 'Delete' )
+				}
+				disabled={ isRemoveDisabled }
+				accessibleWhenDisabled
+				onClick={ onRemove }
+				__next40pxDefaultSize
+			>
+				{ __( 'Remove' ) }
+			</Button>
+		</ButtonGroup>
+	);
+}
+
+export default ActiveControls;

packages/language-chooser/src/language-chooser/active-locales.tsx

@@ -0,0 +1,123 @@
+/**
+ * WordPress dependencies
+ */
+import { useLayoutEffect, useRef } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+import { __experimentalText as Text } from '@wordpress/components';
+
+/**
+ * Internal dependencies
+ */
+import type { Language } from './types';
+import ActiveControls from './active-controls';
+
+interface ActiveLocalesProps {
+	languages: Language[];
+	activeLanguage?: Language;
+	showOptionSiteDefault?: boolean;
+	setActiveLanguage: ( language: Language ) => void;
+	onMoveUp: () => void;
+	onMoveDown: () => void;
+	onRemove: () => void;
+	isEmpty: boolean;
+	isMoveUpDisabled: boolean;
+	isMoveDownDisabled: boolean;
+	isRemoveDisabled: boolean;
+	labelId: string;
+}
+
+export function ActiveLocales( {
+	languages,
+	showOptionSiteDefault = false,
+	activeLanguage,
+	setActiveLanguage,
+	onMoveUp,
+	onMoveDown,
+	onRemove,
+	isEmpty,
+	isMoveUpDisabled,
+	isMoveDownDisabled,
+	isRemoveDisabled,
+	labelId,
+}: ActiveLocalesProps ) {
+	const listRef = useRef< HTMLUListElement | null >( null );
+
+	useLayoutEffect( () => {
+		const selectedEl = listRef.current?.querySelector(
+			'[aria-selected="true"]'
+		);
+
+		if ( ! selectedEl ) {
+			return;
+		}
+
+		selectedEl.scrollIntoView( {
+			behavior: 'smooth',
+			block: 'nearest',
+		} );
+	}, [ activeLanguage, languages ] );
+
+	const activeDescendant = isEmpty ? '' : activeLanguage?.locale;
+
+	const className = isEmpty
+		? 'language-chooser__active-locales-list language-chooser__active-locales-list--empty'
+		: 'language-chooser__active-locales-list';
+
+	let emptyMessage = sprintf(
+		/* translators: Used in language chooser, indicating fall back to the site's default language. %s: English (United States) */
+		__( 'Falling back to %s.' ),
+		'English (United States)'
+	);
+
+	if ( showOptionSiteDefault ) {
+		/* translators: Used in language chooser, indicating fall back to the site's default language. */
+		emptyMessage = __( 'Falling back to Site Default.' );
+	}
+
+	return (
+		<div className="language-chooser__active-locales">
+			{ isEmpty && (
+				<div className="language-chooser__active-locales-empty-message">
+					<Text>{ __( 'Nothing set.' ) }</Text>
+					<Text>{ emptyMessage }</Text>
+				</div>
+			) }
+			<ul
+				role="listbox"
+				aria-labelledby={ labelId }
+				tabIndex={ 0 }
+				aria-activedescendant={ activeDescendant }
+				className={ className }
+				ref={ listRef }
+			>
+				{ languages.map( ( language ) => {
+					const { locale, nativeName, lang } = language;
+					return (
+						// eslint-disable-next-line jsx-a11y/click-events-have-key-events
+						<li
+							key={ locale }
+							role="option"
+							aria-selected={ locale === activeLanguage?.locale }
+							id={ locale }
+							lang={ lang }
+							className="language-chooser__active-locale"
+							onClick={ () => setActiveLanguage( language ) }
+						>
+							{ nativeName }
+						</li>
+					);
+				} ) }
+			</ul>
+			<ActiveControls
+				onMoveUp={ onMoveUp }
+				onMoveDown={ onMoveDown }
+				onRemove={ onRemove }
+				isMoveUpDisabled={ isMoveUpDisabled }
+				isMoveDownDisabled={ isMoveDownDisabled }
+				isRemoveDisabled={ isRemoveDisabled }
+			/>
+		</div>
+	);
+}
+
+export default ActiveLocales;