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

Jump to bottom

Fix compatibility with lightBlockWrapper for Code block in Gutenberg 7.9 #73

Merged
merged 10 commits into from
Apr 22, 2020
Merged

Fix compatibility with lightBlockWrapper for Code block in Gutenberg 7.9 #73

Changes from 2 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
28aafe1
Fix compatibility with lightBlockWrapper for Code block in Gutenberg 7.9
westonruter Apr 21, 2020
bef1891
Eliminate duplication of props
westonruter Apr 21, 2020
be012d7
Remove spurious character
westonruter Apr 21, 2020
019ea73
Merge branch 'master' of github.com:westonruter/syntax-highlighting-c…
westonruter Apr 22, 2020
9912545
Merge branch 'fix/gutenberg-compat-light-block-wrapper' of github.com…
westonruter Apr 22, 2020
6aa9eb2
Fix Gutenberg 7.9+ React refs w/7.8 support too
allejo Apr 22, 2020
3fe6fe6
Apply prettier changes to src/index.js
westonruter Apr 22, 2020
13493c2
Merge branch 'master' of github.com:westonruter/syntax-highlighting-c…
westonruter Apr 22, 2020
af22150
Make use of hasBlockSupport selector
westonruter Apr 22, 2020
f5eca87
Don't pass unknown props to PlainText
allejo Apr 22, 2020
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
32 changes: 24 additions & 8 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import { addFilter } from '@wordpress/hooks';
import { PlainText, InspectorControls } from '@wordpress/editor';
import { SelectControl, CheckboxControl, PanelBody, PanelRow } from '@wordpress/components';
import { Fragment } from '@wordpress/element';
import * as BlockEditor from '@wordpress/block-editor';

/**
* Internal dependencies
Expand All @@ -28,6 +29,8 @@ const extendCodeBlockWithSyntaxHighlighting = ( settings ) => {
return settings;
}

const useLightBlockWrapper = settings.supports && settings.supports.lightBlockWrapper && BlockEditor.__experimentalBlock && BlockEditor.__experimentalBlock.pre;

return {
...settings,

Expand Down Expand Up @@ -55,6 +58,13 @@ const extendCodeBlockWithSyntaxHighlighting = ( settings ) => {
( languageOption ) => languageOption.label.toLowerCase()
);

const plainTextProps = {
value: attributes.content,
onChange: ( content ) => setAttributes( { content } ),
placeholder: __( 'Write 2code…', 'syntax-highlighting-code-block' ),
westonruter marked this conversation as resolved.
Show resolved Hide resolved
'aria-label': __( 'Code', 'syntax-highlighting-code-block' ),
};

return <Fragment>
<InspectorControls key="controls">
<PanelBody
Expand Down Expand Up @@ -83,14 +93,20 @@ const extendCodeBlockWithSyntaxHighlighting = ( settings ) => {
</PanelRow>
</PanelBody>
</InspectorControls>
<div key="editor-wrapper" className={ className }>
<PlainText
value={ attributes.content }
onChange={ ( content ) => setAttributes( { content } ) }
placeholder={ __( 'Write code…', 'syntax-highlighting-code-block' ) }
aria-label={ __( 'Code', 'syntax-highlighting-code-block' ) }
/>
</div>
{
useLightBlockWrapper ?
// This must be kept in sync with <https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/code/edit.js>.
<BlockEditor.__experimentalBlock.pre>
<PlainText
{ ...plainTextProps }
__experimentalVersion={ 2 }
tagName="code"
/>
</BlockEditor.__experimentalBlock.pre> :
<div key="editor-wrapper" className={ className }>
<PlainText { ...plainTextProps } />
</div>
}
</Fragment>;
},

Expand Down