Remove html id and pass arguments to React components.
See original version for more information.
Created
June 24, 2024 12:47
-
-
Save chrono-meter/996ca06b732afbab7ed625691ebbc0f7 to your computer and use it in GitHub Desktop.
WordPress React components for plugin pages without node `id`.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // src/index.js | |
| import {createRoot} from '@wordpress/element'; | |
| const SettingsPage = () => { | |
| return <div>Placeholder for settings page</div>; | |
| }; | |
| export default function(container){ | |
| const root = createRoot(container); | |
| root.render(<SettingsPage />); | |
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| { | |
| "devDependencies": { | |
| "@wordpress/scripts": "^27.0.0" | |
| }, | |
| "scripts": { | |
| "build": "wp-scripts build", | |
| "start": "wp-scripts start" | |
| } | |
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php | |
| $asset = require __DIR__ . '/build/index.asset.php'; | |
| // Enqueue dependencies. | |
| foreach ( $asset['dependencies'] as $dependency ) { | |
| wp_enqueue_script( $dependency ); | |
| } | |
| ?> | |
| <div> | |
| <?php echo esc_html__( 'Loading page, please wait.' ); ?> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', async function () { | |
| const {default: render} = await import(<?php echo wp_json_encode( plugins_url( 'build/index.js', __FILE__ ) ); ?>); | |
| render(this); | |
| }.bind(document.currentScript.parentElement)); | |
| </script> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#:~:text=Extending%20the%20webpack%20config | |
| const defaultConfig = require('@wordpress/scripts/config/webpack.config'); | |
| module.exports = { | |
| ...defaultConfig, | |
| experiments: { | |
| ...defaultConfig.experiments, | |
| outputModule: true, | |
| }, | |
| output: { | |
| ...defaultConfig.output, | |
| libraryTarget: 'module', | |
| }, | |
| }; |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment