Remove html id and pass arguments to React components.
See original version for more information.
Remove html id and pass arguments to React components.
See original version for more information.
// 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 />); | |
}; |
{ | |
"devDependencies": { | |
"@wordpress/scripts": "^27.0.0" | |
}, | |
"scripts": { | |
"build": "wp-scripts build", | |
"start": "wp-scripts start" | |
} | |
} |
<?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> |
// 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', | |
}, | |
}; |