Since the block editor is a React-powered application, you need to output some HTML into the custom page where JavaScript can render the block editor.
Wordpress editor code#
As a reminder, the source code for each step is available in the accompanying plugin. The getdave_sbe_render_block_editor function will be used to render the contents of the admin page. 'dashicons-welcome-widgets-menus' // Custom icon 'getdave_sbe_render_block_editor', // Function to render the page 'Standalone Block Editor', // Visible page name To do this, you need to register a custom admin page using the standard WordPress add_menu_page() helper: // File: init.php If you’re already comfortable with the process of creating custom admin pages in WordPress, you might want to skip ahead. The only item not shown above is the build/ directory, which is where the compiled JS and CSS files are outputted by These files are enqueued by the plugin seperately. – A custom Webpack config extending the defaults provided by the npm package to allow for custom CSS styles (via Sass).These files are not directly enqueued by the plugin. src/ (directory) – This is where the JavaScript and CSS source files will live.init.php – Handles the initialization of the main plugin logic.plugin.php – Standard plugin “entry” file with comment meta data, which requires init.php.Here is a brief summary of what’s going on: The plugin file structure will look like this:
To keep things simple, the plugin will be named Standalone Block Editor Demo because that is what it does. The custom editor is going to be built as a WordPress plugin.
Instead, it will be an entirely custom instance that will live within a custom WordPress admin page called “Block Editor.” While it looks similar, this editor will not be the same Block Editor you are familiar with when creating posts and pages in WordPress. The result will look something like this: Throughout this guide, you will create an (almost) fully functioning block editor instance. However, once familiar with JSX, many developers find it easier to read and write, so most code examples in the Block Editor Handbook use this syntax. However, you could use plain JavaScript if you prefer. The code snippets in this guide use JSX syntax. The demo code in this plugin as an essential resource.
Wordpress editor download#
The code used throughout this guide is available for download in the accompanying WordPress plugin. Along the way, we’ll introduce you to the key packages and components, so you can see how the block editor works under the hood.īy the end of this article, you will have a solid understanding of the block editor’s inner workings and be well on your way to creating your own block editor instances. This guide will walk you through building a fully functioning, custom block editor “instance” within WordPress. So if you want to work on the editor, it’s essential to understand how block editing works at a fundamental level. But at its core, it’s all about managing and editing blocks. With its many packages and components, the Gutenberg codebase can be daunting at first.
0 kommentar(er)
