========================
CODE SNIPPETS
========================
TITLE: Install Project Dependencies
DESCRIPTION: Installs necessary project dependencies using Node.js version manager (nvm) and npm. This includes installing the correct Node.js version, installing all project dependencies via `npm ci`, and running a pre-iOS setup script.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_1

LANGUAGE: sh
CODE:
```
nvm install
npm ci
npm run native preios
```

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

TITLE: Install Project Dependencies
DESCRIPTION: Installs all necessary Node.js dependencies for the project using npm, ensuring the development environment is correctly set up.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_10

LANGUAGE: npm
CODE:
```
npm ci
```

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

TITLE: Install @wordpress/scripts
DESCRIPTION: Installs the @wordpress/scripts package as a development dependency using npm. Ensure Node.js and npm are installed and a package.json file exists in your project.

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

LANGUAGE: bash
CODE:
```
npm install @wordpress/scripts --save-dev
```

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

TITLE: Install Dependencies and Build Gutenberg
DESCRIPTION: Installs project dependencies using npm and initiates a development build process. `npm run dev` is recommended for continuous builds during development, while `npm run build` creates an optimized production build.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_1

LANGUAGE: bash
CODE:
```
npm install
npm run dev
```

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

TITLE: Start Local WordPress Environment with wp-env
DESCRIPTION: Utilize `wp-env` to start a local WordPress development environment, including your new block plugin. This requires Docker to be installed and running. Access the environment at `http://localhost:8888`.

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

LANGUAGE: sh
CODE:
```
npx wp-env start
```

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

TITLE: Install and Build Project
DESCRIPTION: Installs project dependencies and builds the project using npm commands.

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

LANGUAGE: shell
CODE:
```
npm install
npm run build
```

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

TITLE: Guide Component Usage Example
DESCRIPTION: Demonstrates how to use the Guide React component, including setting up state and passing page content.

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

LANGUAGE: jsx
CODE:
```
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>
					),
				}
			] }
		/>
	);
}
```

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

TITLE: Clone and Setup Gutenberg Repository
DESCRIPTION: Clones the Gutenberg repository from your GitHub fork and adds the official WordPress repository as an upstream remote. This setup is crucial for managing contributions and staying updated with the main project.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_0

LANGUAGE: bash
CODE:
```
git clone https://github.com/YOUR_GITHUB_USERNAME/gutenberg.git
cd gutenberg
git remote add upstream https://github.com/WordPress/gutenberg.git
```

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

TITLE: Install Project Dependencies
DESCRIPTION: Installs project dependencies using npm ci, which is optimized for continuous integration environments and ensures reproducible builds by installing from a lock file.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_2

LANGUAGE: sh
CODE:
```
npm ci
```

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

TITLE: Scaffold Block with Options (Bash)
DESCRIPTION: Creates a block plugin using specific command-line options for a streamlined setup. This example scaffolds a dynamic block named 'my-block' with the namespace 'my-plugin'.

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

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

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

TITLE: Start WordPress Block Development Server
DESCRIPTION: Navigate into the newly created plugin directory and start the development server using `npm start`. This command, provided by `wp-scripts`, watches for code changes and rebuilds the block automatically.

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

LANGUAGE: sh
CODE:
```
cd copyright-date-block && npm start
```

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

TITLE: Start Metro Bundler and Run iOS App
DESCRIPTION: Starts the Metro bundler for React Native and then launches the application on an iOS simulator. Requires the Metro bundler to be running in a separate terminal.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_7

LANGUAGE: sh
CODE:
```
npm run native start:reset # Starts metro

# In another terminal:
npm run native ios
```

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

TITLE: Start WordPress Block Development Server with npm start
DESCRIPTION: Navigates into the newly created block plugin directory and starts a development server. This command uses `wp-scripts` to watch for code changes and rebuild the block automatically.

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

LANGUAGE: shell
CODE:
```
cd my-first-interactive-block && npm start
```

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

TITLE: Install and Scaffold a Block Plugin (Bash)
DESCRIPTION: Scaffolds a new WordPress block plugin named 'todo-list' using npx and navigates into the created directory. This is the initial step for creating a new block project.

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

LANGUAGE: bash
CODE:
```
npx @wordpress/create-block@latest todo-list
cd todo-list
```

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

TITLE: Launch WordPress Site with wp-now
DESCRIPTION: Launches a local WordPress site using `wp-now` from within the plugin's directory. This allows you to test the interactive block in a running WordPress environment without a pre-existing local setup.

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

LANGUAGE: shell
CODE:
```
npx @wp-now/wp-now start
```

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

TITLE: Start Development Server
DESCRIPTION: Starts the development server, which includes a watcher that automatically rebuilds the project whenever files are saved. This command requires dependencies to be installed first.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/how-to-guides/data-basics/1-data-basics-setup.md#_snippet_5

LANGUAGE: shell
CODE:
```
npm start
```

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

TITLE: Quick Start: Install and Start wp-env
DESCRIPTION: Installs the @wordpress/env package globally and starts a local WordPress environment. The environment will be accessible at http://localhost:8888.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_0

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

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

TITLE: Install ffi and Run Pod Install on M1 Macs
DESCRIPTION: Installs the `ffi` gem with Rosetta emulation and then runs `pod install` using Rosetta. This is a workaround for Mac M1 compatibility issues with CocoaPods.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_5

LANGUAGE: sh
CODE:
```
sudo arch -x86_64 gem install ffi
arch -x86_64 pod install
```

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

TITLE: Run End-to-End Tests
DESCRIPTION: Executes end-to-end tests for the Gutenberg project, specifying the base URL for the local WordPress installation. This command is used when running Gutenberg outside of the wp-env Docker setup, for example, with Local or MAMP.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_6

LANGUAGE: bash
CODE:
```
WP_BASE_URL=http://localhost:8888/gutenberg/ npm run test:e2e
```

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

TITLE: Install wp-env Globally
DESCRIPTION: Installs the @wordpress/env package globally using npm. This makes the `wp-env` command available system-wide for managing local WordPress environments.

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

LANGUAGE: sh
CODE:
```
npm -g install @wordpress/env
```

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

TITLE: Scaffold Block with Interactive Mode (Bash)
DESCRIPTION: Initiates the @wordpress/create-block process in interactive mode. This command prompts the user step-by-step to configure the new block plugin, suitable for guided setup.

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

LANGUAGE: bash
CODE:
```
npx @wordpress/create-block@latest
```

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

TITLE: Scaffold Interactive WordPress Block using create-block
DESCRIPTION: Scaffolds a new WordPress plugin for an interactive block using the `@wordpress/create-block` package and a specific template. This command requires Node.js and npm to be installed.

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

LANGUAGE: shell
CODE:
```
npx @wordpress/create-block@latest my-first-interactive-block --template @wordpress/create-block-interactive-template
```

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

TITLE: Install Project Dependencies
DESCRIPTION: Installs all necessary project dependencies defined in the package.json file. This command should be run from the plugin directory.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/how-to-guides/data-basics/1-data-basics-setup.md#_snippet_4

LANGUAGE: shell
CODE:
```
npm install
```

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

TITLE: WordPress Block Development Workflow
DESCRIPTION: This snippet outlines the typical workflow for developing WordPress blocks. It involves scaffolding, starting a development server for live updates, and building for production.

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

LANGUAGE: javascript
CODE:
```
// 1. Scaffold the block plugin
npx @wordpress/create-block my-block-plugin --template @wordpress/create-block-tutorial-template

// 2. Navigate into the plugin directory
cd my-block-plugin

// 3. Start the development server (watches for changes)
npm start

// 4. Build for production when done
npm run build
```

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

TITLE: Launch Storybook Development Server
DESCRIPTION: Starts the Storybook development server locally, allowing for isolated development and testing of UI components. The server typically opens automatically in a browser.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_13

LANGUAGE: npm
CODE:
```
npm run storybook:dev
```

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

TITLE: Define Scripts in package.json
DESCRIPTION: Configures npm scripts to leverage wp-scripts for common development tasks. The 'start' script typically runs a development server, while 'build' compiles and bundles assets for production.

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

LANGUAGE: json
CODE:
```
{
    "scripts": {
        "start": "wp-scripts start",
        "build": "wp-scripts build"
    }
}
```

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

TITLE: Run Gutenberg Demo App on Android
DESCRIPTION: Commands to start the Metro bundler and launch the Gutenberg demo application on an Android emulator or device. The first command resets the Metro bundler cache, and the second command initiates the build and deployment process for the Android application.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_10

LANGUAGE: sh
CODE:
```
npm run native start:reset
```

LANGUAGE: sh
CODE:
```
npm run native android
```

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

TITLE: Install Azul Zulu JDK 11 with Homebrew
DESCRIPTION: Installs Azul Zulu JDK version 11 using Homebrew, a package manager for macOS. This JDK version is recommended for React Native development.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_8

LANGUAGE: sh
CODE:
```
brew tap homebrew/cask-versions
brew install --cask zulu11
```

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

TITLE: Development and Build Commands (Bash)
DESCRIPTION: Illustrates the primary npm scripts for managing a block project. 'npm run start' initiates a development server with hot-reloading, while 'npm run build' creates optimized production-ready code.

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

LANGUAGE: bash
CODE:
```
npm run start
npm run build
```

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

TITLE: Install CocoaPods with System Ruby
DESCRIPTION: Installs the CocoaPods dependency manager using Ruby's gem command. Requires `sudo` if using the system's default Ruby installation.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_4

LANGUAGE: ruby
CODE:
```
sudo gem install cocoapods
```

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

TITLE: Start Local WordPress Environment
DESCRIPTION: Starts the local WordPress environment using Docker. It automatically mounts the current directory as a plugin or theme if detected, or creates a generic environment. Access the site at http://localhost:8888.

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

LANGUAGE: sh
CODE:
```
wp-env start
```

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

TITLE: Install and Use Node.js LTS with nvm
DESCRIPTION: Installs the latest Long Term Support (LTS) version of Node.js and sets it as the default for the current project. Requires Node Version Manager (nvm) to be installed.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_1

LANGUAGE: sh
CODE:
```
nvm install 'lts/*'
nvm alias default 'lts/*'
nvm use
```

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

TITLE: Build Plugin Zip Archive
DESCRIPTION: Creates a zip archive of the Gutenberg plugin, which can be directly installed via the WordPress admin interface. Requires bash and php.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_12

LANGUAGE: bash
CODE:
```
npm run build:plugin-zip
```

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

TITLE: Start Local WordPress Environment
DESCRIPTION: Starts a local WordPress development environment using Docker and the wp-env package. This command maps your local Gutenberg plugin code into the Docker container, allowing for immediate reflection of code changes.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_2

LANGUAGE: bash
CODE:
```
npm run wp-env start
```

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

TITLE: Start wp-env with Project Configuration
DESCRIPTION: Used in projects, like Gutenberg, that include specific wp-env configurations. This command executes the `wp-env start` command via an npm script, respecting project-specific settings.

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

LANGUAGE: sh
CODE:
```
npm run wp-env start
```

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

TITLE: Setup and Run Performance Tests
DESCRIPTION: Commands to set up the e2e testing environment, build packages, and run performance tests. This includes installing dependencies, building necessary packages, and executing the performance test suite. It also covers comparing performance metrics across different branches or tags.

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

LANGUAGE: bash
CODE:
```
nvm use && npm install
npm run build:packages

```

LANGUAGE: bash
CODE:
```
npm run test:performance

```

LANGUAGE: bash
CODE:
```
./bin/plugin/cli.js perf trunk v8.1.0 v8.0.0

```

LANGUAGE: bash
CODE:
```
./bin/plugin/cli.js perf trunk v8.1.0 v8.0.0 --tests-branch add/perf-tests-coverage

```

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

TITLE: Run iOS App
DESCRIPTION: Compiles and runs the iOS application on the default simulator. This command requires Xcode and CocoaPods to be installed and configured.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_4

LANGUAGE: sh
CODE:
```
npm run native ios
```

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

TITLE: Customize Demo Editor Initial State
DESCRIPTION: Demonstrates how to customize the initial HTML content of the demo editor by leveraging the `native.block_editor_props` filter in a local setup file. This allows developers to focus on specific blocks or features.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_6

LANGUAGE: javascript
CODE:
```
/**
 * WordPress dependencies
 */
import { addFilter } from '@wordpress/hooks';

export default () => {
	addFilter(
		'native.block_editor_props',
		'core/react-native-editor',
		( props ) => {
			return {
				...props,
				initialHtml,
			};
		}
	);
};

const initialHtml = `
<!-- wp:heading -->
<h2 class="wp-block-heading">Just a Heading</h2>
<!-- /wp:heading -->
`;
```

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

TITLE: Start Local Development Server
DESCRIPTION: Starts a local development server for live preview. Changes are reflected automatically without needing to restart the server.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/platform-docs/README.md#_snippet_1

LANGUAGE: bash
CODE:
```
$ npm run start
```

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

TITLE: Start Metro Bundler
DESCRIPTION: Starts the Metro bundler, which is essential for serving the JavaScript code to the React Native application during development. This command should be run before attempting to launch the app.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_2

LANGUAGE: sh
CODE:
```
npm run native start:reset
```

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

TITLE: wp-scripts: Development and Build Commands
DESCRIPTION: Illustrates the primary commands for managing the build process of WordPress Gutenberg blocks using `wp-scripts`. `npm run start` initiates a development server with live reloading, while `npm run build` creates optimized, production-ready code.

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

LANGUAGE: bash
CODE:
```
npm run start
npm run build
```

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

TITLE: Clone Gutenberg Repository
DESCRIPTION: Clones the Gutenberg project repository from GitHub using Git. This is the first step to obtain the project files for development.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_0

LANGUAGE: sh
CODE:
```
git clone git@github.com:WordPress/gutenberg.git
```

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

TITLE: Scaffold WordPress Block Plugin
DESCRIPTION: Use the `@wordpress/create-block` package with a tutorial template to quickly scaffold a new WordPress block plugin. This command sets up the necessary files and configurations for block development.

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

LANGUAGE: sh
CODE:
```
npx @wordpress/create-block copyright-date-block --template @wordpress/create-block-tutorial-template
```

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

TITLE: Setup Core Blocks with Jest
DESCRIPTION: Demonstrates a common Jest setup pattern using `beforeAll` to register all core Gutenberg blocks before tests begin. This ensures core block functionality is available for integration tests.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/integration-test-guide.md#_snippet_0

LANGUAGE: javascript
CODE:
```
beforeAll( () => {
	// Register all core blocks
	registerCoreBlocks();
} );
```

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

TITLE: Build WordPress Block for Production with npm run build
DESCRIPTION: Optimizes the block code for production deployment. This command bundles and minifies assets, making the block ready for a live WordPress environment.

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

LANGUAGE: shell
CODE:
```
npm run build
```

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

TITLE: Troubleshoot Docker Daemon Connection Error on Ubuntu
DESCRIPTION: Guides users through resolving the 'Couldn't connect to Docker daemon' error on Ubuntu. It includes checking the Docker service status and restarting it.

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

LANGUAGE: shell
CODE:
```
ps -ef | grep docker
sudo systemctl start docker.service
```

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

TITLE: Build Project Assets
DESCRIPTION: Compiles and bundles project assets, such as JavaScript and CSS, for development or production use.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_11

LANGUAGE: npm
CODE:
```
npm run build
```

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

TITLE: Build WordPress Block for Production
DESCRIPTION: When development is complete, use `npm run build` to optimize the block code for production. This command bundles and minifies assets, making the plugin ready for deployment.

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

LANGUAGE: sh
CODE:
```
npm run build
```

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

TITLE: Clone Gutenberg Project
DESCRIPTION: Clones the Gutenberg project repository from GitHub using Git. This is the initial step to obtain the project's source code.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_0

LANGUAGE: sh
CODE:
```
git clone https://github.com/WordPress/gutenberg.git
```

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

TITLE: Default package.json Scripts (JSON)
DESCRIPTION: Shows the default scripts added to the package.json file by @wordpress/create-block. These scripts leverage wp-scripts for common development tasks like building, formatting, linting, and starting a development server.

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

LANGUAGE: json
CODE:
```
{
    "scripts": {
		"build": "wp-scripts build",
		"format": "wp-scripts format",
		"lint:css": "wp-scripts lint-style",
		"lint:js": "wp-scripts lint-js",
		"packages-update": "wp-scripts packages-update",
		"plugin-zip": "wp-scripts plugin-zip",
		"start": "wp-scripts start"
	}
}
```

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

TITLE: Example .htaccess for PHP Settings
DESCRIPTION: Provides an example of an '.htaccess' file content that can be used to set advanced PHP configurations like 'post_max_size', 'upload_max_filesize', and 'memory_limit'.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_42

LANGUAGE: apache
CODE:
```
# Note: the default upload value is 1G.
php_value post_max_size 2G
php_value upload_max_filesize 2G
php_value memory_limit 2G
```

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

TITLE: Run Native Unit Tests with npm
DESCRIPTION: Executes the native unit test suite using the npm script 'test:native'. This command leverages Jest for running tests on the desktop against Node.js.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_7

LANGUAGE: sh
CODE:
```
npm run test:native
```

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

TITLE: Install Dependencies
DESCRIPTION: Installs project dependencies using npm. This command downloads and sets up all the necessary packages required for the project to run.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/platform-docs/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
$ npm install
```

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

TITLE: Create Block with Template
DESCRIPTION: Demonstrates how to create a new WordPress block using a custom template with the `@wordpress/create-block` package. This command requires pre-configured templates to be available.

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

LANGUAGE: bash
CODE:
```
npx @wordpress/create-block --template="my-custom-template"
```

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

TITLE: Complete Testing Environment Setup
DESCRIPTION: Example configuration for a comprehensive testing environment, specifying WordPress core version, multiple plugins, and themes for integration testing.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_30

LANGUAGE: json
CODE:
```
{
	"core": "WordPress/WordPress#5.2.0",
	"plugins": [ "WordPress/wp-lazy-loading", "WordPress/classic-editor" ],
	"themes": [ "WordPress/theme-experiments" ]
}
```

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

TITLE: Run Native Unit Tests with Debugger
DESCRIPTION: Starts the native unit test suite with debugger support enabled via the npm script 'test:native:debug'. After execution, attach a debugger via `chrome://inspect` in Chrome.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_8

LANGUAGE: sh
CODE:
```
npm run test:native:debug
```

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

TITLE: wp-env Configuration File
DESCRIPTION: The `.wp-env.json` file allows for custom configurations of the local WordPress environment. It can be used to set up environments that work with multiple plugins and/or themes.

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

LANGUAGE: json
CODE:
```
{
  "port": 8889,
  "themes": [
    "my-theme"
  ],
  "plugins": [
    "my-plugin"
  ]
}
```

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

TITLE: Clean and Reinstall Dependencies
DESCRIPTION: Cleans the existing `node_modules` directory and reinstalls dependencies. This is recommended for existing checkouts to avoid potential errors.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_3

LANGUAGE: sh
CODE:
```
npm run distclean
npm ci
```

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

TITLE: Check Integration Test Dependencies with Appium Doctor
DESCRIPTION: Runs the Appium Doctor tool to diagnose and verify the installation and configuration of dependencies required for Appium-based integration tests. It checks for necessary software like Node.js, npm, and platform-specific SDKs.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_12

LANGUAGE: sh
CODE:
```
npx appium-doctor
```

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

TITLE: Run All Local Integration Tests
DESCRIPTION: Executes all local integration tests for either iOS or Android environments. Ensure the relevant simulator/device is running and no Metro processes are active before execution.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_13

LANGUAGE: sh
CODE:
```
npm run native test:e2e:ios:local
```

LANGUAGE: sh
CODE:
```
npm run native test:e2e:android:local
```

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

TITLE: PHP Linting Setup and Execution
DESCRIPTION: Instructions for setting up and using PHP_CodeSniffer with WordPress Coding Standards for PHP code quality checks. Includes commands for installation and running the linter.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/coding-guidelines.md#_snippet_34

LANGUAGE: bash
CODE:
```
npm run lint:php
```

LANGUAGE: bash
CODE:
```
composer install
```

LANGUAGE: bash
CODE:
```
composer lint
```

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

TITLE: Enable Symlinks in Apache
DESCRIPTION: Adds a directive to the .htaccess file to allow Apache to follow symbolic links, which is necessary when linking development directories like plugins or themes.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_8

LANGUAGE: .htaccess
CODE:
```
Options +SymLinksIfOwnerMatch
```

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

TITLE: Install Block Tutorial Template
DESCRIPTION: Command to create a new WordPress block using the tutorial template. This command utilizes `@wordpress/create-block` to set up an example 'Copyright Date' block, commonly used in WordPress block development tutorials. It's recommended to use default options when prompted.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/create-block-tutorial-template/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npx @wordpress/create-block --template @wordpress/create-block-tutorial-template
```

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

TITLE: Menu Component Usage Example
DESCRIPTION: Illustrates the import statement for the Menu component and its associated stories, typically used in a Storybook setup.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/components/src/menu/stories/best-practices.mdx#_snippet_1

LANGUAGE: JavaScript
CODE:
```
import { Meta } from '@storybook/blocks';

import * as MenuStories from './index.story';
```

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

TITLE: Start Local WordPress Environment
DESCRIPTION: Starts the local WordPress development environment after ensuring Docker is running. Navigate to the project directory first.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_6

LANGUAGE: sh
CODE:
```
cd ~/gutenberg
wp-env start
```

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

TITLE: Start Storybook Development Server
DESCRIPTION: Command to start the Storybook development server for the Gutenberg project. This enables interactive viewing and development of UI components in isolation. Execute this command from the top-level Gutenberg directory.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/storybook/stories/docs/introduction.mdx#_snippet_1

LANGUAGE: bash
CODE:
```
npm run storybook:dev
```

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

TITLE: Jest Setup and Teardown Methods
DESCRIPTION: Demonstrates how to use Jest's `beforeAll` and `afterAll` lifecycle hooks for one-time setup and teardown operations across all tests. These methods support asynchronous operations via Promises, allowing for complex setup tasks.

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

LANGUAGE: javascript
CODE:
```
// one-time setup for *all* tests
beforeAll( () =>
	ssomeAsyncAction().then( ( resp ) => {
		window.someGlobal = resp;
	} )
);

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

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

TITLE: Run Android App
DESCRIPTION: Compiles and runs the Android application on a connected device or emulator. This command assumes the Metro bundler is already running.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_3

LANGUAGE: sh
CODE:
```
npm run native android
```

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

TITLE: Run Gutenberg Native Unit Tests
DESCRIPTION: Executes the unit tests for the native (React Native) part of the Gutenberg project. This command is used to verify the correctness of individual components and functions within the native codebase.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_11

LANGUAGE: sh
CODE:
```
npm run test:native
```

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

TITLE: wp-scripts: Testing Scripts
DESCRIPTION: Provides npm scripts for running tests with `wp-scripts`, leveraging Jest for JavaScript testing. It includes commands for both end-to-end (E2E) tests and unit tests to ensure code functionality and reliability.

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

LANGUAGE: json
CODE:
```
{
    "scripts": {
        "test:e2e": "wp-scripts test-e2e",
        "test:unit": "wp-scripts test-unit-js"
    }
}
```

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

TITLE: Run React Native Doctor
DESCRIPTION: Executes the `react-native doctor` command to diagnose and identify missing dependencies or configuration issues in the React Native development environment.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_6

LANGUAGE: sh
CODE:
```
npx @react-native-community/cli doctor
```

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

TITLE: Install WordPress Components
DESCRIPTION: Installs the @wordpress/components package, which provides a set of reusable UI components for your project.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/how-to-guides/platform/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install --save @wordpress/components
```

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

TITLE: Install @wordpress/preferences-persistence
DESCRIPTION: Installs the @wordpress/preferences-persistence module using npm.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/preferences-persistence/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/preferences-persistence --save
```

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

TITLE: Jest Test File Conventions
DESCRIPTION: Guidelines for organizing test files within the project. Jest automatically loads test files located in directories named '__tests__' or files with the '.test.js' extension.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_9

LANGUAGE: javascript
CODE:
```
// Example test file structure:
// ProjectRoot/
//  |-- __tests__/
//  |    |-- component.test.js
//  |-- src/
//  |    |-- components/
//  |    |    |-- MyComponent.js
//  |    |    |-- MyComponent.test.js
```

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

TITLE: Configure WP-CLI Database Host
DESCRIPTION: Updates the DB_HOST constant in wp-config.php to specify the port for MySQL connections, resolving issues where WP-CLI cannot connect to the database due to non-default ports.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_9

LANGUAGE: php
CODE:
```
define( 'DB_HOST', '127.0.0.1:8889' )
```

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

TITLE: Run iOS App on Specific Simulator
DESCRIPTION: Compiles and runs the iOS application on a specific simulator device. The `-- -- --simulator="DEVICE_NAME"` syntax is used to pass the simulator option down to the React Native CLI.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/getting-started-react-native.md#_snippet_5

LANGUAGE: sh
CODE:
```
npm run native ios -- -- --simulator="DEVICE_NAME"
```

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

TITLE: Enqueue Editor Assets with wp-scripts
DESCRIPTION: Demonstrates how to enqueue JavaScript and CSS assets for the WordPress block editor using PHP. It utilizes the `build/index.asset.php` file generated by `wp-scripts` to manage dependencies and versioning.

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

LANGUAGE: php
CODE:
```
/**
 * Enqueue Editor assets.
 */
function example_project_enqueue_editor_assets() {
    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');

    wp_enqueue_script(
        'example-editor-scripts',
        plugins_url( 'build/index.js', __FILE__ ),
        $asset_file['dependencies'],
        $asset_file['version']
    );
}
add_action( 'enqueue_block_editor_assets', 'example_project_enqueue_editor_assets' );
```

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

TITLE: Configure Apache Listen Directive
DESCRIPTION: Modifies the Apache configuration to listen on a specific IP address, typically for local development environments like MAMP, to restrict incoming connections.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_7

LANGUAGE: apache
CODE:
```
Listen 127.0.0.1:8888
```

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

TITLE: Stop Local WordPress Environment
DESCRIPTION: Stops the currently running local WordPress development environment managed by wp-env.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_3

LANGUAGE: bash
CODE:
```
npm run wp-env stop
```

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

TITLE: Install @wordpress/dom-ready
DESCRIPTION: Installs the @wordpress/dom-ready package using npm for use in your project.

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

LANGUAGE: bash
CODE:
```
npm install @wordpress/dom-ready --save
```

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

TITLE: Multisite Support Configuration
DESCRIPTION: Demonstrates how to enable multisite support for the WordPress instance by setting the 'multisite' configuration to 'true'. This prepares the environment for multisite installations.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_38

LANGUAGE: json
CODE:
```
{
	"multisite": true,
	"plugins": [ "." ]
}
```

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

TITLE: Install Plugins and Themes
DESCRIPTION: Handles the installation of plugins and themes from the WordPress.org repository. Supports installation by slug and optional search terms for discoverability.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/e2e-test-utils/README.md#_snippet_37

LANGUAGE: APIDOC
CODE:
```
installPlugin(slug: string, searchTerm?: string): Promise<void>
  Description: Installs a plugin from the WP.org repository.
  Parameters:
    - slug (string): Plugin slug.
    - searchTerm (?string): If the plugin is not findable by its slug use an alternative term to search.
```

LANGUAGE: APIDOC
CODE:
```
installTheme(slug: string, settings?: { searchTerm?: string }): Promise<void>
  Description: Installs a theme from the WP.org repository.
  Parameters:
    - slug (string): Theme slug.
    - settings (?Object): Optional settings object.
      - searchTerm (?string): Search term to use if the theme is not findable by its slug.
```

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

TITLE: Install @wordpress/fields
DESCRIPTION: Installs the @wordpress/fields package using npm.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/fields/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/fields --save
```

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

TITLE: Get wp-env Install Path (sh)
DESCRIPTION: Retrieves the absolute path where all WordPress environment files are stored. This includes Docker configuration, WordPress core, PHPUnit files, and downloaded sources.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_24

LANGUAGE: sh
CODE:
```
wp-env install-path

Get the path where all of the environment files are stored. This includes the Docker files, WordPress, PHPUnit files, and any sources that were downloaded.

Example:

$ wp-env install-path

/home/user/.wp-env/63263e6506becb7b8613b02d42280a49
```

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

TITLE: Install @wordpress/sync
DESCRIPTION: Installs the @wordpress/sync module using npm.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/sync/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/sync --save
```

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

TITLE: Scaffold a WordPress Block Plugin
DESCRIPTION: Quick start commands to create a new WordPress block plugin using npx, navigate into the project directory, and start the development server.

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

LANGUAGE: bash
CODE:
```
npx @wordpress/create-block@latest todo-list
cd todo-list
npm start
```

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

TITLE: Guide Component API Documentation
DESCRIPTION: Details the available props for the Guide React component, including their types, requirements, and default values.

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

LANGUAGE: APIDOC
CODE:
```
Guide Component 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.
```

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

TITLE: Destroy Local WordPress Environment
DESCRIPTION: Completely destroys and removes the local WordPress Docker environment created by wp-env, including all associated containers and data.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_4

LANGUAGE: bash
CODE:
```
npm run wp-env destroy
```

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

TITLE: Troubleshoot Docker Host Port Conflicts with wp-env
DESCRIPTION: Addresses the 'Host is already in use by another container' error when starting wp-env. Provides commands to stop existing containers, including a method to stop all running Docker containers.

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

LANGUAGE: shell
CODE:
```
wp-env stop
docker stop $(docker ps -q)
```

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

TITLE: Install @wordpress/element
DESCRIPTION: Installs the @wordpress/element package using npm. This package requires an ES2015+ environment or a polyfill.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/element/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/element --save
```

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

TITLE: Manage wp-env Environment
DESCRIPTION: Provides commands to manage the local WordPress environment. `wp-env clean all` resets the database, `wp-env destroy` removes the environment, and `npm -g uninstall @wordpress/env` uninstalls the tool globally.

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

LANGUAGE: sh
CODE:
```
wp-env clean all
wp-env destroy
npm -g uninstall @wordpress/env
```

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

TITLE: wp-env CLI Commands
DESCRIPTION: Reference for managing the WordPress development environment using the `wp-env` command-line interface. Includes starting, stopping, and updating the environment, along with available options.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_19

LANGUAGE: APIDOC
CODE:
```
wp-env start

Starts WordPress for development on port 8888 (http://localhost:8888) and tests on port 8889 (http://localhost:8889). The current working directory must be a WordPress installation, a plugin, a theme, or contain a .wp-env.json file.

Options:
  --debug    Enable debug output. [boolean] [default: false]
  --update   Download source updates and apply WordPress configuration. [boolean] [default: false]
  --xdebug   Enables Xdebug. If not passed, Xdebug is turned off. If no modes are set, uses "debug". You may set multiple Xdebug modes by passing them in a comma-separated list: `--xdebug=develop,coverage`. See https://xdebug.org/docs/all_settings#mode for information about Xdebug modes. [string]
  --scripts  Execute any configured lifecycle scripts. [boolean] [default: true]

wp-env stop

Stops running WordPress for development and tests and frees the ports.

Options:
  --debug    Enable debug output. [boolean] [default: false]
```

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

TITLE: Install Node.js and npm/npx
DESCRIPTION: Node.js is a JavaScript runtime essential for modern WordPress block development. It includes npm (Node Package Manager) and npx (Node Package Execute) for managing packages and running scripts. The recommended version is Active LTS.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/getting-started/devenv/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
# Install Node.js (using a version manager like nvm is recommended)
# Example using nvm:
nvm install --lts
nvm use --lts

# Verify installation
node -v
npm -v
npx -v
```

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

TITLE: Install @wordpress/token-list
DESCRIPTION: Installs the @wordpress/token-list package using npm. This package assumes an ES2015+ environment.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/token-list/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/token-list
```

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

TITLE: Install Interactivity API Package
DESCRIPTION: Installs the @wordpress/interactivity package using npm. This is the first step to enable the Interactivity API in your project.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/reference-guides/interactivity-api/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/interactivity --save
```

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

TITLE: Run Specific Local Integration Test File
DESCRIPTION: Executes a specific integration test file for either iOS or Android environments. Replace 'gutenberg-editor-paragraph.test.js' with the desired test file name.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/react-native/osx-setup-guide.md#_snippet_14

LANGUAGE: sh
CODE:
```
npm run native test:e2e:ios:local gutenberg-editor-paragraph.test.js
```

LANGUAGE: sh
CODE:
```
npm run native test:e2e:android:local gutenberg-editor-paragraph.test.js
```

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

TITLE: Setup E2E Tests
DESCRIPTION: Command to initiate the setup process for the Mobile Gutenberg E2E testing environment. This step is crucial before running any tests.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/react-native-editor/__device-tests__/README.md#_snippet_0

LANGUAGE: shell
CODE:
```
npm run native test:e2e:setup
```

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

TITLE: Install @wordpress/priority-queue
DESCRIPTION: Installs the @wordpress/priority-queue module using npm. This package requires an ES2015+ environment or a polyfill.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/priority-queue/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/priority-queue --save
```

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

TITLE: BoxControl Usage Example
DESCRIPTION: Demonstrates how to use the BoxControl component with state management to update padding or margin values. It shows basic setup with `values` and `onChange` props.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/components/src/box-control/README.md#_snippet_0

LANGUAGE: jsx
CODE:
```
import {
  useState
} from 'react';
import {
  BoxControl
} from '@wordpress/components';

function Example() {
  const [ values, setValues ] = useState( {
    top: '50px',
    left: '10%',
    right: '10%',
    bottom: '50px',
  } );

  return (
    <BoxControl
      __next40pxDefaultSize
      values={ values }
      onChange={ setValues }
    />
  );
};

```

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

TITLE: Install @wordpress/compose
DESCRIPTION: Command to install the @wordpress/compose package using npm.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/compose/README.md#_snippet_3

LANGUAGE: bash
CODE:
```
npm install @wordpress/compose --save
```

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

TITLE: Restart Docker Service and Set DOCKER_HOST Environment Variable
DESCRIPTION: Details the steps to reload systemd configuration, restart the Docker service after applying overrides, and set the DOCKER_HOST environment variable to connect wp-env to the Docker daemon listening on TCP.

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

LANGUAGE: shell
CODE:
```
sudo systemctl daemon-reload
sudo systemctl restart docker.service
export DOCKER_HOST=tcp://127.0.0.1:2376
wp-env start
```

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

TITLE: MySQL Database Connection Details
DESCRIPTION: Provides the necessary details to connect to the MySQL database instance running within the wp-env Docker container. The MySQL port number may change each time the environment is restarted.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_5

LANGUAGE: text
CODE:
```
Host: 127.0.0.1
Username: root
Password: password
Database: wordpress
Port: {MYSQL_PORT_NUMBER}
```

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

TITLE: Install Keyboard Shortcuts Package
DESCRIPTION: Installs the @wordpress/keyboard-shortcuts module using npm. This package requires an ES2015+ environment or a polyfill.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/keyboard-shortcuts/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/keyboard-shortcuts --save
```

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

TITLE: Latest Stable WordPress + Current Directory Plugin
DESCRIPTION: Configuration example for setting up the latest stable WordPress version with the current directory mapped as a plugin, ideal for plugin development.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_27

LANGUAGE: json
CODE:
```
{
	"core": null,
	"plugins": [ "." ]
}
```

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

TITLE: wp-scripts: Code Quality Scripts
DESCRIPTION: Defines npm scripts for maintaining code quality using `wp-scripts`. These scripts integrate ESLint for JavaScript best practices and WordPress coding standards, and Prettier for automatic code formatting.

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

LANGUAGE: json
CODE:
```
{
    "scripts": {
        "format": "wp-scripts format",
        "lint:css": "wp-scripts lint-style",
        "lint:js": "wp-scripts lint-js"
    }
}
```

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

TITLE: Playwright Request Utilities for Setup/Teardown
DESCRIPTION: Demonstrates the use of 'requestUtils' for test setup and teardown, such as activating plugins or managing site states, which are crucial for isolated end-to-end tests.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/e2e/migration.md#_snippet_3

LANGUAGE: javascript
CODE:
```
test.describe( 'Plugin Activation Test', () => {
  test( 'should activate a plugin', async ( { requestUtils } ) => {
    await requestUtils.activatePlugin( 'my-plugin' );
    // Assert plugin is active
  });

  test.afterAll( async ( { requestUtils } ) => {
    await requestUtils.deactivatePlugin( 'my-plugin' );
  });
});
```

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

TITLE: EditorConfig Configuration
DESCRIPTION: Defines coding style rules for the editor, such as indentation, character encoding, and line endings, ensuring consistency across different editors and developers.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/docs/contributors/code/getting-started-with-code-contribution.md#_snippet_14

LANGUAGE: editorconfig
CODE:
```
[*.js]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.jsx]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.php]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.json]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.yml]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.css]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.scss]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.less]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.svg]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.txt]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.editorconfig]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

```

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

TITLE: Configure Docker Daemon to Listen on TCP for Remote Access
DESCRIPTION: Provides the configuration for a systemd override file to make the Docker daemon listen on a TCP port, enabling communication for tools like wp-env. This is crucial when the daemon isn't accessible via the default socket.

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

LANGUAGE: shell
CODE:
```
# /etc/systemd/system/docker.service.d/override.conf
[Service]
ExecStart=
ExecStart=/usr/bin/dockerd -H fd:// -H tcp://0.0.0.0:2376
```

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

TITLE: Start wp-env with Xdebug Enabled
DESCRIPTION: Initiates the WordPress development environment using wp-env and enables Xdebug for debugging. This command is typically run from the project's root directory.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_17

LANGUAGE: sh
CODE:
```
npx wp-env start --xdebug
```

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

TITLE: Date Range Matcher Example
DESCRIPTION: Example of using a `DateRange` object as a date matcher. This matches days within a specified range, including the start and end dates.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/components/src/calendar/date-range-calendar/README.md#_snippet_9

LANGUAGE: typescript
CODE:
```
const rangeMatcher: DateRange = {
	from: new Date( 2019, 1, 2 ),
	to: new Date( 2019, 1, 5 ),
}; // Will match the days between the 2nd and the 5th of February 2019 (inclusive)
```

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

TITLE: Install Viewport Module
DESCRIPTION: Installs the @wordpress/viewport package using npm.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/viewport/README.md#_snippet_0

LANGUAGE: bash
CODE:
```
npm install @wordpress/viewport --save
```

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

TITLE: Date Interval Matcher Example
DESCRIPTION: Example of using a `DateInterval` object as a date matcher. This matches days within a specified range, excluding the start and end dates.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/components/src/calendar/date-range-calendar/README.md#_snippet_8

LANGUAGE: typescript
CODE:
```
const intervalMatcher: DateInterval = {
	after: new Date( 2019, 1, 2 ),
	before: new Date( 2019, 1, 5 ),
}; // Will match the days between the 2nd and the 5th of February 2019 (exclusive)
```

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

TITLE: Map mu-plugins and Themes
DESCRIPTION: Demonstrates how to map local directories to WordPress installation paths for mu-plugins and themes using the 'mappings' configuration. This allows custom theme activation or plugin inclusion.

SOURCE: https://github.com/wordpress/gutenberg/blob/trunk/packages/env/README.md#_snippet_31

LANGUAGE: json
CODE:
```
{
	"plugins": [ "." ],
	"mappings": {
		"wp-content/mu-plugins": "./path/to/local/mu-plugins",
		"wp-content/themes": "./path/to/local/themes",
		"wp-content/themes/specific-theme": "./path/to/local/theme-1"
	}
}
```