Skip to content
Open
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Docs: Add Resolution Tool Readme
  • Loading branch information
Rishit30G committed Mar 5, 2025
commit ac759e6bdedf1fe2f4ae70e19ae352aed9812c9c
92 changes: 92 additions & 0 deletions packages/block-editor/src/components/resolution-tool/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,92 @@
# Resolution Tool

The Resolution Tool component is a component for selecting image resolution with preset options. It is used in the Image block's toolbar.

## Table of contents

1. [Development guidelines](#development-guidelines)
2. [Related components](#related-components)

## Development guidelines

### Usage

Render the `ResolutionTool` component.

```jsx
import { ResolutionTool } from '@wordpress/block-editor';

const MyResolutionTool = () => (
<ResolutionTool
panelId="image"
value="full"
onChange={ ( value ) => {
// Handle the new alignment value
} }
options={ [
{ value: 'full', label: 'Full' },
{ value: 'large', label: 'Large' },
{ value: 'medium', label: 'Medium' },
{ value: 'thumbnail', label: 'Thumbnail' },
] }
defaultValue="full"
isShownByDefault={ true }
resetAllFilter={ resetAllFilter }
/>
);
```

### Props

### `panelId`

**Type**: `string`
**Required**: Yes

Unique identifier for the panel.

### `value`

**Type**: `string`
**Required**: Yes

The current value of the resolution.

### `onChange`

**Type**: `Function`
**Required**: Yes

Function called when the resolution is changed.

### `options`

**Type**: `Array`
**Required**: Yes

Array of objects with the resolution options.

### `defaultValue`

**Type**: `string`
**Required**: Yes

The default value of the resolution.

### `isShownByDefault`

**Type**: `boolean`
**Required**: Yes

Whether the resolution tool is shown by default.

### `resetAllFilter`

**Type**: `Function`
**Required**: Yes

Function called when the resolution is reset.

## Related components

Block Editor components are components that can be used to compose the UI of your block editor. Thus, they can only be used under a [BlockEditorProvider](https://github.com/WordPress/gutenberg/blob/master/packages/block-editor/src/components/provider/README.md) in the components tree.
Loading