Add header buttons to the description editor modal (#39156)
* Add header buttons to the description editor modal # Conflicts: # packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.scss # packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx # Conflicts: # packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx * Remove isModalActionsBarVisible # Conflicts: # packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx * Fix styles and removed comment # Conflicts: # packages/js/product-editor/src/components/iframe-editor/header-toolbar/header-toolbar.tsx * Add changelog * Fix styles * Fix gap between buttons
This commit is contained in:
Fernando Marichal
GitHub
parent
f8dfc30708
commit
bbd727c257
|
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: dev
|
||||
|
||||
Add header buttons to the description editor modal #39156
|
||||
|
|
@ -31,6 +31,24 @@
|
|||
padding-left: $gap-small;
|
||||
}
|
||||
&-right {
|
||||
padding-right: $gap-small;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
> .components-dropdown-menu {
|
||||
margin-right: $gap-small;
|
||||
width: 48px;
|
||||
> button.components-dropdown-menu__toggle {
|
||||
padding: $gap-smaller !important;
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
> .woocommerce-show-block-inspector-panel {
|
||||
margin-right: -$gap-smaller;
|
||||
}
|
||||
button.woocommerce-modal-actions__done-button,
|
||||
button.woocommerce-modal-actions__cancel-button {
|
||||
margin-left: $gap-smaller;
|
||||
height: $gap-larger - $gap-smallest;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -35,7 +35,15 @@ import { DocumentOverview } from './document-overview';
|
|||
import { ShowBlockInspectorPanel } from './show-block-inspector-panel';
|
||||
import { MoreMenu } from './more-menu';
|
||||
|
||||
export function HeaderToolbar() {
|
||||
type HeaderToolbarProps = {
|
||||
onSave?: () => void;
|
||||
onCancel?: () => void;
|
||||
};
|
||||
|
||||
export function HeaderToolbar( {
|
||||
onSave = () => {},
|
||||
onCancel = () => {},
|
||||
}: HeaderToolbarProps ) {
|
||||
const { isInserterOpened, setIsInserterOpened } =
|
||||
useContext( EditorContext );
|
||||
const isWideViewport = useViewportMatch( 'wide' );
|
||||
|
|
@ -122,7 +130,26 @@ export function HeaderToolbar() {
|
|||
) }
|
||||
</div>
|
||||
<div className="woocommerce-iframe-editor__header-toolbar-right">
|
||||
<ToolbarItem as={ ShowBlockInspectorPanel } />
|
||||
<ToolbarItem
|
||||
as={ Button }
|
||||
variant="tertiary"
|
||||
className="woocommerce-modal-actions__cancel-button"
|
||||
onClick={ onCancel }
|
||||
>
|
||||
{ __( 'Cancel', 'woocommerce' ) }
|
||||
</ToolbarItem>
|
||||
<ToolbarItem
|
||||
as={ Button }
|
||||
variant="primary"
|
||||
className="woocommerce-modal-actions__done-button"
|
||||
onClick={ onSave }
|
||||
>
|
||||
{ __( 'Done', 'woocommerce' ) }
|
||||
</ToolbarItem>
|
||||
<ToolbarItem
|
||||
as={ ShowBlockInspectorPanel }
|
||||
className="woocommerce-show-block-inspector-panel"
|
||||
/>
|
||||
<ToolbarItem as={ MoreMenu } />
|
||||
</div>
|
||||
</NavigableToolbar>
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ import { SecondarySidebar } from './secondary-sidebar/secondary-sidebar';
|
|||
import { useEditorHistory } from './hooks/use-editor-history';
|
||||
|
||||
type IframeEditorProps = {
|
||||
closeModal?: () => void;
|
||||
initialBlocks?: BlockInstance[];
|
||||
onChange?: ( blocks: BlockInstance[] ) => void;
|
||||
onClose?: () => void;
|
||||
|
|
@ -41,17 +42,29 @@ type IframeEditorProps = {
|
|||
};
|
||||
|
||||
export function IframeEditor( {
|
||||
closeModal = () => {},
|
||||
initialBlocks = [],
|
||||
onChange = () => {},
|
||||
onClose,
|
||||
onInput,
|
||||
onInput = () => {},
|
||||
settings: __settings,
|
||||
}: IframeEditorProps ) {
|
||||
const [ resizeObserver ] = useResizeObserver();
|
||||
const [ blocks, setBlocks ] = useState< BlockInstance[] >( initialBlocks );
|
||||
const { appendEdit, hasRedo, hasUndo, redo, undo } = useEditorHistory( {
|
||||
const [ temporalBlocks, setTemporalBlocks ] =
|
||||
useState< BlockInstance[] >( initialBlocks );
|
||||
const { appendEdit } = useEditorHistory( {
|
||||
setBlocks,
|
||||
} );
|
||||
const {
|
||||
appendEdit: tempAppendEdit,
|
||||
hasRedo,
|
||||
hasUndo,
|
||||
redo,
|
||||
undo,
|
||||
} = useEditorHistory( {
|
||||
setBlocks: setTemporalBlocks,
|
||||
} );
|
||||
const [ isInserterOpened, setIsInserterOpened ] = useState( false );
|
||||
const [ isListViewOpened, setIsListViewOpened ] = useState( false );
|
||||
const [ isSidebarOpened, setIsSidebarOpened ] = useState( true );
|
||||
|
|
@ -99,14 +112,32 @@ export function IframeEditor( {
|
|||
} }
|
||||
value={ blocks }
|
||||
onChange={ ( updatedBlocks: BlockInstance[] ) => {
|
||||
appendEdit( updatedBlocks );
|
||||
setBlocks( updatedBlocks );
|
||||
tempAppendEdit( updatedBlocks );
|
||||
setTemporalBlocks( updatedBlocks );
|
||||
onChange( updatedBlocks );
|
||||
} }
|
||||
onInput={ onInput }
|
||||
onInput={ ( updatedBlocks: BlockInstance[] ) => {
|
||||
tempAppendEdit( updatedBlocks );
|
||||
setTemporalBlocks( updatedBlocks );
|
||||
onInput( updatedBlocks );
|
||||
} }
|
||||
useSubRegistry={ true }
|
||||
>
|
||||
<HeaderToolbar />
|
||||
<HeaderToolbar
|
||||
onSave={ () => {
|
||||
appendEdit( temporalBlocks );
|
||||
setBlocks( temporalBlocks );
|
||||
onChange( temporalBlocks );
|
||||
closeModal();
|
||||
} }
|
||||
onCancel={ () => {
|
||||
appendEdit( blocks );
|
||||
setBlocks( blocks );
|
||||
onChange( blocks );
|
||||
setTemporalBlocks( blocks );
|
||||
closeModal();
|
||||
} }
|
||||
/>
|
||||
<div className="woocommerce-iframe-editor__main">
|
||||
<SecondarySidebar />
|
||||
<BlockTools
|
||||
|
|
|
|||
|
|
@ -52,6 +52,7 @@ export function ModalEditor( {
|
|||
initialBlocks={ initialBlocks }
|
||||
onInput={ debouncedOnChange }
|
||||
onChange={ debouncedOnChange }
|
||||
closeModal={ handleClose }
|
||||
/>
|
||||
</Modal>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue