Steve-Dee-Designs
/
woocommerce
mirror of https://github.com/woocommerce/woocommerce.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add tool selector option to iframe editor (#38686) 

* Add tool selector option to iframe editor

* Fix lint errors
This commit is contained in:
Joshua T Flowers 2023-06-15 16:29:12 -07:00 committed by GitHub
parent d51f69d2d7
commit 3ad98ec8b4
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/js/product-editor/changelog/add-38487 Normal file
View File

@ -0,0 +1,4 @@
Significance: minor
Type: add
Add tool selector option to iframe editor

24
packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx
View File

@ -4,10 +4,6 @@
import { useSelect } from '@wordpress/data';
import { useViewportMatch } from '@wordpress/compose';
import { __ } from '@wordpress/i18n';
import {
NavigableToolbar,
store as blockEditorStore,
} from '@wordpress/block-editor';
import { plus } from '@wordpress/icons';
import {
createElement,
@ -17,6 +13,13 @@ import {
useContext,
} from '@wordpress/element';
import { MouseEvent } from 'react';
import {
NavigableToolbar,
store as blockEditorStore,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore ToolSelector exists in WordPress components.
ToolSelector,
} from '@wordpress/block-editor';
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore ToolbarItem exists in WordPress components.
// eslint-disable-next-line @woocommerce/dependency-group
@ -33,8 +36,9 @@ export function HeaderToolbar() {
const { isInserterOpened, setIsInserterOpened } =
useContext( EditorContext );
const isWideViewport = useViewportMatch( 'wide' );
const isLargeViewport = useViewportMatch( 'medium' );
const inserterButton = useRef< HTMLButtonElement | null >( null );
const { isInserterEnabled } = useSelect( ( select ) => {
const { isInserterEnabled, isTextModeEnabled } = useSelect( ( select ) => {
const {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore These selectors are available in the block data store.
@ -45,9 +49,13 @@ export function HeaderToolbar() {
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore These selectors are available in the block data store.
getBlockSelectionEnd,
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore These selectors are available in the block data store.
__unstableGetEditorMode: getEditorMode,
} = select( blockEditorStore );
return {
isTextModeEnabled: getEditorMode() === 'text',
isInserterEnabled: hasInserterItems(
getBlockRootClientId( getBlockSelectionEnd() )
),
@ -98,6 +106,12 @@ export function HeaderToolbar() {
/>
{ isWideViewport && (
<>
{ isLargeViewport && (
<ToolbarItem
as={ ToolSelector }
disabled={ isTextModeEnabled }
/>
) }
<ToolbarItem as={ EditorHistoryUndo } />
<ToolbarItem as={ EditorHistoryRedo } />
</>