Add block editor field and assets handled inside Meta Box Builder

.gitignore

@@ -4,4 +4,5 @@ node_modules
 *.zip
 *.LICENSE.txt
 
-# assets/js/build
+# assets/js/build
+*.app.js

assets/app/components/Editor/FieldPreview.js

@@ -158,6 +158,7 @@ const FieldPreview = ( { field: f, parent = '', ...fieldActions } ) => {
 		'user',
 		'video',
 		'wysiwyg',
+		'block_editor',
 
 		// Premium field types.
 		'group',

assets/app/components/Editor/FieldTypePreview/BlockEditor.js

@@ -0,0 +1,12 @@
+import { __ } from '@wordpress/i18n';
+
+const BlockEditor = () => (
+	<div className="rwmb-block-editor-preview">
+		<div className="rwmb-block-editor-preview__placeholder">
+			{ __( 'Block Editor field preview', 'meta-box-builder' ) }
+		</div>
+	</div>
+);
+
+export default BlockEditor;
+

assets/app/functions.js

@@ -101,6 +101,7 @@ export const getFieldIcon = type => {
 		url: link,
 		video: captureVideo,
 		wysiwyg: typography,
+		block_editor: typography,
 		group: group,
 		tab: archive,
 	};

assets/build/app.asset.php

@@ -1 +1 @@
-<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-url'), 'version' => '968ec612c2fdf3eb38f2');
+<?php return array('dependencies' => array('lodash', 'react', 'react-dom', 'wp-api-fetch', 'wp-components', 'wp-compose', 'wp-element', 'wp-i18n', 'wp-primitives', 'wp-url'), 'version' => 'f820f530b0429c15d3cf');

assets/css/block-editor.css

@@ -0,0 +1,41 @@
+.rwmb-block-editor-wrapper {
+	margin: 12px 0;
+}
+
+.rwmb-block-editor-wrapper .components-popover {
+	z-index: 1000000;
+}
+
+.rwmb-block-editor-wrapper .components-modal__screen-overlay {
+	z-index: 1000001;
+}
+.rwmb-block-editor-wrapper {
+	margin: 12px 0;
+}
+
+.rwmb-block-editor-wrapper .rwmb-block-editor-root {
+	position: relative;
+	min-height: 320px;
+	border: 1px solid #dcdcde;
+	border-radius: 4px;
+	background-color: #fff;
+	overflow: hidden;
+}
+
+.rwmb-block-editor-root:empty::before {
+	content: attr(data-loading-label);
+	display: block;
+	padding: 24px;
+	color: #757575;
+	text-align: center;
+	font-style: italic;
+}
+
+.rwmb-block-editor-wrapper .components-popover {
+	z-index: 1000000;
+}
+
+.rwmb-block-editor-wrapper .components-modal__screen-overlay {
+	z-index: 1000001;
+}
+

assets/js/block-editor.js

@@ -0,0 +1,247 @@
+( function() {
+	'use strict';
+
+	if ( typeof wp === 'undefined' ) {
+		return;
+	}
+
+	const lodashGlobal = window.lodash || window._;
+	if ( lodashGlobal ) {
+		if ( ! window._ ) {
+			window._ = lodashGlobal;
+		}
+
+		if ( typeof window._.pluck !== 'function' && typeof window._.map === 'function' ) {
+			window._.pluck = ( collection, property ) => window._.map( collection, property );
+		}
+
+		if ( typeof window._.contains !== 'function' && typeof window._.includes === 'function' ) {
+			window._.contains = window._.includes;
+		}
+	}
+
+	const parseSettings = value => {
+		if ( ! value ) {
+			return {};
+		}
+
+		try {
+			return JSON.parse( value );
+		} catch ( error ) {
+			console.error( 'RWMB Block Editor: failed to parse settings.', error );
+			return {};
+		}
+	};
+
+	const initWrapper = ( wrapper, attachEditor ) => {
+		if ( ! wrapper || wrapper.dataset.initialized === 'true' ) {
+			return;
+		}
+
+		const textarea = wrapper.querySelector( 'textarea' );
+		if ( ! textarea ) {
+			return;
+		}
+
+		const settings = parseSettings( wrapper.getAttribute( 'data-settings' ) );
+
+		try {
+			attachEditor( textarea, settings );
+			wrapper.dataset.initialized = 'true';
+		} catch ( error ) {
+			console.error( 'RWMB Block Editor: failed to initialize editor instance.', error );
+		}
+	};
+
+	const waitForAttachEditor = () => new Promise( ( resolve, reject ) => {
+		if ( window.wp && typeof window.wp.attachEditor === 'function' ) {
+			resolve( window.wp.attachEditor );
+			return;
+		}
+
+		const timeout = setTimeout( () => {
+			clearInterval( interval );
+			reject( new Error( 'timeout' ) );
+		}, 10000 );
+
+		const interval = setInterval( () => {
+			if ( window.wp && typeof window.wp.attachEditor === 'function' ) {
+				clearInterval( interval );
+				clearTimeout( timeout );
+				resolve( window.wp.attachEditor );
+			}
+		}, 50 );
+	} );
+
+	const bootstrap = () => {
+		const wrappers = document.querySelectorAll( '.rwmb-block-editor-wrapper' );
+		if ( ! wrappers.length ) {
+			return;
+		}
+
+		waitForAttachEditor()
+			.then( attachEditor => {
+				wrappers.forEach( wrapper => initWrapper( wrapper, attachEditor ) );
+
+				if ( typeof MutationObserver === 'undefined' ) {
+					return;
+				}
+
+				const observer = new MutationObserver( mutations => {
+					mutations.forEach( mutation => {
+						mutation.addedNodes?.forEach( node => {
+							if ( node.nodeType !== 1 ) {
+								return;
+							}
+
+							if ( node.classList?.contains( 'rwmb-block-editor-wrapper' ) ) {
+								initWrapper( node, attachEditor );
+								return;
+							}
+
+							if ( node.querySelector ) {
+								node.querySelectorAll( '.rwmb-block-editor-wrapper' ).forEach( element => initWrapper( element, attachEditor ) );
+							}
+						} );
+					} );
+				} );
+
+				observer.observe( document.body, { childList: true, subtree: true } );
+			} )
+			.catch( error => {
+				console.error( 'RWMB Block Editor: attachEditor unavailable.', error );
+			} );
+	};
+
+	if ( wp.domReady ) {
+		wp.domReady( bootstrap );
+	} else if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', bootstrap );
+	} else {
+		bootstrap();
+	}
+} )();
+( function() {
+	'use strict';
+
+	if ( typeof wp === 'undefined' ) {
+		return;
+	}
+
+	const lodashGlobal = window.lodash || window._;
+	if ( lodashGlobal ) {
+		if ( ! window._ ) {
+			window._ = lodashGlobal;
+		}
+
+		if ( typeof window._.pluck !== 'function' && typeof window._.map === 'function' ) {
+			window._.pluck = ( collection, property ) => window._.map( collection, property );
+		}
+
+		if ( typeof window._.contains !== 'function' && typeof window._.includes === 'function' ) {
+			window._.contains = window._.includes;
+		}
+	}
+
+	const parseSettings = value => {
+		if ( ! value ) {
+			return {};
+		}
+
+		try {
+			return JSON.parse( value );
+		} catch ( error ) {
+			console.error( 'RWMB Block Editor: failed to parse settings.', error );
+			return {};
+		}
+	};
+
+	const initWrapper = ( wrapper, attachEditor ) => {
+		if ( ! wrapper || wrapper.dataset.initialized === 'true' ) {
+			return;
+		}
+
+		const textarea = wrapper.querySelector( 'textarea' );
+		if ( ! textarea ) {
+			return;
+		}
+
+		const settings = parseSettings( wrapper.getAttribute( 'data-settings' ) );
+
+		try {
+			attachEditor( textarea, settings );
+			wrapper.dataset.initialized = 'true';
+		} catch ( error ) {
+			console.error( 'RWMB Block Editor: failed to initialize editor instance.', error );
+		}
+	};
+
+	const waitForAttachEditor = () => new Promise( ( resolve, reject ) => {
+		if ( window.wp && typeof window.wp.attachEditor === 'function' ) {
+			resolve( window.wp.attachEditor );
+			return;
+		}
+
+		const timeout = setTimeout( () => {
+			clearInterval( interval );
+			reject( new Error( 'timeout' ) );
+		}, 10000 );
+
+		const interval = setInterval( () => {
+			if ( window.wp && typeof window.wp.attachEditor === 'function' ) {
+				clearInterval( interval );
+				clearTimeout( timeout );
+				resolve( window.wp.attachEditor );
+			}
+		}, 50 );
+	} );
+
+	const bootstrap = () => {
+		const wrappers = document.querySelectorAll( '.rwmb-block-editor-wrapper' );
+		if ( ! wrappers.length ) {
+			return;
+		}
+
+		waitForAttachEditor()
+			.then( attachEditor => {
+				wrappers.forEach( wrapper => initWrapper( wrapper, attachEditor ) );
+
+				if ( typeof MutationObserver === 'undefined' ) {
+					return;
+				}
+
+				const observer = new MutationObserver( mutations => {
+					mutations.forEach( mutation => {
+						mutation.addedNodes?.forEach( node => {
+							if ( node.nodeType !== 1 ) {
+								return;
+							}
+
+							if ( node.classList?.contains( 'rwmb-block-editor-wrapper' ) ) {
+								initWrapper( node, attachEditor );
+								return;
+							}
+
+							if ( node.querySelector ) {
+								node.querySelectorAll( '.rwmb-block-editor-wrapper' ).forEach( element => initWrapper( element, attachEditor ) );
+							}
+						} );
+					} );
+				} );
+
+				observer.observe( document.body, { childList: true, subtree: true } );
+			} )
+			.catch( error => {
+				console.error( 'RWMB Block Editor: attachEditor unavailable.', error );
+			} );
+	};
+
+	if ( wp.domReady ) {
+		wp.domReady( bootstrap );
+	} else if ( document.readyState === 'loading' ) {
+		document.addEventListener( 'DOMContentLoaded', bootstrap );
+	} else {
+		bootstrap();
+	}
+} )();
+