Skip to content

Latest commit

 

History

History
74 lines (47 loc) · 2.63 KB

README.md

File metadata and controls

74 lines (47 loc) · 2.63 KB
Raw

Justify Toolbar

The JustifyContentControl component renders a toolbar that displays justify options for the selected block.

This component is used to set the flex justification for the elements in the block, allowing to justify left, center, right, and space-between. In comparison, the alignment options are for the block itself.

See the Navigation block for an example usage.

Development guidelines

Usage

Renders an justification control with options.

import { JustifyContentControl } from '@wordpress/block-editor';

const MyJustifyToolbar = ( { attributes, setAttributes } ) => (
	<BlockControls group="block">
		<JustifyContentControl
			value={ attributes.justification }
			onChange={ ( next ) => {
				setAttributes( { justification: next } );
			} }
		/>
	</BlockControls>
);

NOTE: The justfify toolbar does not add any classes to your component, you must do this using the setAttributes function. The toolbar does define the following classnames you should use:

items-justified-left
items-justified-center
items-justified-right
items-justified-space-between

Note: In this example that we render JustifyContentControl as a child of the BlockControls component.

Props

allowedControls

  • Type: string[]
  • Default: [ 'left', 'center', 'right', 'space-between' ]

An array of strings for what controls to show, by default it shows all.

onChange

  • Type: Function
  • Required: Yes

A callback function invoked when the toolbar's justification value is changed via an interaction with any of the toolbar's buttons. Called with the new alignment value (ie: left, center, right, space-between, undefined) as the only argument.

popoverProps

  • Type: Object
  • Required: No

Properties of popoverProps object will be passed as props to the nested Popover component.

Use this object to modify props available for the Popover component that are not already exposed in the DropdownMenu component, e.g.: the direction in which the popover should open relative to its parent node set with position prop.

value

  • Type: String
  • Default: undefined
  • Options:: left, center, right, space-between

The current value of the alignment setting. You may only choose from the Options listed above.

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 in the components tree.