Skip to content

Commit 3722db3

Browse files
ZebulanStanphillZebulanStanphill
committed
Polish Custom HTML block.
1 parent 2293e34 commit 3722db3

File tree

5 files changed

+97
-66
lines changed

5 files changed

+97
-66
lines changed

‎package-lock.json‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/block-library/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,7 @@
5858
"lodash": "^4.17.19",
5959
"memize": "^1.1.0",
6060
"moment": "^2.22.1",
61+
"react-autosize-textarea": "^3.0.2",
6162
"react-easy-crop": "^3.0.0",
6263
"reakit": "1.1.0",
6364
"tinycolor2": "^1.4.1"

‎packages/block-library/src/html/edit.js‎

Lines changed: 59 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,44 +1,50 @@
1+
/**
2+
* External dependencies
3+
*/
4+
import classnames from 'classnames';
5+
import TextareaAutosize from 'react-autosize-textarea';
6+
17
/**
28
* WordPress dependencies
39
*/
4-
import { __ } from '@wordpress/i18n';
5-
import { useState } from '@wordpress/element';
610
import {
711
BlockControls,
8-
PlainText,
912
transformStyles,
1013
useBlockProps,
1114
} from '@wordpress/block-editor';
1215
import {
13-
ToolbarButton,
1416
Disabled,
1517
SandBox,
18+
ToolbarButton,
1619
ToolbarGroup,
1720
} from '@wordpress/components';
1821
import { useSelect } from '@wordpress/data';
22+
import { useState } from '@wordpress/element';
23+
import { __ } from '@wordpress/i18n';
1924

20-
export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
21-
const [ isPreview, setIsPreview ] = useState();
25+
// Default styles used to unset some of the styles
26+
// that might be inherited from the editor style.
27+
const DEFAULT_STYLES = `
28+
html,body,:root {
29+
margin: 0 !important;
30+
padding: 0 !important;
31+
overflow: visible !important;
32+
min-height: auto !important;
33+
}
34+
`;
2235

23-
const styles = useSelect( ( select ) => {
24-
// Default styles used to unset some of the styles
25-
// that might be inherited from the editor style.
26-
const defaultStyles = `
27-
html,body,:root {
28-
margin: 0 !important;
29-
padding: 0 !important;
30-
overflow: visible !important;
31-
min-height: auto !important;
32-
}
33-
`;
36+
export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
37+
const [ isPreview, setIsPreview ] = useState( false );
3438

35-
return [
36-
defaultStyles,
39+
const styles = useSelect(
40+
( select ) => [
41+
DEFAULT_STYLES,
3742
...transformStyles(
3843
select( 'core/block-editor' ).getSettings().styles
3944
),
40-
];
41-
}, [] );
45+
],
46+
[]
47+
);
4248

4349
function switchToPreview() {
4450
setIsPreview( true );
@@ -48,55 +54,65 @@ export default function HTMLEdit( { attributes, setAttributes, isSelected } ) {
4854
setIsPreview( false );
4955
}
5056

57+
const blockProps = useBlockProps( { className: 'block-library-html' } );
58+
5159
return (
52-
<div { ...useBlockProps() }>
60+
<>
5361
<BlockControls>
5462
<ToolbarGroup>
5563
<ToolbarButton
56-
className="components-tab-button"
5764
isPressed={ ! isPreview }
5865
onClick={ switchToHTML }
5966
>
60-
<span>HTML</span>
67+
HTML
6168
</ToolbarButton>
6269
<ToolbarButton
63-
className="components-tab-button"
6470
isPressed={ isPreview }
6571
onClick={ switchToPreview }
6672
>
67-
<span>{ __( 'Preview' ) }</span>
73+
{ __( 'Preview' ) }
6874
</ToolbarButton>
6975
</ToolbarGroup>
7076
</BlockControls>
7177
<Disabled.Consumer>
7278
{ ( isDisabled ) =>
7379
isPreview || isDisabled ? (
74-
<>
80+
<div { ...blockProps }>
7581
<SandBox
7682
html={ attributes.content }
7783
styles={ styles }
7884
/>
79-
{ /*
80-
An overlay is added when the block is not selected in order to register click events.
81-
Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
82-
difficult to reselect the block.
83-
*/ }
85+
{ /*
86+
An overlay is added when the block is not selected in order to register click events.
87+
Some browsers do not bubble up the clicks from the sandboxed iframe, which makes it
88+
difficult to reselect the block.
89+
*/ }
8490
{ ! isSelected && (
85-
<div className="block-library-html__preview-overlay"></div>
91+
<div className="block-library-html__preview-overlay" />
8692
) }
87-
</>
93+
</div>
8894
) : (
89-
<PlainText
90-
value={ attributes.content }
91-
onChange={ ( content ) =>
92-
setAttributes( { content } )
93-
}
94-
placeholder={ __( 'Write HTML…' ) }
95-
aria-label={ __( 'HTML' ) }
96-
/>
95+
<div
96+
{ ...blockProps }
97+
className={ classnames(
98+
blockProps.className,
99+
'is-html-editor'
100+
) }
101+
>
102+
<TextareaAutosize
103+
aria-label={ __( 'HTML' ) }
104+
value={ attributes.content }
105+
onChange={ ( event ) =>
106+
setAttributes( {
107+
content: event.target.value,
108+
} )
109+
}
110+
placeholder={ __( 'Write HTML…' ) }
111+
/>
112+
</div>
97113
)
98114
}
99115
</Disabled.Consumer>
100-
</div>
116+
</>
101117
);
102118
}

‎packages/block-library/src/html/editor.scss‎

Lines changed: 34 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,37 @@
1-
.wp-block-html {
2-
margin-bottom: $default-block-margin;
1+
.block-library-html {
2+
&.is-html-editor {
3+
border-radius: $radius-block-ui;
4+
box-shadow: inset 0 0 0 $border-width $gray-900;
5+
/* Padding to prevent the textarea's scroll bar from overlapping the
6+
border. This also makes it easier to overlap the block wrapper's
7+
box-shadow with the textarea's focus box-shadow. */
8+
padding: 1px;
9+
10+
> textarea {
11+
display: block;
12+
font-family: $editor-html-font;
13+
background-color: $white;
14+
color: $gray-900;
15+
padding: $grid-unit-15;
16+
border: none;
17+
border-radius: $radius-block-ui;
18+
max-height: 250px;
19+
width: 100%;
20+
overflow-y: auto;
21+
22+
// Fonts smaller than 16px causes mobile safari to zoom.
23+
font-size: $mobile-text-min-font-size;
24+
25+
&:focus {
26+
box-shadow: 0 0 0 $border-width-focus var(--wp-admin-theme-color);
27+
28+
// Show a light color for dark themes.
29+
.is-dark-theme & {
30+
box-shadow: 0 0 0 $border-width-focus $dark-theme-focus;
31+
}
32+
}
33+
}
34+
}
335

436
.block-library-html__preview-overlay {
537
position: absolute;
@@ -8,23 +40,4 @@
840
top: 0;
941
left: 0;
1042
}
11-
12-
.block-editor-plain-text {
13-
font-family: $editor-html-font;
14-
color: $gray-900;
15-
padding: 0.8em 1em;
16-
border: 1px solid $gray-300;
17-
border-radius: 4px;
18-
max-height: 250px;
19-
20-
/* Fonts smaller than 16px causes mobile safari to zoom. */
21-
font-size: $mobile-text-min-font-size;
22-
@include break-small {
23-
font-size: $default-font-size;
24-
}
25-
26-
&:focus {
27-
box-shadow: none;
28-
}
29-
}
3043
}

‎packages/block-library/src/html/index.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,14 @@
11
/**
22
* WordPress dependencies
33
*/
4-
import { __ } from '@wordpress/i18n';
54
import { html as icon } from '@wordpress/icons';
5+
import { __ } from '@wordpress/i18n';
66

77
/**
88
* Internal dependencies
99
*/
10-
import edit from './edit';
1110
import metadata from './block.json';
11+
import edit from './edit';
1212
import save from './save';
1313
import transforms from './transforms';
1414

0 commit comments

Comments
 (0)