Skip to content

Commit 0ccb57a

Browse files
BE-WebdesignBE-Webdesign
committed
Adding metabox support.
Please see `docs/metabox.md` for details. There are still touchups that are needed.
1 parent 9ade57b commit 0ccb57a

File tree

7 files changed

+127
-137
lines changed

7 files changed

+127
-137
lines changed

‎editor/layout/index.js

+2-3
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ import Header from '../header';
1717
import Sidebar from '../sidebar';
1818
import TextEditor from '../modes/text-editor';
1919
import VisualEditor from '../modes/visual-editor';
20-
import MetaBoxes from '../meta-boxes';
20+
// import MetaBoxes from '../meta-boxes';
2121
import UnsavedChangesWarning from '../unsaved-changes-warning';
2222
import DocumentTitle from '../document-title';
2323
import AutosaveMonitor from '../autosave-monitor';
@@ -46,11 +46,10 @@ function Layout( { mode, isSidebarOpened, notices, ...props } ) {
4646
{ mode === 'text' && <TextEditor /> }
4747
{ mode === 'visual' && <VisualEditor /> }
4848
</div>
49-
<MetaBoxes />
49+
<Metabox key="metaboxes" location="normal" isSidebarOpened={ isSidebarOpened } />
5050
</div>
5151
{ isSidebarOpened && <Sidebar /> }
5252
</div>,
53-
<Metabox key="metaboxes" location="normal" isSidebarOpened={ isSidebarOpened } />,
5453
];
5554
}
5655

‎editor/meta-boxes/index.js

-50
This file was deleted.

‎editor/meta-boxes/style.scss

-32
This file was deleted.

‎editor/metaboxes/iframe.js

+78-39
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ import { isEqual } from 'lodash';
88
*/
99
import { __ } from '@wordpress/i18n';
1010
import { Component, findDOMNode } from '@wordpress/element';
11+
import { Panel, PanelBody } from '@wordpress/components';
1112

1213
// @TODO add error handling.
1314
class MetaboxIframe extends Component {
@@ -17,13 +18,15 @@ class MetaboxIframe extends Component {
1718
this.state = {
1819
width: 0,
1920
height: 0,
21+
isOpen: false,
2022
};
2123

2224
this.formData = [];
2325
this.originalFormData = [];
2426
this.form = null;
2527
this.hasLoaded = false;
2628

29+
this.toggle = this.toggle.bind( this );
2730
this.checkMessageForResize = this.checkMessageForResize.bind( this );
2831
this.handleDoubleBuffering = this.handleDoubleBuffering.bind( this );
2932
this.handleMetaboxReload = this.handleMetaboxReload.bind( this );
@@ -32,6 +35,12 @@ class MetaboxIframe extends Component {
3235
this.observeChanges = this.observeChanges.bind( this );
3336
}
3437

38+
toggle() {
39+
this.setState( {
40+
isOpen: ! this.state.isOpen,
41+
} );
42+
}
43+
3544
isFrameAccessible() {
3645
try {
3746
return !! this.node.contentDocument.body;
@@ -51,13 +60,17 @@ class MetaboxIframe extends Component {
5160
}
5261

5362
componentDidMount() {
54-
/**
55-
* Sets up an event listener for resizing. The resizing occurs inside
56-
* the iframe, see gutenberg/assets/js/metabox.js
57-
*/
58-
window.addEventListener( 'message', this.checkMessageForResize, false );
59-
this.node.style.display = 'none';
60-
this.node.addEventListener( 'load', this.observeChanges );
63+
if ( this.isFrameAccessible() ) {
64+
/**
65+
* Sets up an event listener for resizing. The resizing occurs inside
66+
* the iframe, see gutenberg/assets/js/metabox.js
67+
*/
68+
window.addEventListener( 'message', this.checkMessageForResize, false );
69+
70+
// Initially set node to not display anything so that when it loads, we can see it.
71+
this.node.style.display = 'none';
72+
this.node.addEventListener( 'load', this.observeChanges );
73+
}
6174
}
6275

6376
componentWillReceiveProps( nextProps ) {
@@ -81,6 +94,20 @@ class MetaboxIframe extends Component {
8194
}
8295
}
8396

97+
componentDidUpdate() {
98+
if ( this.isFrameAccessible() ) {
99+
/**
100+
* Sets up an event listener for resizing. The resizing occurs inside
101+
* the iframe, see gutenberg/assets/js/metabox.js
102+
*/
103+
window.addEventListener( 'message', this.checkMessageForResize, false );
104+
105+
// Initially set node to not display anything so that when it loads, we can see it.
106+
//this.node.style.display = 'none';
107+
this.node.addEventListener( 'load', this.observeChanges );
108+
}
109+
}
110+
84111
handleDoubleBuffering() {
85112
const iframe = findDOMNode( this.node );
86113
const cloneIframe = findDOMNode( this.clonedNode );
@@ -114,19 +141,21 @@ class MetaboxIframe extends Component {
114141
}
115142

116143
componentWillUnmount() {
117-
const iframe = findDOMNode( this.node );
118-
iframe.removeEventListener( 'message', this.checkMessageForResize );
144+
if ( this.isFrameAccessible() ) {
145+
const iframe = findDOMNode( this.node );
146+
iframe.removeEventListener( 'message', this.checkMessageForResize );
119147

120-
if ( this.dirtyObserver ) {
121-
this.dirtyObserver.disconnect();
122-
}
148+
if ( this.dirtyObserver ) {
149+
this.dirtyObserver.disconnect();
150+
}
123151

124-
if ( this.form !== null ) {
125-
this.form.removeEventListener( 'input', this.checkMetaboxState );
126-
this.form.removeEventListener( 'change', this.checkMetaboxState );
127-
}
152+
if ( this.form !== null ) {
153+
this.form.removeEventListener( 'input', this.checkMetaboxState );
154+
this.form.removeEventListener( 'change', this.checkMetaboxState );
155+
}
128156

129-
this.node.removeEventListener( 'load', this.observeChanges );
157+
this.node.removeEventListener( 'load', this.observeChanges );
158+
}
130159
}
131160

132161
observeChanges() {
@@ -157,7 +186,7 @@ class MetaboxIframe extends Component {
157186
}
158187

159188
getFormData( node ) {
160-
if ( ! this.isFrameAccessible ) {
189+
if ( ! this.isFrameAccessible() ) {
161190
return;
162191
}
163192

@@ -169,19 +198,21 @@ class MetaboxIframe extends Component {
169198
}
170199

171200
checkMetaboxState() {
172-
const entries = this.getFormData( this.node );
201+
if ( this.props.isUpdating !== true ) {
202+
const entries = this.getFormData( this.node );
173203

174-
if ( ! isEqual( this.originalFormData, entries ) ) {
175-
if ( this.props.isDirty === false ) {
176-
this.props.changedMetaboxState( this.props.location, true );
177-
}
204+
if ( ! isEqual( this.originalFormData, entries ) ) {
205+
if ( this.props.isDirty === false ) {
206+
this.props.changedMetaboxState( this.props.location, true );
207+
}
178208

179-
return;
180-
}
209+
return;
210+
}
181211

182-
// If the data is the same as the original and we have metabox marked as dirty.
183-
if ( this.props.isDirty === true ) {
184-
this.props.changedMetaboxState( this.props.location, false );
212+
// If the data is the same as the original and we have metabox marked as dirty.
213+
if ( this.props.isDirty === true ) {
214+
this.props.changedMetaboxState( this.props.location, false );
215+
}
185216
}
186217
}
187218

@@ -231,20 +262,28 @@ class MetaboxIframe extends Component {
231262

232263
render() {
233264
const { location, className, id } = this.props;
265+
const { isOpen } = this.state;
234266

235267
return (
236-
<div id="iframe-container" className={ className }>
237-
<iframe
238-
ref={ ( node ) => {
239-
this.node = node;
240-
} }
268+
<Panel className="editor-meta-boxes">
269+
<PanelBody
241270
title={ __( 'Extended Settings' ) }
242-
key="metabox"
243-
id={ id }
244-
src={ `${ window._wpMetaboxUrl }&metabox=${ location }` }
245-
width={ Math.ceil( this.state.width ) }
246-
height={ Math.ceil( this.state.height ) } />
247-
</div>
271+
opened={ isOpen }
272+
onToggle={ this.toggle }>
273+
<div id="iframe-container" className={ className }>
274+
<iframe
275+
ref={ ( node ) => {
276+
this.node = node;
277+
} }
278+
title={ __( 'Extended Settings' ) }
279+
key="metabox"
280+
id={ id }
281+
src={ `${ window._wpMetaboxUrl }&metabox=${ location }` }
282+
width={ Math.ceil( this.state.width ) }
283+
height={ Math.ceil( this.state.height ) } />
284+
</div>
285+
</PanelBody>
286+
</Panel>
248287
);
249288
}
250289
}

‎editor/metaboxes/metabox-iframe.scss

-6
Original file line numberDiff line numberDiff line change
@@ -28,12 +28,6 @@
2828
border-bottom: 1px solid $light-gray-500;
2929
}
3030

31-
.gutenberg-metaboxes__header {
32-
background-color: #edeff0;
33-
border-bottom: 0;
34-
border-top: 1px solid $light-gray-500;
35-
}
36-
3731
.postbox {
3832
border: 0;
3933
color: $dark-gray-500;

‎editor/metaboxes/style.scss

+47-2
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,53 @@
11
.gutenberg-metabox-iframe {
22
width: 100%;
33
position: relative;
4+
}
5+
6+
.editor-meta-boxes {
7+
border-right-width: 0;
8+
border-left-width: 0;
9+
10+
.components-panel__body-toggle {
11+
background-color: $light-gray-300;
12+
}
13+
14+
.components-panel__body {
15+
padding: 0;
16+
17+
.components-panel__body-title {
18+
margin: 0;
19+
20+
.components-panel__body-toggle {
21+
z-index: 1;
22+
}
23+
}
24+
}
25+
26+
.components-panel__body.is-opened .components-panel__body-toggle {
27+
border-bottom: 1px solid $light-gray-500;
28+
}
29+
}
30+
31+
.editor-meta-boxes__coming-soon {
32+
width: 300px;
33+
padding: #{ $panel-padding * 2 } 0 $panel-padding;
34+
margin: 0 auto;
35+
text-align: center;
36+
37+
&,
38+
h3 {
39+
color: $dark-gray-200;
40+
}
441

5-
&.normal.sidebar-open {
6-
width: calc( 100% - #{ $sidebar-width } );
42+
h3 {
43+
margin: 0.6em 0;
744
}
45+
46+
p {
47+
margin-bottom: 0;
48+
}
49+
}
50+
51+
.is-loading {
52+
background-color: black !important;
853
}

‎lib/metabox-partial-page.php

-5
Original file line numberDiff line numberDiff line change
@@ -328,11 +328,6 @@ function resizeIframe( obj ) {
328328
* opening and closing in the block editor. By default it is open.
329329
*/
330330
?>
331-
<header class="gutenberg-metaboxes__header" style="<?php echo $heading_style; ?>">
332-
<h2 style="font-size: 14px;">Extended Settings</h2>
333-
<!-- @TODO leaving this commented out as it may need to be used. -->
334-
<!--<input name="save" type="submit" class="button button-primary button-large" id="publish" value="Update Settings">-->
335-
</header>
336331
<div id="poststuff" class="sidebar-open">
337332
<div class="gutenberg-metaboxes">
338333
<div id="postbox-container-2" class="postbox-container">

0 commit comments

Comments
 (0)