use jsx
This commit is contained in:
parent
0f2a24ed8b
commit
3f859f465d
18
README.md
18
README.md
|
@ -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.
|
||||||
|
|
15
src/index.js
15
src/index.js
|
@ -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>;
|
||||||
},
|
},
|
||||||
} );
|
} );
|
||||||
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
4
svg.php
4
svg.php
|
@ -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",
|
||||||
|
|
Loading…
Reference in New Issue