-
Notifications
You must be signed in to change notification settings - Fork 4.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
BlockEditor: Add BlockCanvas component = Iframe + BlockList + Writing…
…Flow (#54149)
- Loading branch information
1 parent
e4e4845
commit ccd4320
Showing
16 changed files
with
265 additions
and
181 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
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
91 changes: 91 additions & 0 deletions
91
packages/block-editor/src/components/block-canvas/index.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,91 @@ | ||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import BlockList from '../block-list'; | ||
| import EditorStyles from '../editor-styles'; | ||
| import Iframe from '../iframe'; | ||
| import WritingFlow from '../writing-flow'; | ||
| import { useMouseMoveTypingReset } from '../observe-typing'; | ||
|
|
||
| export function ExperimentalBlockCanvas( { | ||
| shouldIframe = true, | ||
| height = '300px', | ||
| children = <BlockList />, | ||
| styles, | ||
| contentRef, | ||
| iframeProps, | ||
| } ) { | ||
| const resetTypingRef = useMouseMoveTypingReset(); | ||
|
|
||
| if ( ! shouldIframe ) { | ||
| return ( | ||
| <> | ||
| <EditorStyles styles={ styles } /> | ||
| <WritingFlow | ||
| ref={ contentRef } | ||
| className="editor-styles-wrapper" | ||
| tabIndex={ -1 } | ||
| style={ { height } } | ||
| > | ||
| { children } | ||
| </WritingFlow> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <Iframe | ||
| { ...iframeProps } | ||
| ref={ resetTypingRef } | ||
| contentRef={ contentRef } | ||
| style={ { | ||
| width: '100%', | ||
| height, | ||
| ...iframeProps?.style, | ||
| } } | ||
| name="editor-canvas" | ||
| > | ||
| <EditorStyles styles={ styles } /> | ||
| { children } | ||
| </Iframe> | ||
| ); | ||
| } | ||
|
|
||
| /** | ||
| * BlockCanvas component is a component used to display the canvas of the block editor. | ||
| * What we call the canvas is an iframe containing the block list that you can manipulate. | ||
| * The component is also responsible of wiring up all the necessary hooks to enable | ||
| * the keyboard navigation across blocks in the editor and inject content styles into the iframe. | ||
| * | ||
| * @example | ||
| * | ||
| * ```jsx | ||
| * function MyBlockEditor() { | ||
| * const [ blocks, updateBlocks ] = useState([]); | ||
| * return ( | ||
| * <BlockEditorProvider | ||
| * value={ blocks } | ||
| * onInput={ updateBlocks } | ||
| * onChange={ persistBlocks } | ||
| * > | ||
| * <BlockCanvas height="400px" /> | ||
| * </BlockEditorProvider> | ||
| * ); | ||
| * } | ||
| * ``` | ||
| * | ||
| * @param {Object} props Component props. | ||
| * @param {string} props.height Canvas height, defaults to 300px. | ||
| * @param {Array} props.styles Content styles to inject into the iframe. | ||
| * @param {WPElement} props.children Content of the canvas, defaults to the BlockList component. | ||
| * @return {WPElement} Block Breadcrumb. | ||
| */ | ||
| function BlockCanvas( { children, height, styles } ) { | ||
| return ( | ||
| <ExperimentalBlockCanvas height={ height } styles={ styles }> | ||
| { children } | ||
| </ExperimentalBlockCanvas> | ||
| ); | ||
| } | ||
|
|
||
| export default BlockCanvas; |
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
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
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.