Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Custom HTML Block: apply editor-styles to preview mode. #13080

Merged
merged 10 commits into from
Jan 18, 2019
Merged

Custom HTML Block: apply editor-styles to preview mode. #13080

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
71ef6f7
use compose
torounit Dec 22, 2018
af58cf2
Add css prop to <Sandbox>
torounit Dec 22, 2018
9e3d368
add editor styles to <Sandbox>
torounit Dec 22, 2018
27c19e4
skip not define style. (ex. CSSMediaRule )
torounit Jan 4, 2019
bd7b2a6
styles prop instead of css.
torounit Jan 4, 2019
457d54e
cached editor styles.
torounit Jan 9, 2019
fc6c73b
separate file
torounit Jan 9, 2019
2ba5938
separate file
torounit Jan 9, 2019
3daa3f2
create and use HTMLEdit class. compute style on mounted.
torounit Jan 10, 2019
04ef330
Tweak the html block's editor styles
youknowriad Jan 11, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
36 changes: 30 additions & 6 deletions packages/block-library/src/html/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,18 @@
/**
* External dependencies
*/
import { map } from 'lodash';

/**
* WordPress dependencies
*/
import { RawHTML } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Disabled, SandBox, SVG, Path } from '@wordpress/components';
import { getPhrasingContentSchema } from '@wordpress/blocks';
import { BlockControls, PlainText } from '@wordpress/editor';
import { withState } from '@wordpress/compose';
import { BlockControls, PlainText, urlRewrite, traverse } from '@wordpress/editor';
import { compose, withState } from '@wordpress/compose';
import { withSelect } from '@wordpress/data';

export const name = 'core/html';

Expand Down Expand Up @@ -56,9 +62,27 @@ export const settings = {
],
},

edit: withState( {
isPreview: false,
} )( ( { attributes, setAttributes, setState, isPreview } ) => (
edit: compose( [
withSelect( ( select ) => {
const { getEditorSettings } = select( 'core/editor' );
const styles = getEditorSettings().styles;
if ( styles && styles.length > 0 ) {
return {
styles: map( styles, ( { css, baseURL } ) => {
if ( ! baseURL ) {
return css;
}
return traverse( css, urlRewrite( baseURL ) );
} ),
};
}

return {
styles: [],
};
} ),
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This code is not the fastest one and the main issue is that it will be executed on each subscribe (on each state change). Should we mirror how it's done in the EditorProvider component (when mounting the component)?

Also there's some duplication between these two components. Do you think we can extract the logic somehow?

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@youknowriad

Does it mean you need to cache styles?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I mean just compute the styles prop on initial mount of the component, store it as state or something and avoid computing it on each render.

withState( { isPreview: false } ),
] )( ( { attributes, setAttributes, setState, isPreview, styles } ) => (
<div className="wp-block-html">
<BlockControls>
<div className="components-toolbar">
Expand All @@ -79,7 +103,7 @@ export const settings = {
<Disabled.Consumer>
{ ( isDisabled ) => (
( isPreview || isDisabled ) ? (
<SandBox html={ attributes.content } />
<SandBox html={ attributes.content } styles={ styles } />
) : (
<PlainText
value={ attributes.content }
Expand Down
15 changes: 10 additions & 5 deletions packages/components/src/sandbox/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -110,11 +110,13 @@ class Sandbox extends Component {
// the iframe root and interfere with our mechanism for
// determining the unconstrained page bounds.
function removeViewportStyles( ruleOrNode ) {
[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {
if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {
ruleOrNode.style[ style ] = '';
}
} );
if( ruleOrNode.style ) {
[ 'width', 'height', 'minHeight', 'maxHeight' ].forEach( function( style ) {
if ( /^\\d+(vmin|vmax|vh|vw)$/.test( ruleOrNode.style[ style ] ) ) {
ruleOrNode.style[ style ] = '';
}
} );
}
}

Array.prototype.forEach.call( document.querySelectorAll( '[style]' ), removeViewportStyles );
Expand Down Expand Up @@ -165,6 +167,9 @@ class Sandbox extends Component {
<head>
<title>{ this.props.title }</title>
<style dangerouslySetInnerHTML={ { __html: style } } />
{ ( this.props.styles && this.props.styles.map(
( rules, i ) => <style key={ i } dangerouslySetInnerHTML={ { __html: rules } } />
) ) }
</head>
<body data-resizable-iframe-connected="data-resizable-iframe-connected" className={ this.props.type }>
<div dangerouslySetInnerHTML={ { __html: this.props.html } } />
Expand Down
1 change: 1 addition & 0 deletions packages/editor/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,3 +16,4 @@ import './hooks';

export * from './components';
export * from './utils';
export * from './editor-styles';