Add editor styles to product editor and iframe editor (#38168)
* Add editor styles to product editor and iframe editor * Make section title css selectors more specific * Add changelog entry * Remove additional commented component * Remove unused import
This commit is contained in:
parent
246053277e
commit
a587612934
|
@ -0,0 +1,4 @@
|
|||
Significance: minor
|
||||
Type: fix
|
||||
|
||||
Add editor styles to product editor and iframe editor
|
|
@ -6,7 +6,7 @@
|
|||
padding-top: 64px;
|
||||
}
|
||||
|
||||
&__title {
|
||||
.wp-block-woocommerce-product-section__title {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
font-size: 24px;
|
||||
|
|
|
@ -19,6 +19,9 @@ import {
|
|||
EditorSettings,
|
||||
EditorBlockListSettings,
|
||||
ObserveTyping,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore No types for this exist yet.
|
||||
__unstableEditorStyles as EditorStyles,
|
||||
} from '@wordpress/block-editor';
|
||||
// It doesn't seem to notice the External dependency block whn @ts-ignore is added.
|
||||
// eslint-disable-next-line @woocommerce/dependency-group
|
||||
|
@ -100,6 +103,7 @@ export function BlockEditor( {
|
|||
onChange={ onChange }
|
||||
settings={ settings }
|
||||
>
|
||||
<EditorStyles styles={ settings?.styles } />
|
||||
<div className="editor-styles-wrapper">
|
||||
{ /* eslint-disable-next-line @typescript-eslint/ban-ts-comment */ }
|
||||
{ /* @ts-ignore No types for this exist yet. */ }
|
||||
|
|
|
@ -3,22 +3,29 @@
|
|||
*/
|
||||
import { createElement, Fragment } from '@wordpress/element';
|
||||
import {
|
||||
EditorSettings,
|
||||
EditorBlockListSettings,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore No types for this exist yet.
|
||||
__unstableIframe as Iframe,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore No types for this exist yet.
|
||||
__unstableUseMouseMoveTypingReset as useMouseMoveTypingReset,
|
||||
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
|
||||
// @ts-ignore No types for this exist yet.
|
||||
__unstableEditorStyles as EditorStyles,
|
||||
} from '@wordpress/block-editor';
|
||||
|
||||
type EditorCanvasProps = {
|
||||
enableResizing: boolean;
|
||||
children: React.ReactNode;
|
||||
enableResizing: boolean;
|
||||
settings: Partial< EditorSettings & EditorBlockListSettings > | undefined;
|
||||
};
|
||||
|
||||
export function EditorCanvas( {
|
||||
enableResizing,
|
||||
children,
|
||||
enableResizing,
|
||||
settings,
|
||||
...props
|
||||
}: EditorCanvasProps ) {
|
||||
const mouseMoveTypingRef = useMouseMoveTypingReset();
|
||||
|
@ -26,6 +33,7 @@ export function EditorCanvas( {
|
|||
<Iframe
|
||||
head={
|
||||
<>
|
||||
<EditorStyles styles={ settings?.styles } />
|
||||
<style>
|
||||
{
|
||||
// Forming a "block formatting context" to prevent margin collapsing.
|
||||
|
|
|
@ -39,7 +39,7 @@ export function IframeEditor( {
|
|||
initialBlocks = [],
|
||||
onChange,
|
||||
onClose,
|
||||
settings,
|
||||
settings: __settings,
|
||||
}: IframeEditorProps ) {
|
||||
const [ resizeObserver, sizes ] = useResizeObserver();
|
||||
const [ blocks, setBlocks ] = useState< BlockInstance[] >( initialBlocks );
|
||||
|
@ -61,11 +61,13 @@ export function IframeEditor( {
|
|||
updateSettings( productBlockEditorSettings );
|
||||
}, [] );
|
||||
|
||||
const settings = __settings || parentEditorSettings;
|
||||
|
||||
return (
|
||||
<div className="woocommerce-iframe-editor">
|
||||
<BlockEditorProvider
|
||||
settings={ {
|
||||
...( settings || parentEditorSettings ),
|
||||
...settings,
|
||||
hasFixedToolbar: true,
|
||||
templateLock: false,
|
||||
} }
|
||||
|
@ -103,7 +105,10 @@ export function IframeEditor( {
|
|||
// @ts-ignore This accepts numbers or strings.
|
||||
height={ sizes.height ?? '100%' }
|
||||
>
|
||||
<EditorCanvas enableResizing={ true }>
|
||||
<EditorCanvas
|
||||
enableResizing={ true }
|
||||
settings={ settings }
|
||||
>
|
||||
{ resizeObserver }
|
||||
<BlockList className="edit-site-block-editor__block-list wp-site-blocks" />
|
||||
</EditorCanvas>
|
||||
|
|
Loading…
Reference in New Issue