-
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.
Add settings "drawer" to Link Control (#47328)
* Add basic panel toggle * Implement drawer like effect * Implement basic animation * Update to have drawer below button * Update timing to 0.2s * Fix janky animation * Close settings drawer when editing is stopped * Fix input overflowing in settings drawer * Disable animations when user requests reduced motion * Force no animations in component tests * Fix text input tests broken due to move into settings drawer * Fix remaining tests broken by settings drawer * speed up animation * Move drawer to dedicated component * Add test for settings drawer with unique ID * Check for aria expanded attribute * Avoid extra div when reduced motion is active * Don’t show settings unless in edit mode * Add test for link settings toggle not being displayed unless editing * Fix e2e tests due to change of text input location * Fix more e2e tests * Fix final e2e test * Fix e2e test that arrived following rebase --------- Co-authored-by: scruffian <ben@escruffian.com>
- Loading branch information
Showing
6 changed files
with
326 additions
and
76 deletions.
There are no files selected for viewing
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
115 changes: 85 additions & 30 deletions
115
packages/block-editor/src/components/link-control/settings-drawer.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 |
|---|---|---|
| @@ -1,41 +1,96 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { | ||
| Button, | ||
| TextControl, | ||
| __unstableMotion as motion, | ||
| __unstableAnimatePresence as AnimatePresence, | ||
| } from '@wordpress/components'; | ||
| import { settings as settingsIcon } from '@wordpress/icons'; | ||
| import { useReducedMotion, useInstanceId } from '@wordpress/compose'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { ToggleControl, VisuallyHidden } from '@wordpress/components'; | ||
|
|
||
| const noop = () => {}; | ||
| import { Fragment } from '@wordpress/element'; | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import Settings from './settings'; | ||
|
|
||
| const LinkControlSettingsDrawer = ( { value, onChange = noop, settings } ) => { | ||
| if ( ! settings || ! settings.length ) { | ||
| return null; | ||
| } | ||
| function LinkSettingsDrawer( { | ||
| settingsOpen, | ||
| setSettingsOpen, | ||
| showTextControl, | ||
| showSettings, | ||
| textInputRef, | ||
| internalTextInputValue, | ||
| setInternalTextInputValue, | ||
| handleSubmitWithEnter, | ||
| value, | ||
| settings, | ||
| onChange, | ||
| } ) { | ||
| const prefersReducedMotion = useReducedMotion(); | ||
| const MaybeAnimatePresence = prefersReducedMotion | ||
| ? Fragment | ||
| : AnimatePresence; | ||
| const MaybeMotionDiv = prefersReducedMotion ? 'div' : motion.div; | ||
|
|
||
| const handleSettingChange = ( setting ) => ( newValue ) => { | ||
| onChange( { | ||
| ...value, | ||
| [ setting.id ]: newValue, | ||
| } ); | ||
| }; | ||
| const id = useInstanceId( LinkSettingsDrawer ); | ||
|
|
||
| const theSettings = settings.map( ( setting ) => ( | ||
| <ToggleControl | ||
| className="block-editor-link-control__setting" | ||
| key={ setting.id } | ||
| label={ setting.title } | ||
| onChange={ handleSettingChange( setting ) } | ||
| checked={ value ? !! value[ setting.id ] : false } | ||
| /> | ||
| ) ); | ||
| const settingsDrawerId = `link-control-settings-drawer-${ id }`; | ||
|
|
||
| return ( | ||
| <fieldset className="block-editor-link-control__settings"> | ||
| <VisuallyHidden as="legend"> | ||
| { __( 'Currently selected link settings' ) } | ||
| </VisuallyHidden> | ||
| { theSettings } | ||
| </fieldset> | ||
| <> | ||
| <Button | ||
| className="block-editor-link-control__drawer-toggle" | ||
| aria-expanded={ settingsOpen } | ||
| onClick={ () => setSettingsOpen( ! settingsOpen ) } | ||
| icon={ settingsIcon } | ||
| label={ __( 'Toggle link settings' ) } | ||
| aria-controls={ settingsDrawerId } | ||
| /> | ||
| <MaybeAnimatePresence> | ||
| { settingsOpen && ( | ||
| <MaybeMotionDiv | ||
| className="block-editor-link-control__drawer" | ||
| hidden={ ! settingsOpen } | ||
| id={ settingsDrawerId } | ||
| initial="collapsed" | ||
| animate="open" | ||
| exit="collapsed" | ||
| variants={ { | ||
| open: { opacity: 1, height: 'auto' }, | ||
| collapsed: { opacity: 0, height: 0 }, | ||
| } } | ||
| transition={ { | ||
| duration: 0.1, | ||
| } } | ||
| > | ||
| <div className="block-editor-link-control__drawer-inner"> | ||
| { showTextControl && ( | ||
| <TextControl | ||
| __nextHasNoMarginBottom | ||
| ref={ textInputRef } | ||
| className="block-editor-link-control__setting block-editor-link-control__text-content" | ||
| label="Text" | ||
| value={ internalTextInputValue } | ||
| onChange={ setInternalTextInputValue } | ||
| onKeyDown={ handleSubmitWithEnter } | ||
| /> | ||
| ) } | ||
| { showSettings && ( | ||
| <Settings | ||
| value={ value } | ||
| settings={ settings } | ||
| onChange={ onChange } | ||
| /> | ||
| ) } | ||
| </div> | ||
| </MaybeMotionDiv> | ||
| ) } | ||
| </MaybeAnimatePresence> | ||
| </> | ||
| ); | ||
| }; | ||
| } | ||
|
|
||
| export default LinkControlSettingsDrawer; | ||
| export default LinkSettingsDrawer; |
41 changes: 41 additions & 0 deletions
41
packages/block-editor/src/components/link-control/settings.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,41 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { ToggleControl, VisuallyHidden } from '@wordpress/components'; | ||
|
|
||
| const noop = () => {}; | ||
|
|
||
| const LinkControlSettings = ( { value, onChange = noop, settings } ) => { | ||
| if ( ! settings || ! settings.length ) { | ||
| return null; | ||
| } | ||
|
|
||
| const handleSettingChange = ( setting ) => ( newValue ) => { | ||
| onChange( { | ||
| ...value, | ||
| [ setting.id ]: newValue, | ||
| } ); | ||
| }; | ||
|
|
||
| const theSettings = settings.map( ( setting ) => ( | ||
| <ToggleControl | ||
| className="block-editor-link-control__setting" | ||
| key={ setting.id } | ||
| label={ setting.title } | ||
| onChange={ handleSettingChange( setting ) } | ||
| checked={ value ? !! value[ setting.id ] : false } | ||
| /> | ||
| ) ); | ||
|
|
||
| return ( | ||
| <fieldset className="block-editor-link-control__settings"> | ||
| <VisuallyHidden as="legend"> | ||
| { __( 'Currently selected link settings' ) } | ||
| </VisuallyHidden> | ||
| { theSettings } | ||
| </fieldset> | ||
| ); | ||
| }; | ||
|
|
||
| export default LinkControlSettings; |
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
Oops, something went wrong.
d142cb0There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Flaky tests detected in d142cb0.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.
🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/4112641351
📝 Reported issues:
specs/editor/various/autosave.test.js