-
Notifications
You must be signed in to change notification settings - Fork 4.3k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Custom HTML Block: apply editor-styles to preview mode. (#13080)
- Loading branch information
1 parent
7d0a418
commit cd11278
Showing
6 changed files
with
143 additions
and
57 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,79 @@ | ||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { __ } from '@wordpress/i18n'; | ||
| import { Component } from '@wordpress/element'; | ||
| import { BlockControls, PlainText, transformStyles } from '@wordpress/editor'; | ||
| import { Disabled, SandBox } from '@wordpress/components'; | ||
| import { withSelect } from '@wordpress/data'; | ||
|
|
||
| class HTMLEdit extends Component { | ||
| constructor() { | ||
| super( ...arguments ); | ||
| this.state = { | ||
| isPreview: false, | ||
| styles: [], | ||
| }; | ||
| this.switchToHTML = this.switchToHTML.bind( this ); | ||
| this.switchToPreview = this.switchToPreview.bind( this ); | ||
| } | ||
|
|
||
| componentDidMount() { | ||
| const { styles } = this.props; | ||
| this.setState( { styles: transformStyles( styles ) } ); | ||
| } | ||
|
|
||
| switchToPreview() { | ||
| this.setState( { isPreview: true } ); | ||
| } | ||
|
|
||
| switchToHTML() { | ||
| this.setState( { isPreview: false } ); | ||
| } | ||
|
|
||
| render() { | ||
| const { attributes, setAttributes } = this.props; | ||
| const { isPreview, styles } = this.state; | ||
|
|
||
| return ( | ||
| <div className="wp-block-html"> | ||
| <BlockControls> | ||
| <div className="components-toolbar"> | ||
| <button | ||
| className={ `components-tab-button ${ ! isPreview ? 'is-active' : '' }` } | ||
| onClick={ this.switchToHTML } | ||
| > | ||
| <span>HTML</span> | ||
| </button> | ||
| <button | ||
| className={ `components-tab-button ${ isPreview ? 'is-active' : '' }` } | ||
| onClick={ this.switchToPreview } | ||
| > | ||
| <span>{ __( 'Preview' ) }</span> | ||
| </button> | ||
| </div> | ||
| </BlockControls> | ||
| <Disabled.Consumer> | ||
| { ( isDisabled ) => ( | ||
| ( isPreview || isDisabled ) ? ( | ||
| <SandBox html={ attributes.content } styles={ styles } /> | ||
| ) : ( | ||
| <PlainText | ||
| value={ attributes.content } | ||
| onChange={ ( content ) => setAttributes( { content } ) } | ||
| placeholder={ __( 'Write HTML…' ) } | ||
| aria-label={ __( 'HTML' ) } | ||
| /> | ||
| ) | ||
| ) } | ||
| </Disabled.Consumer> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
| export default withSelect( ( select ) => { | ||
| const { getEditorSettings } = select( 'core/editor' ); | ||
| return { | ||
| styles: getEditorSettings().styles, | ||
| }; | ||
| } )( HTMLEdit ); |
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1,42 @@ | ||
| export { default as traverse } from './traverse'; | ||
| export { default as urlRewrite } from './transforms/url-rewrite'; | ||
| export { default as wrap } from './transforms/wrap'; | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { map } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { compose } from '@wordpress/compose'; | ||
|
|
||
| /** | ||
| * External dependencies | ||
| */ | ||
| import traverse from './traverse'; | ||
| import urlRewrite from './transforms/url-rewrite'; | ||
| import wrap from './transforms/wrap'; | ||
|
|
||
| /** | ||
| * Convert css rules. | ||
| * | ||
| * @param {Array} styles CSS rules. | ||
| * @param {string} wrapperClassName Wrapper Class Name. | ||
| * @return {Array} converted rules. | ||
| */ | ||
| const transformStyles = ( styles, wrapperClassName = '' ) => { | ||
| return map( styles, ( { css, baseURL } ) => { | ||
| const transforms = []; | ||
| if ( wrapperClassName ) { | ||
| transforms.push( wrap( wrapperClassName ) ); | ||
| } | ||
| if ( baseURL ) { | ||
| transforms.push( urlRewrite( baseURL ) ); | ||
| } | ||
| if ( transforms.length ) { | ||
| return traverse( css, compose( transforms ) ); | ||
| } | ||
|
|
||
| return css; | ||
| } ); | ||
| }; | ||
|
|
||
| export default transformStyles; |
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