-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Block Editor: Add new
TextAlignmentControl component (#60841)
* Block Editor: Add new `TextAlignControl` component * Rename `TextAlignControl` to `TextAlignmentControl` * Replate `align` with `alignment` * Use components to reduce CSS writing * Refactor using new SegmentedTextControl component * Make a component private * SegmentedTextControl: Update JSDoc parameters * TextAlignmentControl: Update JSDoc parameter * TextAlignmentControl: Cache valid controls filtering * WritingModeControl: fix control property * TextAlignmentControl: Allow `justify` as an allowed value * TextAlignmentControl: Update docs * SegmentedTextControl: Update description Co-authored-by: Aaron Robertshaw <[email protected]> * TextAlignmentControl: Update readme Co-authored-by: Aaron Robertshaw <[email protected]> * TextAlignmentControl: Fix JSDoc Co-authored-by: Aaron Robertshaw <[email protected]> * TextAlignmentControl: Update readme Co-authored-by: Aaron Robertshaw <[email protected]> * TextAlignmentControl: Update readme Co-authored-by: Aaron Robertshaw <[email protected]> * SegmentedTextControl: Update JSDoc * TextAlignmentcontrol: remove unecessary `unlock()` * TextAlignmentControl: Remove unnecessary styles * Restor default component classname * Rename `control(s)` to `option(s)` * TextAlignmentControl: Remove README * TextAlignmentControl: Fix control name --------- Co-authored-by: t-hamano <[email protected]> Co-authored-by: aaronrobertshaw <[email protected]> Co-authored-by: noisysocks <[email protected]> Co-authored-by: jasmussen <[email protected]>
- Loading branch information
5 people
authored
Apr 26, 2024
1 parent
08a8156
commit 2c4ef30
Showing
11 changed files
with
250 additions
and
134 deletions.
There are no files selected for viewing
63 changes: 63 additions & 0 deletions
63
packages/block-editor/src/components/segmented-text-control/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,63 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { BaseControl, Button } from '@wordpress/components'; | ||
|
|
||
| /** | ||
| * @typedef {Object} Option | ||
| * @property {string} label The label of the option. | ||
| * @property {string} value The value of the option. | ||
| * @property {string} icon The icon of the option. | ||
| */ | ||
|
|
||
| /** | ||
| * Control to facilitate selecting a text style from a set of options. | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {string} props.label A label for the option. | ||
| * @param {string} props.value Currently selected value. | ||
| * @param {Function} props.onChange Callback to handle onChange. | ||
| * @param {Option[]} props.options Array of options to display. | ||
| * @param {string} props.className Additional class name to apply. | ||
| * | ||
| * @return {Element} Element to render. | ||
| */ | ||
| export default function SegmentedTextControl( { | ||
| label, | ||
| value, | ||
| options, | ||
| onChange, | ||
| className, | ||
| } ) { | ||
| return ( | ||
| <fieldset | ||
| className={ classnames( | ||
| 'block-editor-segmented-text-control', | ||
| className | ||
| ) } | ||
| > | ||
| <BaseControl.VisualLabel as="legend"> | ||
| { label } | ||
| </BaseControl.VisualLabel> | ||
| <div className="block-editor-segmented-text-control__buttons"> | ||
| { options.map( ( option ) => { | ||
| return ( | ||
| <Button | ||
| size="compact" | ||
| key={ option.value } | ||
| icon={ option.icon } | ||
| label={ option.label } | ||
| isPressed={ option.value === value } | ||
| onClick={ () => onChange( option.value ) } | ||
| /> | ||
| ); | ||
| } ) } | ||
| </div> | ||
| </fieldset> | ||
| ); | ||
| } |
7 changes: 2 additions & 5 deletions
7
...omponents/writing-mode-control/style.scss → ...ponents/segmented-text-control/style.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,18 +1,15 @@ | ||
| .block-editor-writing-mode-control { | ||
| .block-editor-segmented-text-control { | ||
| border: 0; | ||
| margin: 0; | ||
| padding: 0; | ||
|
|
||
| .block-editor-writing-mode-control__buttons { | ||
| .block-editor-segmented-text-control__buttons { | ||
| // 4px of padding makes the row 40px high, same as an input. | ||
| padding: $grid-unit-05 0; | ||
| display: flex; | ||
| } | ||
|
|
||
| .components-button.has-icon { | ||
| height: $grid-unit-40; | ||
| margin-right: $grid-unit-05; | ||
| min-width: $grid-unit-40; | ||
| padding: 0; | ||
| } | ||
| } |
91 changes: 91 additions & 0 deletions
91
packages/block-editor/src/components/text-alignment-control/index.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,91 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import classnames from 'classnames'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { | ||
| alignLeft, | ||
| alignCenter, | ||
| alignRight, | ||
| alignJustify, | ||
| } from '@wordpress/icons'; | ||
| import { useMemo } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import SegmentedTextControl from '../segmented-text-control'; | ||
|
|
||
| const TEXT_ALIGNMENT_OPTIONS = [ | ||
| { | ||
| label: __( 'Align text left' ), | ||
| value: 'left', | ||
| icon: alignLeft, | ||
| }, | ||
| { | ||
| label: __( 'Align text center' ), | ||
| value: 'center', | ||
| icon: alignCenter, | ||
| }, | ||
| { | ||
| label: __( 'Align text right' ), | ||
| value: 'right', | ||
| icon: alignRight, | ||
| }, | ||
| { | ||
| label: __( 'Justify text' ), | ||
| value: 'justify', | ||
| icon: alignJustify, | ||
| }, | ||
| ]; | ||
|
|
||
| const DEFAULT_OPTIONS = [ 'left', 'center', 'right' ]; | ||
|
|
||
| /** | ||
| * Control to facilitate text alignment selections. | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {string} props.className Class name to add to the control. | ||
| * @param {string} props.value Currently selected text alignment. | ||
| * @param {Function} props.onChange Handles change in text alignment selection. | ||
| * @param {string[]} props.options Array of text alignment options to display. | ||
| * | ||
| * @return {Element} Text alignment control. | ||
| */ | ||
| export default function TextAlignmentControl( { | ||
| className, | ||
| value, | ||
| onChange, | ||
| options = DEFAULT_OPTIONS, | ||
| } ) { | ||
| const validOptions = useMemo( | ||
| () => | ||
| TEXT_ALIGNMENT_OPTIONS.filter( ( option ) => | ||
| options.includes( option.value ) | ||
| ), | ||
| [ options ] | ||
| ); | ||
|
|
||
| if ( ! validOptions.length ) { | ||
| return null; | ||
| } | ||
|
|
||
| return ( | ||
| <SegmentedTextControl | ||
| label={ __( 'Text alignment' ) } | ||
| options={ validOptions } | ||
| className={ classnames( | ||
| 'block-editor-text-alignment-control', | ||
| className | ||
| ) } | ||
| value={ value } | ||
| onChange={ ( newValue ) => { | ||
| onChange( newValue === value ? undefined : newValue ); | ||
| } } | ||
| /> | ||
| ); | ||
| } |
39 changes: 39 additions & 0 deletions
39
packages/block-editor/src/components/text-alignment-control/stories/index.story.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { useState } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import TextAlignmentControl from '../'; | ||
|
|
||
| export default { | ||
| title: 'BlockEditor/TextAlignmentControl', | ||
| component: TextAlignmentControl, | ||
| argTypes: { | ||
| onChange: { action: 'onChange' }, | ||
| className: { control: 'text' }, | ||
| options: { | ||
| control: 'check', | ||
| options: [ 'left', 'center', 'right', 'justify' ], | ||
| }, | ||
| value: { control: { type: null } }, | ||
| }, | ||
| }; | ||
|
|
||
| const Template = ( { onChange, ...args } ) => { | ||
| const [ value, setValue ] = useState(); | ||
| return ( | ||
| <TextAlignmentControl | ||
| { ...args } | ||
| onChange={ ( ...changeArgs ) => { | ||
| onChange( ...changeArgs ); | ||
| setValue( ...changeArgs ); | ||
| } } | ||
| value={ value } | ||
| /> | ||
| ); | ||
| }; | ||
|
|
||
| export const Default = Template.bind( {} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
18 changes: 0 additions & 18 deletions
18
packages/block-editor/src/components/text-decoration-control/style.scss
This file was deleted.
Oops, something went wrong.
Oops, something went wrong.