This commit is contained in:
Ray Elliott 2020-08-12 14:55:40 +01:00
parent 0f2a24ed8b
commit 3f859f465d
4 changed files with 28 additions and 11 deletions

View File

@ -1 +1,19 @@
**TODO** - currently the block name is hardcoded to `svg` and theme is `room-vw`.
Need to use templating to create a `<block-name>.php` file (based on `svg.php)
with the correct theme/block names.
## Usage
```sh
npm install
# build and watch for development
npm run dev
# build for production
npm run build
```
The links to the WordPress default config files are required so that code
editors pick up the correct linting configurations.

View File

@ -1,9 +1,8 @@
import './style.scss'; import './style.scss';
import './editor.scss'; import './editor.scss';
const registerBlockType = { wp.blocks }; import { registerBlockType } from '@wordpress/blocks';
const el = { wp.element }; import { __ } from '@wordpress/i18n';
const __ = { wp.i18n};
registerBlockType( 'room-vw/svg', { registerBlockType( 'room-vw/svg', {
title: __( 'SVG Wrapper', 'room-vw' ), title: __( 'SVG Wrapper', 'room-vw' ),
@ -16,14 +15,14 @@ registerBlockType( 'room-vw/svg', {
}, },
edit( props ) { edit( props ) {
return el( return (
'p', <p className={ props.className }>
{ className: props.className }, { __( 'Hello from the editor!', 'room-vw' ) }
__( 'Hello from the editor!', 'room-vw' ) </p>
); );
}, },
save() { save() {
return el( 'p', {}, __( 'Hello from the saved content!', 'room-vw' ) ); return <p>{ __( 'Hello from the saved content!', 'room-vw' ) }</p>;
}, },
} ); } );

View File

@ -5,7 +5,7 @@
*/ */
.wp-block-room-vw-svg { .wp-block-room-vw-svg {
background-color: #000; background-color: #666;
color: #fff; color: #fff;
padding: 2px; padding: 2px;
} }

View File

@ -17,7 +17,7 @@ function svg_block_init() {
$asset_file['version'] $asset_file['version']
); );
$editor_css = 'build/style-index.css'; $editor_css = 'build/index.css';
wp_register_style( wp_register_style(
'svg-block-editor', 'svg-block-editor',
"$uri/$editor_css", "$uri/$editor_css",
@ -25,7 +25,7 @@ function svg_block_init() {
filemtime( "$dir/$editor_css" ) filemtime( "$dir/$editor_css" )
); );
$style_css = 'build/index.css'; $style_css = 'build/style-index.css';
wp_register_style( wp_register_style(
'svg-block', 'svg-block',
"$uri/$style_css", "$uri/$style_css",