save

package.json

@@ -52,6 +52,7 @@
 		"@wordpress/data": "^9.22.0",
 		"@wordpress/element": "^5.23.0",
 		"@wordpress/hooks": "^3.49.0",
+		"@wordpress/i18n": "^4.57.0",
 		"@wordpress/icons": "^9.43.0",
 		"copy-to-clipboard": "^3.3.3",
 		"graphiql": "^3.0.10",

src/regions/document-editor/components/EditorToolbar.jsx

@@ -12,10 +12,38 @@ export const EditorToolbar = () => {
 			{ Object.entries( buttons ).map( ( [ key, button ] ) => {
 				const props = button.config();
 
+				const buttonName = buttons[key].name ?? key;
+
+				if ( ! isValidButton(props, buttonName) ) {
+					return null;
+				}
+
 				// If a component is provided, use it, otherwise use the default ToolbarButton
 				const Component = props.component || ToolbarButton;
 				return <Component key={ key } { ...props } />;
 			} ) }
 		</>
 	);
 };
+
+const isValidButton = ( config, name ) => {
+	let hasError = false;
+	if ( undefined === config.label ) {
+		console.warn( `Button "${name}" needs a "label" defined`, { config } );
+		hasError = true;
+	}
+	if ( undefined === config.children ) {
+		console.warn( `Button "${name}" needs "children" defined`, { config } );
+		hasError = true;
+	}
+	if ( undefined === config.onClick ) {
+		console.warn( `Button "${name}" needs "onClick" defined`, { config } );
+		hasError = true;
+	}
+
+	if ( hasError ) {
+		return false;
+	}
+
+	return true;
+}

src/registry/index.js

@@ -14,4 +14,13 @@ export const init = () => {
 		mergeFragmentsButton
 	);
 	registerDocumentEditorToolbarButton( 'copy-query', copyQueryButton );
+	registerDocumentEditorToolbarButton( 'invalid-button', () => {
+		return {
+			title: 'MyButton',
+			notOnClick: () => {
+				console.log( 'I meant to type onClick!' );
+			},
+			child: <h2>I meant to type children</h2>,
+		};
+	} );
 };