-
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.
Element / Block API: Add RawHTML component, drop support for HTML str…
…ing block save (#4786) * Element: Add support for RawHTML component Explicit support by element static string renderer. * Element: Render dangerous wrapper if props passed * Blocks: Update blocks to return RawHTML * Block API: Drop support for raw HTML save return * Block API: Document WPBlockType type definition * Block API: Add hook for deprecated raw HTML support * Serializer: Remove save return from more block test Unused anyways, misleading to imply it is. * Serializer: Simplify serialize support to function
- Loading branch information
Showing
17 changed files
with
335 additions
and
72 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
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 |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { includes } from 'lodash'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { Component, RawHTML } from '@wordpress/element'; | ||
| import { addFilter } from '@wordpress/hooks'; | ||
|
|
||
| /** | ||
| * Wrapper component for RawHTML, logging a warning about unsupported raw | ||
| * markup return values from a block's `save` implementation. | ||
| */ | ||
| export class RawHTMLWithWarning extends Component { | ||
| constructor() { | ||
| super( ...arguments ); | ||
|
|
||
| // Disable reason: We're intentionally logging a console warning | ||
| // advising the developer to upgrade usage. | ||
|
|
||
| // eslint-disable-next-line no-console | ||
| console.warn( | ||
| 'Deprecated: Returning raw HTML from block `save` is not supported. ' + | ||
| 'Use `wp.element.RawHTML` component instead.\n\n' + | ||
| 'See: https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/#save' | ||
| ); | ||
| } | ||
|
|
||
| render() { | ||
| const { children } = this.props; | ||
|
|
||
| return <RawHTML>{ children }</RawHTML>; | ||
| } | ||
| } | ||
|
|
||
| /** | ||
| * Override save element for a block, providing support for deprecated HTML | ||
| * return value, logging a warning advising the developer to use the preferred | ||
| * RawHTML component instead. | ||
| * | ||
| * @param {WPElement} element Original block save return. | ||
| * | ||
| * @return {WPElement} Dangerously shimmed block save. | ||
| */ | ||
| export function shimRawHTML( element ) { | ||
| // Still support string return from save, but in the same way any component | ||
| // could render a string, it should be escaped. Therefore, only shim usage | ||
| // which had included some HTML expected to be unescaped. | ||
| if ( typeof element === 'string' && ( includes( element, '<' ) || /^\[.+\]$/.test( element ) ) ) { | ||
| element = <RawHTMLWithWarning children={ element } />; | ||
| } | ||
|
|
||
| return element; | ||
| } | ||
|
|
||
| addFilter( | ||
| 'blocks.getSaveElement', | ||
| 'core/deprecated/shim-dangerous-html', | ||
| shimRawHTML | ||
| ); |
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 |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| /** | ||
| * External dependencies | ||
| */ | ||
| import { shallow } from 'enzyme'; | ||
|
|
||
| /** | ||
| * WordPress dependencies | ||
| */ | ||
| import { createElement } from '@wordpress/element'; | ||
|
|
||
| /** | ||
| * Internal dependencies | ||
| */ | ||
| import { | ||
| RawHTMLWithWarning, | ||
| shimRawHTML, | ||
| } from '../deprecated'; | ||
|
|
||
| describe( 'deprecated', () => { | ||
| describe( 'RawHTMLWithWarning', () => { | ||
| it( 'warns on mount', () => { | ||
| shallow( <RawHTMLWithWarning /> ); | ||
|
|
||
| expect( console ).toHaveWarned(); | ||
| } ); | ||
|
|
||
| it( 'renders RawHTML', () => { | ||
| const wrapper = shallow( | ||
| <RawHTMLWithWarning> | ||
| Scary! | ||
| </RawHTMLWithWarning> | ||
| ); | ||
|
|
||
| expect( console ).toHaveWarned(); | ||
| expect( wrapper.name() ).toBe( 'RawHTML' ); | ||
| expect( wrapper.find( 'RawHTML' ).prop( 'children' ) ).toBe( 'Scary!' ); | ||
| } ); | ||
| } ); | ||
|
|
||
| describe( 'shimRawHTML()', () => { | ||
| it( 'should do nothing to elements', () => { | ||
| const original = createElement( 'div' ); | ||
| const result = shimRawHTML( original ); | ||
|
|
||
| expect( result ).toBe( original ); | ||
| } ); | ||
|
|
||
| it( 'should do nothing to non-HTML strings', () => { | ||
| const original = 'Not so scary'; | ||
| const result = shimRawHTML( original ); | ||
|
|
||
| expect( result ).toBe( original ); | ||
| } ); | ||
|
|
||
| it( 'replace HTML strings with RawHTMLWithWarning', () => { | ||
| const original = '<p>So scary!</p>'; | ||
| const result = shimRawHTML( original ); | ||
|
|
||
| expect( result.type ).toBe( RawHTMLWithWarning ); | ||
| expect( result.props.children ).toBe( original ); | ||
| } ); | ||
|
|
||
| it( 'replace shortcode strings with RawHTMLWithWarning', () => { | ||
| const original = '[myshortcode]Hello[/myshortcode]'; | ||
| const result = shimRawHTML( original ); | ||
|
|
||
| expect( result.type ).toBe( RawHTMLWithWarning ); | ||
| expect( result.props.children ).toBe( original ); | ||
| } ); | ||
| } ); | ||
| } ); |
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.