forked from woocommerce/woocommerce
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add iframe editor header toolbar and block inserter (woocommerce#38549)
* Add initial toolbar and secondary sidebar * Style the sidebar and inserter panel * Adjust toolbar and modal paddings * Move header toolbar styles to separate file * Make header toolbar class names consistent with component * Dont use experimental insertion index and fall back to default insertion point * Add changelog entry
- Loading branch information
Showing
10 changed files
with
311 additions
and
43 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| Significance: minor | ||
| Type: add | ||
|
|
||
| Add iframe editor header toolbar and block inserter |
32 changes: 32 additions & 0 deletions
32
packages/js/product-editor/src/components/iframe-editor/header-toolbar.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 |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| .woocommerce-iframe-editor__header-toolbar { | ||
| height: 60px; | ||
| border: 0; | ||
| border-bottom: 1px solid $gray-400; | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| .woocommerce-iframe-editor__header-toolbar-inserter-toggle.components-button.has-icon { | ||
| height: 32px; | ||
| margin-right: 8px; | ||
| min-width: 32px; | ||
| padding: 0; | ||
| width: 32px; | ||
|
|
||
| svg { | ||
| transition: transform .2s cubic-bezier(.165,.84,.44,1); | ||
| } | ||
|
|
||
| &.is-pressed:before { | ||
| width: 100%; | ||
| left: 0; | ||
| } | ||
|
|
||
| &.is-pressed svg { | ||
| transform: rotate(45deg); | ||
| } | ||
| } | ||
|
|
||
| &-left { | ||
| padding-left: $gap-small; | ||
| } | ||
| } |
94 changes: 94 additions & 0 deletions
94
packages/js/product-editor/src/components/iframe-editor/header-toolbar.tsx
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,94 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { | ||
| NavigableToolbar, | ||
| store as blockEditorStore, | ||
| } from '@wordpress/block-editor'; | ||
| import { plus } from '@wordpress/icons'; | ||
| import { createElement, useRef, useCallback } from '@wordpress/element'; | ||
| import { MouseEvent } from 'react'; | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore ToolbarItem exists in WordPress components. | ||
| // eslint-disable-next-line @woocommerce/dependency-group | ||
| import { Button, ToolbarItem } from '@wordpress/components'; | ||
|
|
||
| type HeaderToolbarProps = { | ||
| isInserterOpened: boolean; | ||
| setIsInserterOpened: ( value: boolean ) => void; | ||
| }; | ||
|
|
||
| export function HeaderToolbar( { | ||
| isInserterOpened, | ||
| setIsInserterOpened, | ||
| }: HeaderToolbarProps ) { | ||
| // console.log( editPost ); | ||
| const inserterButton = useRef< HTMLButtonElement | null >( null ); | ||
| const { isInserterEnabled } = useSelect( ( select ) => { | ||
| const { | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore These selectors are available in the block data store. | ||
| hasInserterItems, | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore These selectors are available in the block data store. | ||
| getBlockRootClientId, | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore These selectors are available in the block data store. | ||
| getBlockSelectionEnd, | ||
| } = select( blockEditorStore ); | ||
|
|
||
| return { | ||
| isInserterEnabled: hasInserterItems( | ||
| getBlockRootClientId( getBlockSelectionEnd() ) | ||
| ), | ||
| }; | ||
| }, [] ); | ||
|
|
||
| /* translators: accessibility text for the editor toolbar */ | ||
| const toolbarAriaLabel = __( 'Document tools', 'woocommerce' ); | ||
|
|
||
| const toggleInserter = useCallback( () => { | ||
| if ( isInserterOpened ) { | ||
| // Focusing the inserter button should close the inserter popover. | ||
| // However, there are some cases it won't close when the focus is lost. | ||
| // See https://github.com/WordPress/gutenberg/issues/43090 for more details. | ||
| inserterButton.current?.focus(); | ||
| setIsInserterOpened( false ); | ||
| } else { | ||
| setIsInserterOpened( true ); | ||
| } | ||
| }, [ isInserterOpened, setIsInserterOpened ] ); | ||
|
|
||
| return ( | ||
| <NavigableToolbar | ||
| className="woocommerce-iframe-editor__header-toolbar" | ||
| aria-label={ toolbarAriaLabel } | ||
| > | ||
| <div className="woocommerce-iframe-editor__header-toolbar-left"> | ||
| <ToolbarItem | ||
| ref={ inserterButton } | ||
| as={ Button } | ||
| className="woocommerce-iframe-editor__header-toolbar-inserter-toggle" | ||
| variant="primary" | ||
| isPressed={ isInserterOpened } | ||
| onMouseDown={ ( | ||
| event: MouseEvent< HTMLButtonElement > | ||
| ) => { | ||
| event.preventDefault(); | ||
| } } | ||
| onClick={ toggleInserter } | ||
| disabled={ ! isInserterEnabled } | ||
| icon={ plus } | ||
| label={ | ||
| ! isInserterOpened | ||
| ? __( 'Add', 'woocommerce' ) | ||
| : __( 'Close', 'woocommerce' ) | ||
| } | ||
| showTooltip | ||
| /> | ||
| </div> | ||
| </NavigableToolbar> | ||
| ); | ||
| } |
20 changes: 13 additions & 7 deletions
20
packages/js/product-editor/src/components/iframe-editor/iframe-editor.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
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
3 changes: 3 additions & 0 deletions
3
...es/js/product-editor/src/components/iframe-editor/secondary-sidebar/inserter-sidebar.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 |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| .woocommerce-iframe-editor__inserter-panel { | ||
| border-right: 1px solid $gray-400; | ||
| } |
84 changes: 84 additions & 0 deletions
84
...ges/js/product-editor/src/components/iframe-editor/secondary-sidebar/inserter-sidebar.tsx
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,84 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { Button, VisuallyHidden } from '@wordpress/components'; | ||
| import { close } from '@wordpress/icons'; | ||
| import { | ||
| useViewportMatch, | ||
| __experimentalUseDialog as useDialog, | ||
| } from '@wordpress/compose'; | ||
| import { | ||
| createElement, | ||
| useCallback, | ||
| useEffect, | ||
| useRef, | ||
| } from '@wordpress/element'; | ||
| import { useSelect } from '@wordpress/data'; | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { | ||
| store as blockEditorStore, | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore This is actively used in the GB repo and probably safe to use. | ||
| // eslint-disable-next-line @wordpress/no-unsafe-wp-apis | ||
| __experimentalLibrary as Library, | ||
| } from '@wordpress/block-editor'; | ||
|
|
||
| type InserterSidebarProps = { | ||
| setIsInserterOpened: ( value: boolean ) => void; | ||
| }; | ||
|
|
||
| export default function InserterSidebar( { | ||
| setIsInserterOpened, | ||
| }: InserterSidebarProps ) { | ||
| const isMobileViewport = useViewportMatch( 'medium', '<' ); | ||
| const { rootClientId } = useSelect( ( select ) => { | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore These selectors are available in the block data store. | ||
| const { getBlockRootClientId } = select( blockEditorStore ); | ||
|
|
||
| return { | ||
| rootClientId: getBlockRootClientId(), | ||
| }; | ||
| } ); | ||
|
|
||
| const closeInserter = useCallback( () => { | ||
| return setIsInserterOpened( false ); | ||
| }, [ setIsInserterOpened ] ); | ||
|
|
||
| const TagName = ! isMobileViewport ? VisuallyHidden : 'div'; | ||
| const [ inserterDialogRef, inserterDialogProps ] = useDialog( { | ||
| onClose: closeInserter, | ||
| focusOnMount: false, | ||
| } ); | ||
|
|
||
| const libraryRef = useRef< Library | null >( null ); | ||
| useEffect( () => { | ||
| libraryRef.current?.focusSearch(); | ||
| }, [] ); | ||
|
|
||
| return ( | ||
| <div | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore Types are not provided by useDialog. | ||
| ref={ inserterDialogRef } | ||
| { ...inserterDialogProps } | ||
| className="woocommerce-iframe-editor__inserter-panel" | ||
| > | ||
| <TagName className="woocommerce-iframe-editor__inserter-panel-header"> | ||
| <Button | ||
| icon={ close } | ||
| onClick={ closeInserter } | ||
| label={ __( 'Close block inserter', 'woocommerce' ) } | ||
| /> | ||
| </TagName> | ||
| <div className="woocommerce-iframe-editor__inserter-panel-content"> | ||
| <Library | ||
| showInserterHelpPanel | ||
| shouldFocusBlock={ isMobileViewport } | ||
| rootClientId={ rootClientId } | ||
| ref={ libraryRef } | ||
| /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| } |
25 changes: 25 additions & 0 deletions
25
...es/js/product-editor/src/components/iframe-editor/secondary-sidebar/secondary-sidebar.tsx
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,25 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { createElement } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import InserterSidebar from './inserter-sidebar'; | ||
|
|
||
| type SecondarySidebarProps = { | ||
| isInserterOpened: boolean; | ||
| setIsInserterOpened: ( value: boolean ) => void; | ||
| }; | ||
|
|
||
| export function SecondarySidebar( { | ||
| isInserterOpened, | ||
| setIsInserterOpened, | ||
| }: SecondarySidebarProps ) { | ||
| if ( isInserterOpened ) { | ||
| return <InserterSidebar setIsInserterOpened={ setIsInserterOpened } />; | ||
| } | ||
|
|
||
| return null; | ||
| } |
2 changes: 2 additions & 0 deletions
2
packages/js/product-editor/src/components/iframe-editor/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,3 +1,5 @@ | ||
| @import './iframe-editor.scss'; | ||
| @import './header-toolbar.scss'; | ||
| @import './resize-handle.scss'; | ||
| @import './back-button.scss'; | ||
| @import './secondary-sidebar/inserter-sidebar.scss'; |
Oops, something went wrong.