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

Refactor block JS code #171

Merged
merged 3 commits into from
Dec 17, 2020
Merged

Refactor block JS code #171

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
51a2378
Break up blocks js
yscik Nov 13, 2020
05befd2
Convert settings to JSX and break out to dedicated file
yscik Nov 13, 2020
a9f11b3
Move block to dedicated folder
yscik Nov 13, 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
304 changes: 3 additions & 301 deletions src/blocks.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,306 +2,8 @@
* BLOCK: SyntaxHighlighter Evolved (syntaxhighlighter/code)
*/

/**
* WordPress dependencies
*/
import { __ } from '@wordpress/i18n';
import { registerBlockType, createBlock } from '@wordpress/blocks';
import {
PanelBody,
PanelRow,
SelectControl,
ToggleControl,
TextControl
} from '@wordpress/components';
import { PlainText, InspectorControls } from '@wordpress/editor';

/**
* Internal dependencies
*/
import deprecated from './deprecated';
import save from './save';

registerBlockType( 'syntaxhighlighter/code', {
title: __( 'SyntaxHighlighter Code', 'syntaxhighlighter' ),

description: __( 'Adds syntax highlighting to source code (front end only).', 'syntaxhighlighter' ),

icon: 'editor-code',

category: 'formatting',

keywords: [
// translators: Keyword that user might search for when trying to locate block.
__( 'Source', 'syntaxhighlighter' ),
// translators: Keyword that user might search for when trying to locate block.
__( 'Program', 'syntaxhighlighter' ),
// translators: Keyword that user might search for when trying to locate block.
__( 'Develop', 'syntaxhighlighter' ),
],

attributes: {
content: {
type: 'string',
source: 'text',
selector: 'code',
},

language: {
type: 'string',
default: syntaxHighlighterData.settings.language.default,
},

lineNumbers: {
type: 'boolean',
default: syntaxHighlighterData.settings.lineNumbers.default,
},

firstLineNumber: {
type: 'string',
default: syntaxHighlighterData.settings.firstLineNumber.default,
},

highlightLines: {
type: 'string',
},

wrapLines: {
type: 'boolean',
default: syntaxHighlighterData.settings.wrapLines.default,
},

makeURLsClickable: {
type: 'boolean',
default: syntaxHighlighterData.settings.makeURLsClickable.default,
},

quickCode: {
type: 'boolean',
default: syntaxHighlighterData.settings.quickCode.default,
},
},

supports: {
html: false,
},

transforms: {
from: [
{
type: 'enter',
regExp: /^```$/,
transform: () => createBlock( 'syntaxhighlighter/code' ),
},
{
type: 'raw',
isMatch: ( node ) => (
node.nodeName === 'PRE' &&
node.children.length === 1 &&
node.firstChild.nodeName === 'CODE'
),
schema: {
pre: {
children: {
code: {
children: {
'#text': {},
},
},
},
},
},
},
{
type: 'block',
blocks: [ 'core/code' ],
transform: ( { content } ) => {
return createBlock( 'syntaxhighlighter/code', { content } );
},
},
],
to: [
{
type: 'block',
blocks: [ 'core/code' ],
transform: ( { content } ) => {
return createBlock( 'core/code', { content } );
},
},
],
},

edit( { attributes, setAttributes, className } ) {
const {
content,
language,
lineNumbers,
firstLineNumber,
highlightLines,
wrapLines,
makeURLsClickable,
quickCode
} = attributes;

let blockSettingRows = [];

// Language
if ( syntaxHighlighterData.settings.language.supported ) {
let options = [];
for ( let brush in syntaxHighlighterData.brushes ) {
options.push( {
label: syntaxHighlighterData.brushes[ brush ],
value: brush,
} );
}

blockSettingRows.push(
wp.element.createElement(
PanelRow,
null,
wp.element.createElement(
SelectControl,
{
label: __( 'Code Language', 'syntaxhighlighter' ),
value: language,
options: options,
onChange: ( language ) => setAttributes( { language } ),
}
)
)
);
}

// Line numbers
if ( syntaxHighlighterData.settings.lineNumbers.supported ) {
blockSettingRows.push(
wp.element.createElement(
PanelRow,
null,
wp.element.createElement(
ToggleControl,
{
label: __( 'Show Line Numbers', 'syntaxhighlighter' ),
checked: lineNumbers,
onChange: ( lineNumbers ) => setAttributes( { lineNumbers } ),
}
)
)
);
}

// First line number
if ( lineNumbers && syntaxHighlighterData.settings.firstLineNumber.supported ) {
blockSettingRows.push(
wp.element.createElement(
PanelRow,
null,
wp.element.createElement(
TextControl,
{
label: __( 'First Line Number', 'syntaxhighlighter' ),
type: 'number',
value: firstLineNumber,
onChange: ( firstLineNumber ) => setAttributes( { firstLineNumber } ),
min: 1,
max: 100000,
}
)
)
);
}

// Highlight line(s)
if ( syntaxHighlighterData.settings.highlightLines.supported ) {
blockSettingRows.push(
wp.element.createElement(
TextControl,
{
label: __( 'Highlight Lines', 'syntaxhighlighter' ),
value: highlightLines,
help: __( 'A comma-separated list of line numbers to highlight. Can also be a range. Example: 1,5,10-20', 'syntaxhighlighter' ),
onChange: ( highlightLines ) => setAttributes( { highlightLines } ),
}
)
);
}

// Wrap long lines
if ( syntaxHighlighterData.settings.wrapLines.supported ) {
blockSettingRows.push(
wp.element.createElement(
PanelRow,
null,
wp.element.createElement(
ToggleControl,
{
label: __( 'Wrap Long Lines', 'syntaxhighlighter' ),
checked: wrapLines,
onChange: ( wrapLines ) => setAttributes( { wrapLines } ),
}
)
)
);
}

// Make URLs clickable
if ( syntaxHighlighterData.settings.makeURLsClickable.supported ) {
blockSettingRows.push(
wp.element.createElement(
PanelRow,
null,
wp.element.createElement(
ToggleControl,
{
label: __( 'Make URLs Clickable', 'syntaxhighlighter' ),
checked: makeURLsClickable,
onChange: ( makeURLsClickable ) => setAttributes( { makeURLsClickable } ),
}
)
)
);
}

// Quick code
if ( syntaxHighlighterData.settings.quickCode.supported ) {
blockSettingRows.push(
wp.element.createElement(
PanelRow,
null,
wp.element.createElement(
ToggleControl,
{
label: __( 'Enable edit mode on double click', 'syntaxhighlighter' ),
checked: quickCode,
onChange: ( quickCode ) => setAttributes( { quickCode } ),
}
)
)
);
}

const blockSettings = (
<InspectorControls key="syntaxHighlighterInspectorControls">
<PanelBody title={ __( 'Settings', 'syntaxhighlighter' ) }>
{ blockSettingRows }
</PanelBody>
</InspectorControls>
)

const editView = (
<div className={ className + ' wp-block-code' }>
<PlainText
value={ content }
onChange={ ( content ) => setAttributes( { content } ) }
placeholder={ __( 'Tip: you can choose a code language from the block settings.', 'syntaxhighlighter' ) }
aria-label={ __( 'SyntaxHighlighter Code', 'syntaxhighlighter' ) }
/>
</div>
)
import { registerBlockType } from '@wordpress/blocks';

return [ blockSettings, editView ];
},
import codeBlock from './code-block';

save,
deprecated,
} );
registerBlockType( 'syntaxhighlighter/code', codeBlock );
0 src/deprecated.js → src/code-block/deprecated.js
View file
Open in desktop
File renamed without changes.
26 changes: 26 additions & 0 deletions src/code-block/edit.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@

import { PlainText } from '@wordpress/editor';
import { __ } from '@wordpress/i18n';
import settings from './settings';

export default function editSyntaxHighlighterBlock( { attributes, setAttributes, className } ) {
const {
content,
} = attributes;

const editView = <div className={ className + ' wp-block-code' }>
<PlainText
value={ content }
onChange={ ( nextContent ) => setAttributes( { content: nextContent } ) }
placeholder={ __( 'Tip: you can choose a code language from the block settings.', 'syntaxhighlighter' ) }
aria-label={ __( 'SyntaxHighlighter Code', 'syntaxhighlighter' ) }
/>
</div>;

return (
[
settings( { attributes, setAttributes } ),
editView,
]
);
}
Loading