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

Move the HTML block into the blocks library package #10396

Merged
merged 3 commits into from
Oct 9, 2018
Merged

Move the HTML block into the blocks library package #10396

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0df814a
Move the HTML block into the blocks library package
youknowriad Oct 8, 2018
c303621
Move the Classic block to the packages (#10397)
youknowriad Oct 9, 2018
1b56541
Update the CHANGELOG to include the HMTL block
youknowriad Oct 9, 2018
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
25 changes: 0 additions & 25 deletions block-library/html/editor.scss
View file
Open in desktop

This file was deleted.

22 changes: 0 additions & 22 deletions block-library/html/test/__snapshots__/index.js.snap
View file
Open in desktop

This file was deleted.

4 changes: 1 addition & 3 deletions block-library/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import * as column from '../packages/block-library/src/columns/column';
import * as coverImage from '../packages/block-library/src/cover-image';
import * as embed from '../packages/block-library/src/embed';
import * as file from '../packages/block-library/src/file';
import * as html from '../packages/block-library/src/html';
import * as latestComments from '../packages/block-library/src/latest-comments';
import * as latestPosts from '../packages/block-library/src/latest-posts';
import * as list from '../packages/block-library/src/list';
Expand All @@ -49,9 +50,6 @@ import * as video from '../packages/block-library/src/video';
// The freeform block can't be moved to the "npm" packages folder because it requires the wp.oldEditor global.
import * as freeform from './freeform';

// The HTML block can't be moved to the "npm" packages folder because it requires the CodeEditor component.
import * as html from './html';

export const registerCoreBlocks = () => {
[
// Common blocks are grouped at the top to prioritize their display
Expand Down
6 changes: 6 additions & 0 deletions components/code-editor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
*/
import { Component } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import deprecated from '@wordpress/deprecated';

/**
* Internal dependencies
Expand Down Expand Up @@ -76,6 +77,11 @@ class LazyCodeEditor extends Component {
this.state = {
status: 'pending',
};

deprecated( 'wp.components.CodeEditor', {
version: '4.2',
alternative: 'wp.codeEditor directly or any alternative React component for syntax highlighting',
Copy link
Member

Choose a reason for hiding this comment

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

This is going to be confusing in the context of npm package which is out of WordPress context. Not sure if this is bad or not, just noting.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

yes, we have a bunch of those and we need to experiment with making the messages opt-in or something and only enable in WP

} );
}

componentDidMount() {
Expand Down
1 change: 1 addition & 0 deletions docs/reference/deprecated.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ Gutenberg's deprecation policy is intended to support backwards-compatibility fo
- `getMetaBox` selector (`core/edit-post`) has been removed. Use `isMetaBoxLocationActive` selector (`core/edit-post`) instead.
- Attribute type coercion has been removed. Omit the source to preserve type via serialized comment demarcation.
- `mediaDetails` in object passed to `onFileChange` callback of `wp.editor.mediaUpload`. Please use `media_details` property instead.
- `wp.components.CodeEditor` has been removed. Used `wp.codeEditor` directly instead.

## 4.1.0

Expand Down
1 change: 1 addition & 0 deletions packages/block-library/src/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
@import "./file/editor.scss";
@import "./gallery/editor.scss";
@import "./heading/editor.scss";
@import "./html/editor.scss";
@import "./image/editor.scss";
@import "./latest-comments/editor.scss";
@import "./latest-posts/editor.scss";
Expand Down
12 changes: 12 additions & 0 deletions packages/block-library/src/html/editor.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
.wp-block-html .editor-plain-text {
font-family: $editor-html-font;
font-size: $text-editor-font-size;
color: $dark-gray-800;
padding: 0.8em 1em;
border: 1px solid $light-gray-500;
border-radius: 4px;

&:focus {
box-shadow: none;
}
}
17 changes: 6 additions & 11 deletions block-library/html/index.js → packages/block-library/src/html/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,16 +3,11 @@
*/
import { RawHTML } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import { Disabled, SandBox, CodeEditor } from '@wordpress/components';
import { Disabled, SandBox } from '@wordpress/components';
import { getPhrasingContentSchema } from '@wordpress/blocks';
import { BlockControls } from '@wordpress/editor';
import { BlockControls, PlainText } from '@wordpress/editor';
import { withState } from '@wordpress/compose';

/**
* Internal dependencies
*/
import './editor.scss';

export const name = 'core/html';

export const settings = {
Expand Down Expand Up @@ -63,7 +58,7 @@ export const settings = {

edit: withState( {
isPreview: false,
} )( ( { attributes, setAttributes, setState, isSelected, toggleSelection, isPreview } ) => (
} )( ( { attributes, setAttributes, setState, isPreview } ) => (
<div className="wp-block-html">
<BlockControls>
<div className="components-toolbar">
Expand All @@ -86,11 +81,11 @@ export const settings = {
( isPreview || isDisabled ) ? (
<SandBox html={ attributes.content } />
) : (
<CodeEditor
<PlainText
value={ attributes.content }
focus={ isSelected }
onFocus={ toggleSelection }
onChange={ ( content ) => setAttributes( { content } ) }
placeholder={ __( 'Write HTML…' ) }
aria-label={ __( 'HTML' ) }
/>
)
) }
Expand Down
14 changes: 14 additions & 0 deletions packages/block-library/src/html/test/__snapshots__/index.js.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`core/html block edit matches snapshot 1`] = `
<div
class="wp-block-html"
>
<textarea
aria-label="HTML"
class="editor-plain-text"
placeholder="Write HTML…"
rows="1"
/>
</div>
`;
2 changes: 1 addition & 1 deletion block-library/html/test/index.js → ...ages/block-library/src/html/test/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
* Internal dependencies
*/
import { name, settings } from '../';
import { blockEditRender } from '../../../packages/block-library/src/test/helpers';
import { blockEditRender } from '../../test/helpers';

describe( 'core/html', () => {
test( 'block edit matches snapshot', () => {
Expand Down
2 changes: 2 additions & 0 deletions packages/block-library/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import * as column from './columns/column';
import * as coverImage from './cover-image';
import * as embed from './embed';
import * as file from './file';
import * as html from './html';
import * as latestComments from './latest-comments';
import * as latestPosts from './latest-posts';
import * as list from './list';
Expand Down Expand Up @@ -68,6 +69,7 @@ export const registerCoreBlocks = () => {
...embed.common,
...embed.others,
file,
html,
latestComments,
latestPosts,
more,
Expand Down