WordPress Gutenberg

https://github.com/wordpress/gutenberg
Admin
Gutenberg is the codename for the new WordPress block editor, revolutionizing site building and...
Tokens:2,786,286
Snippets:17,817
Trust Score:9
Update:1 week ago
Show doc for...
Tokens:
Raw
### Install and build commands

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/documentation/how-to-guide-template.md

Example shell commands for installing dependencies and building the project, as shown in Step 3 of the template.

```shell
npm install
npm run build
```

--------------------------------

### Setup and Development Commands

Source: https://github.com/wordpress/gutenberg/blob/trunk/AGENTS.md

Commands for setting up the development environment and running development or production builds. Use `nvm use` to select the required Node version, then install dependencies with `npm install && composer install`. Always check the environment status with `npm run wp-env-test status` before starting it. For development, use `npm start` for watch mode; for production builds, use `npm run build`, which emits types with `--noCheck` and does not type check.

```bash
# Setup
nvm use                    # Use the required node version
npm install && composer install
npm run wp-env-test status      # Always check status first.
npm run wp-env-test start       # Only start if not already running.

# Development
npm start     # Development with watch
npm run build # Production build; emits types with --noCheck, does NOT type check
```

--------------------------------

### Quick start wp-env installation and startup

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md

Commands to install the wp-env package globally and start the local WordPress environment within a project directory.

```sh
$ cd /path/to/a/wordpress/plugin
$ npm -g i @wordpress/env
$ wp-env start
```

--------------------------------

### Basic Usage of the Guide component

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/components/src/guide/README.md

Example showing how to render a Guide component with pages containing content and images, and an onFinish callback to close the modal.

```jsx
function MyTutorial() {
	const [ isOpen, setIsOpen ] = useState( true );

	if ( ! isOpen ) {
		return null;
	}

	return (
		<Guide
			onFinish={ () => setIsOpen( false ) }
			pages={ [
				{
					content: <p>Welcome to the ACME Store!</p>,
				},
				{
					image: <img src="https://acmestore.com/add-to-cart.png" />,
					content: (
						<p>
							Click <i>Add to Cart</i> to buy a product.
						</p>
					),
				},
			] }
		/>
	);
}
```

--------------------------------

### package.json scripts for start variants

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/scripts/README.md

Example package.json scripts showing how to configure the `start` script with various options: `--hot`, custom entry points and output path, `--webpack-copy-php`, and `--source-path`.

```json
{
	"scripts": {
		"start": "wp-scripts start",
		"start:hot": "wp-scripts start --hot",
		"start:custom": "wp-scripts start entry-one.js entry-two.js --output-path=custom",
		"start:copy-php": "wp-scripts start --webpack-copy-php",
		"start:custom-directory": "wp-scripts start --source-path=custom-directory"
	}
}
```

--------------------------------

### Example project folder structure

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/getting-started/devenv/get-started-with-wp-scripts.md

Shows the expected folder structure after installation, including the required build, src/index.js, and package.json files.

```bash
example-project-folder/
├── build/
├── node_modules/ (autogenerated)
├── src/
│   └── index.js
├── package-lock.json (autogenerated)
└── package.json

```

--------------------------------

### Start the local WordPress environment

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/getting-started/quick-start-guide.md

Use wp-env to start a local WordPress instance for testing the block. Requires Docker to be installed and running.

```sh
npm run env start
```

--------------------------------

### Setup and teardown methods

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/testing-overview.md

Use beforeAll and afterAll to manage asynchronous setup and cleanup for test suites.

```javascript
import { afterAll, beforeAll } from 'vitest';

// one-time setup for *all* tests
beforeAll( () =>
	someAsyncAction().then( ( resp ) => {
		window.someGlobal = resp;
	} )
);

// one-time teardown for *all* tests
afterAll( () => {
	window.someGlobal = null;
} );
```

--------------------------------

### setup

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/a11y/README.md

Create the live regions.

```APIDOC
## setup

### Description
Create the live regions.
```

--------------------------------

### getActiveFormats

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/rich-text/README.md

Gets all format objects at the start of the selection.

```APIDOC
## getActiveFormats

### Description
Gets the all format objects at the start of the selection.

### Parameters
- **value** (`RichTextValue`) - Required - Value to inspect.
- **EMPTY_ACTIVE_FORMATS** (`RichTextFormatList`) - Required - Array to return if there are no active formats.

### Returns
- Active format objects.
```

--------------------------------

### Get and set preferences with get and set

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/preferences/README.md

Use the get selector to read a preference value and the set action to update it. The example shows the value changing from 1 to 2 after the set call.

```js
wp.data
	.select( 'core/preferences' )
	.get( 'namespace/editor-or-plugin-name', 'myPreferenceName' ); // 1
wp.data
	.dispatch( 'core/preferences' )
	.set( 'namespace/editor-or-plugin-name', 'myPreferenceName', 2 );
wp.data
	.select( 'core/preferences' )
	.get( 'namespace/editor-or-plugin-name', 'myPreferenceName' ); // 2
```

--------------------------------

### Start development server with npm start

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/reference-guides/interactivity-api/iapi-quick-start-guide.md

Navigates into the plugin folder and starts the development server, which watches for changes and rebuilds the block automatically.

```bash
cd my-first-interactive-block && npm start
```

--------------------------------

### Install @wordpress/jest-console explicitly

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/scripts/docs/vitest-migration.md

Install `@wordpress/jest-console` explicitly only if your own setup imports it directly. The published preset already supplies console assertions through its dependency on `@wordpress/jest-console`.

```sh
npm install --save-dev @wordpress/jest-console@9.3.0
```

--------------------------------

### Start the development process

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/getting-started/quick-start-guide.md

Navigate to the plugin directory and start the development server to watch for code changes.

```sh
cd copyright-date-block && npm start
```

--------------------------------

### Install Vitest 5 and Vite 8 for test-unit-js

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/scripts/README.md

Install Vitest 5 and Vite 8 as dev dependencies for a new test setup using test-unit-js.

```sh
npm install --save-dev vitest@^5 vite@^8
```

--------------------------------

### MyEditorPreferencesModal example

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/preferences/src/components/preferences-modal/README.md

Example of using PreferencesModal with PreferencesModalTabs and PreferencesModalSection. The component uses useDispatch from editPostStore to get closeModal, and defines sections with tab labels and content. Note: the example contains a syntax error in the closing tag (should be </PreferencesModal> instead of <PreferencesModal />).

```jsx
function MyEditorPreferencesModal() {
	const { closeModal } = useDispatch( editPostStore );
	const sections = [
		{
			name: 'section 1',
			tabLabel: __( 'Section 1' ),
			content: (
						<PreferencesModalSection
							title={ __( 'Publishing' ) }
							description={ __(
								'Change options related to publishing.'
							) }
						>
							<EnablePublishSidebarOption
								help={ __(
									'Review settings, such as visibility and tags.'
								) }
								label={ __(
									'Enable pre-publish checks'
								) }
							/>
						</PreferencesModalSection>
					)

		}
		{
			name: 'section 2',
			tabLabel: __( 'Section 2' ),
			content: (
						<PreferencesModalSection
							title={ __( 'Additional' ) }
							description={ __(
								'Add extra areas to the editor.'
							) }
						>
							// Section content here
						</PreferencesModalSection>
					)

		}
	]
	return (
		<PreferencesModal closeModal={ closeModal }>
			<PreferencesModalTabs sections={ sections } />
		<PreferencesModal />
	);
}
```

--------------------------------

### Show help with --help

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/create-block/README.md

Outputs usage information for the create-block package.

```bash
$ npx @wordpress/create-block@latest --help
```

--------------------------------

### shortcutAriaLabel usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/keycodes/README.md

Shows how to use shortcutAriaLabel.primary to get an aria label for a shortcut on macOS.

```javascript
// Assuming macOS:
shortcutAriaLabel.primary( '.' );
// "Command + Period"
```

--------------------------------

### rawShortcut usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/keycodes/README.md

Shows how to use rawShortcut.primary to get a raw shortcut string on macOS.

```javascript
// Assuming macOS:
rawShortcut.primary( 'm' );
// "meta+m"
```

--------------------------------

### Example entry point and generated asset file

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/dependency-extraction-webpack-plugin/README.md

Shows an entry point importing from @wordpress/interactivity and the corresponding asset file generated by webpack, declaring script module dependencies and a version hash.

```text
// Entry `entrypoint`
import { store, getContext } from '@wordpress/interactivity';

// Webpack will produce a JavaScript output file, for example output/entrypoint.js
/* bundled JavaScript output */

// Webpack will also produce a matching asset file, for example
// output/entrypoint.asset.php, declaring script module dependencies
<?php return array('dependencies' => array('@wordpress/interactivity'), 'version' => 'dd4c2dc50d046ed9d4c063a7ca95702f');
```

--------------------------------

### setIsInstalling

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/block-directory/README.md

Returns an action object used to indicate install in progress.

```APIDOC
## setIsInstalling

### Description
Returns an action object used to indicate install in progress.

### Parameters
- **blockId** (string) - Required - 
- **isInstalling** (boolean) - Required - 

### Returns
- **Object** - Action object.
```

--------------------------------

### displayShortcut usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/keycodes/README.md

Shows how to use displayShortcut.primary to get a display string for a shortcut on macOS.

```javascript
// Assuming macOS:
displayShortcut.primary( 'm' );
// "⌘M"
```

--------------------------------

### Start the local environment

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md

Navigate to the project directory and start the wp-env environment.

```sh
$ cd ~/gutenberg
```

```sh
$ wp-env start
```

--------------------------------

### unlockWidgetSaving usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/reference-guides/data/data-core-edit-widgets.md

Example component that uses the unlockWidgetSaving action from the edit-widgets store to unlock widget saving. It uses useDispatch to get the action and calls it with a lock name when the button is clicked.

```jsx
import { store as widgetStore } from '@wordpress/edit-widgets';
import { useDispatch } from '@wordpress/data';

const ExampleComponent = () => {
	const { unlockWidgetSaving } = useDispatch( widgetStore );
	return (
		<Button onClick={ () => unlockWidgetSaving( 'lockName' ) }>
			{ __( 'Unlock Widget Saving' ) }
		</Button>
	);
};
```

--------------------------------

### lockWidgetSaving usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/reference-guides/data/data-core-edit-widgets.md

Example component that uses the lockWidgetSaving action from the edit-widgets store to lock widget saving. It uses useDispatch to get the action and calls it with a lock name when the button is clicked.

```jsx
import { store as widgetStore } from '@wordpress/edit-widgets';
import { useDispatch } from '@wordpress/data';

const ExampleComponent = () => {
	const { lockWidgetSaving } = useDispatch( widgetStore );
	return (
		<Button onClick={ () => lockWidgetSaving( 'lockName' ) }>
			{ __( 'Lock Widget Saving' ) }
		</Button>
	);
};
```

--------------------------------

### Example: Create record block with npm init

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-context.md

Commands to initialize a new block using the @wordpress/create-block package. This is the first step of the example workflow.

```bash
npm init @wordpress/block --namespace my-plugin record
cd record
```

--------------------------------

### displayShortcutList usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/keycodes/README.md

Shows how to use displayShortcutList.primary to get an array of display parts for a shortcut on macOS.

```javascript
// Assuming macOS:
displayShortcutList.primary( 'm' );
// [ "⌘", "M" ]
```

--------------------------------

### Install @wordpress/boot with npm

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/boot/README.md

Install the package using npm.

```bash
npm install @wordpress/boot --save
```

--------------------------------

### Example of entrypoint with generated asset file

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/dependency-extraction-webpack-plugin/README.md

Shows the source entrypoint and the resulting asset file that declares dependencies and version. The asset file is generated by the plugin and contains a PHP array with dependencies and version hash.

```javascript
// Entry `entrypoint`
import { Component } from 'react';

// Webpack will produce a JavaScript output file, for example output/entrypoint.js
/* bundled JavaScript output */

// Webpack will also produce a matching asset file, for example
// output/entrypoint.asset.php, declaring script dependencies
<?php return array('dependencies' => array('react'), 'version' => 'dd4c2dc50d046ed9d4c063a7ca95702f');
```

--------------------------------

### getActiveFormat

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/rich-text/README.md

Gets the format object by type at the start of the selection. This can be used to get e.g. the URL of a link format at the current selection, but also to check if a format is active at the selection. Returns undefined if there is no format at the selection.

```APIDOC
## getActiveFormat

### Description
Gets the format object by type at the start of the selection. This can be used to get e.g. the URL of a link format at the current selection, but also to check if a format is active at the selection. Returns undefined if there is no format at the selection.

### Parameters
- **value** (`RichTextValue`) - Required - Value to inspect.
- **formatType** (`string`) - Required - Format type to look for.

### Returns
- `RichTextFormat|undefined`: Active format object of the specified type, or undefined.
```

--------------------------------

### Create a block with quick start options

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/getting-started/devenv/get-started-with-create-block.md

Creates a block named 'my-block' with namespace 'my-plugin' as a Dynamic block using quick start mode, bypassing interactive prompts.

```bash
npx @wordpress/create-block@latest --namespace="my-plugin" --slug="my-block" --variant="dynamic"
```

--------------------------------

### Start wp-env with Playground runtime

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md

Use the --runtime=playground flag to start the environment using WebAssembly instead of Docker.

```sh
$ wp-env start --runtime=playground
```

--------------------------------

### keyboardShortcut usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/keycodes/README.md

Shows how to use keyboardShortcut.primaryShift to get display, aria, and label values for a shortcut on macOS.

```javascript
// Assuming macOS:
keyboardShortcut.primaryShift( 'm' );
// {
//   displayShortcut: "⇧⌘M",
//   ariaKeyShortcut: "Shift+Meta+M",
//   label: "Shift Command M",
// }
```

--------------------------------

### Date field format configuration

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/dataviews/README.md

Example configuration for a date field, specifying the date format and the start day of the week.

```js
{
	id: 'publishDate',
	type: 'date',
	label: 'Publish Date',
	format: {
		date: 'F j, Y',
		weekStartsOn: 1,
	},
}
```

--------------------------------

### Install with npm

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/dom-ready/README.md

Install the @wordpress/dom-ready module.

```bash
npm install @wordpress/dom-ready --save
```

--------------------------------

### Asset.php file example

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/reference-guides/block-api/block-metadata.md

Example of the index.asset.php file that defines dependencies and version for the script.

```php
<?php
return array(
	'dependencies' => array(
		'react',
		'wp-blocks',
		'wp-i18n',
	),
	'version'      => '3be55b05081a63d8f9d0ecb466c42cfd',
);
```

--------------------------------

### Datetime field format configuration

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/dataviews/README.md

Example configuration for a datetime field, specifying the date format and the start day of the week.

```js
{
	id: 'createdAt',
	type: 'datetime',
	label: 'Created At',
	format: {
		datetime: 'M j, Y g:i a',
		weekStartsOn: 1,
	},
}
```

--------------------------------

### Install dependencies and Playwright

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/testing-overview.md

Run these commands from the repository root to prepare the environment for testing.

```sh
npm ci
npm run build
npm exec --no --workspace @wordpress/unit-tests -- playwright install chromium
```

--------------------------------

### Destroy and recreate environment

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md

Remove all containers and volumes to start from scratch. Warning: This permanently deletes all content in the local WordPress installation.

```sh
$ wp-env destroy
# This new instance is a fresh start with no existing data:
$ wp-env start
```

--------------------------------

### Instantiate a Block Editor

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/block-editor/README.md

Example of setting up a basic block editor using BlockEditorProvider and BlockCanvas. Ensure the necessary stylesheets are imported for proper rendering.

```javascript
import { useState } from 'react';
import {
	BlockCanvas,
	BlockEditorProvider,
	BlockList,
} from '@wordpress/block-editor';

function MyEditorComponent() {
	const [ blocks, updateBlocks ] = useState( [] );

	return (
		<BlockEditorProvider
			value={ blocks }
			onInput={ ( blocks ) => updateBlocks( blocks ) }
			onChange={ ( blocks ) => updateBlocks( blocks ) }
		>
			<BlockCanvas height="400px" />
		</BlockEditorProvider>
	);
}

// Make sure to load the block editor stylesheets too
// import '@wordpress/components/build-style/style.css';
// import '@wordpress/block-editor/build-style/style.css';
```

--------------------------------

### ariaKeyShortcut usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/keycodes/README.md

Shows how to use ariaKeyShortcut functions to get aria-keyshortcuts strings for macOS and Windows. Comments show expected outputs.

```javascript
// Assuming macOS:
ariaKeyShortcut.primary( 'm' );
// "Meta+M"

ariaKeyShortcut.primaryAlt( 'm' );
// "Meta+Alt+M"

// Assuming Windows:
ariaKeyShortcut.primary( 'm' );
// "Control+M"

ariaKeyShortcut.primaryAlt( 'm' );
// "Control+Alt+M"

ariaKeyShortcut.primaryShift( 'del' );
// "Control+Shift+Delete"
```

--------------------------------

### Guide Component

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/components/src/guide/README.md

The Guide component renders a modal-based user guide with multiple pages. It accepts props for customization and callbacks.

```APIDOC
## Guide Component

### Description
The Guide component renders a user guide in a modal, allowing users to step through pages. It accepts props for customization and callbacks.

### Props

#### className
- Type: `string`
- Required: No
- Description: A custom class to add to the modal.

#### contentLabel
- Type: `string`
- Required: Yes
- Description: This property is used as the modal's accessibility label. It is required for accessibility reasons.

#### finishButtonText
- Type: `string`
- Required: No
- Default: `'Finish'`
- Description: Use this to customize the label of the _Finish_ button shown at the end of the guide.

#### nextButtonText
- Type: `string`
- Required: No
- Default: `'Next'`
- Description: Use this to customize the label of the _Next_ button shown on each page of the guide.

#### previousButtonText
- Type: `string`
- Required: No
- Default: `'Previous'`
- Description: Use this to customize the label of the _Previous_ button shown on each page of the guide except the first.

#### onFinish
- Type: `( event?: KeyboardEvent< HTMLDivElement > | SyntheticEvent ) => void`
- Required: Yes
- Description: A function which is called when the guide is finished. The guide is finished when the modal is closed or when the user clicks _Finish_ on the last page of the guide.

#### pages
- Type: `{ content: ReactNode; image?: ReactNode; }[]`
- Required: No
- Default: `[]`
- Description: A list of objects describing each page in the guide. Each object **must** contain a `'content'` property and may optionally contain an `'image'` property.

### Usage Example
```jsx
function MyTutorial() {
	const [ isOpen, setIsOpen ] = useState( true );

	if ( ! isOpen ) {
		return null;
	}

	return (
		<Guide
			onFinish={ () => setIsOpen( false ) }
			pages={ [
				{
					content: <p>Welcome to the ACME Store!</p>,
				},
				{
					image: <img src="https://acmestore.com/add-to-cart.png" />,
					content: (
						<p>
							Click <i>Add to Cart</i> to buy a product.
						</p>
					),
				},
			] }
		/>
	);
}
```
```

--------------------------------

### Warning when no .wp-env.json found

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/getting-started/devenv/get-started-with-wp-env.md

Warning displayed when running wp-env start from a directory that is not a plugin, theme, or WordPress installation. Ignore if a generic environment is intended.

```text
!! Warning: could not find a .wp-env.json configuration file and could not determine if 'DIR' is a WordPress installation, a plugin, or a theme.
```

--------------------------------

### Import SVG as URL and React component

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/scripts/README.md

Import an SVG file to get a URL and a React component. The example shows using both in a React component.

```js
import starUrl, { ReactComponent as Star } from './star.svg';

const App = () => (
	<div>
		<img src={ starUrl } alt="star" />
		<Star />
	</div>
);
```

--------------------------------

### Navigator usage example

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/components/src/navigator/README.md

Shows how to use Navigator with initialPath, Navigator.Screen, Navigator.Button, and Navigator.BackButton to create a simple navigation flow between home and child screens.

```jsx
import { Navigator } from '@wordpress/components';

const MyNavigation = () => (
	<Navigator initialPath="/">
		<Navigator.Screen path="/">
			<p>This is the home screen.</p>
			<Navigator.Button path="/child">
				Navigate to child screen.
			</Navigator.Button>
		</Navigator.Screen>
		<Navigator.Screen path="/child">
			<p>This is the child screen.</p>
			<Navigator.BackButton>Go back</Navigator.BackButton>
		</Navigator.Screen>
	</Navigator>
);
```

--------------------------------

### List of create-block options

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/create-block/README.md

Shows all available command-line options for create-block, including version, template, variant, plugin, target directory, namespace, title, description, category, wp-scripts, wp-env, textdomain, and help.

```bash
-V, --version                output the version number
-t, --template <name>        project template type name; allowed values: "standard" (default), "es5", the name of an external npm package, or the path to a local directory
--variant                    choose a block variant as defined by the template
--no-plugin                  scaffold block files only
--target-dir <directory>     the directory where the files will be scaffolded, defaults to the slug
--namespace <value>          internal namespace for the block name
--title <value>              display title for the block and the WordPress plugin
--short-description <value>  short description for the block and the WordPress plugin
--category <name>            category name for the block
--wp-scripts                 enable integration with `@wordpress/scripts` package
--no-wp-scripts              disable integration with `@wordpress/scripts` package
--wp-env                     enable integration with `@wordpress/env` package
--textdomain <value>         text domain for internationalization
-h, --help                   output usage information
```

--------------------------------

### rawShortcut

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/keycodes/README.md

An object containing functions to get raw shortcuts, intended for use with the KeyboardShortcuts component. For example, on macOS, rawShortcut.primary('m') returns 'meta+m'.

```APIDOC
## rawShortcut

### Description
An object that contains functions to get raw shortcuts.

These are intended for use with the KeyboardShortcuts.

### Usage

```js
// Assuming macOS:
rawShortcut.primary( 'm' );
// "meta+m"
```
```

--------------------------------

### Correct: @use './components/example/style.scss' as *

Source: https://github.com/wordpress/gutenberg/blob/trunk/packages/eslint-plugin/docs/rules/no-non-module-stylesheet-imports.md

Uses a package stylesheet entry point via SCSS @use, ensuring inclusion in the stylesheet bundle.

```scss
@use './components/example/style.scss' as *;
```

--------------------------------

### getCategoryShortcuts selector usage

Source: https://github.com/wordpress/gutenberg/blob/trunk/docs/reference-guides/data/data-core-keyboard-shortcuts.md

Retrieves the list of shortcut names for a given category. This example gets shortcuts for the 'block' category and renders them as list items.

```javascript
import { store as keyboardShortcutsStore } from '@wordpress/keyboard-shortcuts';
import { useSelect } from '@wordpress/data';

const ExampleComponent = () => {
	const categoryShortcuts = useSelect(
		( select ) =>
			select( keyboardShortcutsStore ).getCategoryShortcuts( 'block' ),
		[]
	);

	return (
		categoryShortcuts.length > 0 && (
			<ul>
				{ categoryShortcuts.map( ( categoryShortcut ) => (
					<li key={ categoryShortcut }>{ categoryShortcut }</li>
				) ) }
			</ul>
		)
	);
};
```
Tokens:
Raw