Skip to content

Commit 8d0f492

Browse files
erikyoerikyo
authored
Better code splitting / updated package.json (#214)
* add the webpack configuration and move the wp-scripts entry point there
1 parent 89301ab commit 8d0f492

File tree

6 files changed

+112
-37
lines changed

6 files changed

+112
-37
lines changed

‎.gitignore‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ intermediate
3535
.idea
3636
cache
3737
vendor
38-
tests/_output
39-
/plugin-name/vendor/
40-
tests/_support/_generated
41-
/plugin-name/assets/build
38+
tests/_output/
39+
plugin-name/vendor/
40+
tests/_support/_generated/
41+
plugin-name/assets/build/

‎plugin-name/assets/src/block/edit.js‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
import { InspectorControls, useBlockProps } from '@wordpress/block-editor';
2+
import { Panel, PanelBody, PanelRow, TextControl } from '@wordpress/components';
3+
import { blockIcon, blockStyle } from './index';
4+
5+
export const Edit = ( { isSelected, style, attributes, setAttributes } ) => {
6+
return (
7+
<div
8+
{ ...useBlockProps( {
9+
style: { ...blockStyle, style },
10+
} ) }
11+
>
12+
<InspectorControls key="setting">
13+
<Panel header="Settings">
14+
<PanelBody
15+
title="Block Settings"
16+
icon={ 'settings' }
17+
initialOpen={ true }
18+
>
19+
<PanelRow>
20+
<TextControl
21+
label="Link Href"
22+
type={ 'url' }
23+
value={ attributes.href }
24+
onChange={ ( target ) =>
25+
setAttributes( { href: target } )
26+
}
27+
/>
28+
</PanelRow>
29+
</PanelBody>
30+
</Panel>
31+
</InspectorControls>
32+
{ blockIcon }
33+
<h4
34+
style={
35+
isSelected
36+
? { border: '2px solid red' }
37+
: { border: 'none' }
38+
}
39+
>
40+
<a href={ attributes.href } className={ 'has-link-color' }>
41+
Hello World, WordPress Plugin Boilerplate Powered here!
42+
</a>
43+
</h4>
44+
<p>
45+
Edit plugin-name/assets/src/block/index.js to change this block
46+
</p>
47+
</div>
48+
);
49+
};

‎plugin-name/assets/src/block/index.js‎

Lines changed: 19 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -2,42 +2,18 @@
22
* WordPress dependencies
33
*/
44
import { registerBlockType } from '@wordpress/blocks';
5-
import { useBlockProps } from '@wordpress/block-editor';
5+
// eslint-disable-next-line prettier/prettier
6+
export const blockIcon = ( <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 24 24" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2"><circle cx="11.99" cy="12.08" r="11.9" /><path d="M9.56 12.09c0 1.01.59 1.89 1.44 2.3l-1.22-3.35c-.14.32-.22.67-.22 1.04zm4.29-.13c0-.32-.11-.54-.21-.71-.13-.21-.25-.39-.25-.6 0-.24.18-.46.43-.46h.03a2.58 2.58 0 0 0-3.87.48h.16l.68-.03c.14-.01.15.19.02.21l-.29.02.93 2.77.56-1.68-.4-1.09-.27-.02c-.14-.01-.12-.22.02-.21l.67.03.68-.03c.14-.01.15.19.02.21l-.29.02.93 2.75.26-.85a2.4 2.4 0 0 0 .2-.83zm-1.68.35-.77 2.23a2.66 2.66 0 0 0 1.57-.04l-.02-.04-.79-2.15zm2.2-1.45.02.26c0 .26-.05.55-.19.92l-.78 2.26a2.55 2.55 0 0 0 .96-3.44zM5.46 12.4c-1.87-1.9-2.57-3.66-1.92-4.88s2.52-1.6 5.13-1.08c.71-2.57 1.89-4.06 3.27-4.1.69-.02 1.37.34 1.98 1.03l-.51.45c-.47-.54-.96-.81-1.45-.8-1.02.03-2.02 1.39-2.62 3.57a19.2 19.2 0 0 1 2.75.92 19.2 19.2 0 0 1 2.7-1.08 10.9 10.9 0 0 0-.55-1.34l.61-.3a11.5 11.5 0 0 1 .6 1.46c2.58-.67 4.46-.4 5.18.78S20.75 10 18.99 12c1.87 1.9 2.57 3.66 1.92 4.88-.17.31-.42.57-.75.78-.41.25-.93.42-1.56.49l-.08-.68c.63-.07 1.45-.29 1.79-.91.49-.9-.2-2.44-1.78-4.05a19.8 19.8 0 0 1-2.17 1.93 19.4 19.4 0 0 1-.41 2.88l1.05.16.05.01-.09.33-.03.34-1.14-.18c-.52 1.9-1.3 3.21-2.23 3.78a2.1 2.1 0 0 1-1.04.32c-1.38.04-2.65-1.38-3.5-3.9-.75.2-1.45.31-2.08.35l-.04-.68a9.63 9.63 0 0 0 1.91-.32 19.5 19.5 0 0 1-.58-2.84 19.2 19.2 0 0 1-2.28-1.79c-1.49 1.71-2.08 3.28-1.54 4.15.2.32.53.54 1.01.68l-.18.65a2.3 2.3 0 0 1-1.4-.97c-.73-1.18-.13-2.98 1.63-4.98zM4.14 7.84c-.49.9.2 2.44 1.78 4.06a18.8 18.8 0 0 1 2.17-1.93A19 19 0 0 1 8.5 7.1c-2.22-.43-3.88-.16-4.37.74zm11.15 9.31a17.9 17.9 0 0 0 .35-2.19l-1.21.8-1.26.72a17.2 17.2 0 0 0 2.12.67zM9.17 7.24a17.9 17.9 0 0 0-.35 2.19c.78-.55 1.62-1.07 2.47-1.52a18 18 0 0 0-2.12-.67zm3.18 8.9a23.4 23.4 0 0 0 3.36-2.07l.03-1.98-.14-1.97-1.7-1.01-1.78-.86c-1.16.59-2.32 1.3-3.36 2.07l-.03 1.98.14 1.97 1.7 1.01 1.78.86zm1.87-7.63 1.26.73A16.9 16.9 0 0 0 15 7.07a17.8 17.8 0 0 0-2.07.79l1.3.65zm2.11 2.12.09 1.45v1.45a18.5 18.5 0 0 0 1.64-1.5 17.7 17.7 0 0 0-1.72-1.4zm-6.08 5.25L9 15.16a16.9 16.9 0 0 0 .48 2.17 19.8 19.8 0 0 0 2.07-.79l-1.3-.65zm-2.2-3.56v-1.45a18.5 18.5 0 0 0-1.64 1.5 18 18 0 0 0 1.72 1.4l-.09-1.45zm12-4.95c-.54-.87-2.21-1.05-4.4-.49a19.4 19.4 0 0 1 .58 2.85 19.2 19.2 0 0 1 2.28 1.79c1.49-1.71 2.08-3.28 1.54-4.15zM12.5 21.38c1.03-.03 2.02-1.39 2.62-3.57a19 19 0 0 1-2.75-.92 18.9 18.9 0 0 1-2.69 1.08c.73 2.14 1.8 3.44 2.83 3.41z" fill="#fff" fillRule="nonzero"/><path d="M5.06 17.99a1.07 1.07 0 1 0 1.96-.38 1.07 1.07 0 0 0-1.96.38z" fill="#f95428" fillRule="nonzero"/><path d="M16.71 17.69a1.07 1.07 0 0 0 1.61 1.09 1.07 1.07 0 0 0 .34-1.47c-.31-.5-.97-.66-1.47-.35-.27.17-.44.44-.49.73z" fill="#2ba5f7" fillRule="nonzero"/><path d="M13.13 4.05a1.07 1.07 0 1 0 2.1.36 1.07 1.07 0 0 0-2.1-.36z" fill="#f7b239" fillRule="nonzero"/></svg> );
67

7-
const blockIcon = ( <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 24 24" fillRule="evenodd" strokeLinejoin="round" strokeMiterlimit="2"><circle cx="11.99" cy="12.08" r="11.9" /><path d="M9.56 12.09c0 1.01.59 1.89 1.44 2.3l-1.22-3.35c-.14.32-.22.67-.22 1.04zm4.29-.13c0-.32-.11-.54-.21-.71-.13-.21-.25-.39-.25-.6 0-.24.18-.46.43-.46h.03a2.58 2.58 0 0 0-3.87.48h.16l.68-.03c.14-.01.15.19.02.21l-.29.02.93 2.77.56-1.68-.4-1.09-.27-.02c-.14-.01-.12-.22.02-.21l.67.03.68-.03c.14-.01.15.19.02.21l-.29.02.93 2.75.26-.85a2.4 2.4 0 0 0 .2-.83zm-1.68.35-.77 2.23a2.66 2.66 0 0 0 1.57-.04l-.02-.04-.79-2.15zm2.2-1.45.02.26c0 .26-.05.55-.19.92l-.78 2.26a2.55 2.55 0 0 0 .96-3.44zM5.46 12.4c-1.87-1.9-2.57-3.66-1.92-4.88s2.52-1.6 5.13-1.08c.71-2.57 1.89-4.06 3.27-4.1.69-.02 1.37.34 1.98 1.03l-.51.45c-.47-.54-.96-.81-1.45-.8-1.02.03-2.02 1.39-2.62 3.57a19.2 19.2 0 0 1 2.75.92 19.2 19.2 0 0 1 2.7-1.08 10.9 10.9 0 0 0-.55-1.34l.61-.3a11.5 11.5 0 0 1 .6 1.46c2.58-.67 4.46-.4 5.18.78S20.75 10 18.99 12c1.87 1.9 2.57 3.66 1.92 4.88-.17.31-.42.57-.75.78-.41.25-.93.42-1.56.49l-.08-.68c.63-.07 1.45-.29 1.79-.91.49-.9-.2-2.44-1.78-4.05a19.8 19.8 0 0 1-2.17 1.93 19.4 19.4 0 0 1-.41 2.88l1.05.16.05.01-.09.33-.03.34-1.14-.18c-.52 1.9-1.3 3.21-2.23 3.78a2.1 2.1 0 0 1-1.04.32c-1.38.04-2.65-1.38-3.5-3.9-.75.2-1.45.31-2.08.35l-.04-.68a9.63 9.63 0 0 0 1.91-.32 19.5 19.5 0 0 1-.58-2.84 19.2 19.2 0 0 1-2.28-1.79c-1.49 1.71-2.08 3.28-1.54 4.15.2.32.53.54 1.01.68l-.18.65a2.3 2.3 0 0 1-1.4-.97c-.73-1.18-.13-2.98 1.63-4.98zM4.14 7.84c-.49.9.2 2.44 1.78 4.06a18.8 18.8 0 0 1 2.17-1.93A19 19 0 0 1 8.5 7.1c-2.22-.43-3.88-.16-4.37.74zm11.15 9.31a17.9 17.9 0 0 0 .35-2.19l-1.21.8-1.26.72a17.2 17.2 0 0 0 2.12.67zM9.17 7.24a17.9 17.9 0 0 0-.35 2.19c.78-.55 1.62-1.07 2.47-1.52a18 18 0 0 0-2.12-.67zm3.18 8.9a23.4 23.4 0 0 0 3.36-2.07l.03-1.98-.14-1.97-1.7-1.01-1.78-.86c-1.16.59-2.32 1.3-3.36 2.07l-.03 1.98.14 1.97 1.7 1.01 1.78.86zm1.87-7.63 1.26.73A16.9 16.9 0 0 0 15 7.07a17.8 17.8 0 0 0-2.07.79l1.3.65zm2.11 2.12.09 1.45v1.45a18.5 18.5 0 0 0 1.64-1.5 17.7 17.7 0 0 0-1.72-1.4zm-6.08 5.25L9 15.16a16.9 16.9 0 0 0 .48 2.17 19.8 19.8 0 0 0 2.07-.79l-1.3-.65zm-2.2-3.56v-1.45a18.5 18.5 0 0 0-1.64 1.5 18 18 0 0 0 1.72 1.4l-.09-1.45zm12-4.95c-.54-.87-2.21-1.05-4.4-.49a19.4 19.4 0 0 1 .58 2.85 19.2 19.2 0 0 1 2.28 1.79c1.49-1.71 2.08-3.28 1.54-4.15zM12.5 21.38c1.03-.03 2.02-1.39 2.62-3.57a19 19 0 0 1-2.75-.92 18.9 18.9 0 0 1-2.69 1.08c.73 2.14 1.8 3.44 2.83 3.41z" fill="#fff" fillRule="nonzero" /><path d="M5.06 17.99a1.07 1.07 0 1 0 1.96-.38 1.07 1.07 0 0 0-1.96.38z" fill="#f95428" fillRule="nonzero" /><path d="M16.71 17.69a1.07 1.07 0 0 0 1.61 1.09 1.07 1.07 0 0 0 .34-1.47c-.31-.5-.97-.66-1.47-.35-.27.17-.44.44-.49.73z" fill="#2ba5f7" fillRule="nonzero" /><path d="M13.13 4.05a1.07 1.07 0 1 0 2.1.36 1.07 1.07 0 0 0-2.1-.36z" fill="#f7b239" fillRule="nonzero" /></svg> );
8-
9-
// The block configuration
10-
const blockConfig = require( './block.json' );
11-
12-
const blockStyle = {
13-
padding: '32px',
8+
export const blockStyle = {
149
textAlign: 'center',
1510
};
1611

17-
const Edit = () => {
18-
const blockProps = useBlockProps( { style: { ...blockStyle } } );
19-
return (
20-
<div { ...blockProps }>
21-
{ blockIcon }
22-
<h4 style={ { fontSize: '22px', fontWeight: 'bold' } }>
23-
<a href={ '#' }>Hello World, WordPress Plugin Boilerplate Powered here!</a>
24-
</h4>
25-
<p>Edit plugin-name/assets/src/block/index.js to change this block</p>
26-
</div>
27-
);
28-
};
12+
// The block configuration
13+
const blockConfig = require( './block.json' );
2914

30-
const Save = () => {
31-
const blockProps = useBlockProps.save( { style: { ...blockStyle } } );
32-
return (
33-
<div { ...blockProps }>
34-
{ blockIcon }
35-
<h4 style={ { fontSize: '22px', fontWeight: 'bold' } }>
36-
<a href={ '#' }>Hello World, WordPress Plugin Boilerplate Powered here!</a>
37-
</h4>
38-
</div>
39-
);
40-
};
15+
import { Edit } from './edit';
16+
import { Save } from './save';
4117

4218
// Register the block
4319
/// https://developer.wordpress.org/block-editor/reference-guides/block-api/block-registration/
@@ -73,7 +49,19 @@ registerBlockType( blockConfig.name, {
7349
text: '#ffffff',
7450
link: '#00A0D2',
7551
},
52+
spacing: {
53+
padding: {
54+
top: '32px',
55+
left: '32px',
56+
bottom: '32px',
57+
right: '32px',
58+
},
59+
},
7660
},
7761
},
62+
href: {
63+
type: 'string',
64+
default: 'https://github.com/WPBP',
65+
},
7866
},
7967
} );

‎plugin-name/assets/src/block/save.js‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useBlockProps } from '@wordpress/block-editor';
2+
import { blockIcon, blockStyle } from './index';
3+
4+
export const Save = ( { attributes } ) => {
5+
return (
6+
<div { ...useBlockProps.save( { style: { ...blockStyle } } ) }>
7+
{ blockIcon }
8+
<h4>
9+
<a href={ attributes.href } className={ 'has-link-color' }>
10+
Hello World, WordPress Plugin Boilerplate Powered here!
11+
</a>
12+
</h4>
13+
</div>
14+
);
15+
};

‎plugin-name/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,8 +19,8 @@
1919
"uninstall.php"
2020
],
2121
"scripts": {
22-
"start": "wp-scripts start assets/src/*.js --output-path=assets/build",
23-
"build": "wp-scripts build assets/src/*.js --output-path=assets/build",
22+
"start": "wp-scripts start",
23+
"build": "wp-scripts build",
2424
"check-engines": "wp-scripts check-engines",
2525
"check-licenses": "wp-scripts check-licenses",
2626
"format": "wp-scripts format",

‎plugin-name/webpack.config.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
2+
const path = require( 'path' );
3+
4+
const entry = {};
5+
[ 'plugin-admin', 'plugin-block', 'plugin-public', 'plugin-settings' ].forEach(
6+
( script ) =>
7+
( entry[ script ] = path.resolve(
8+
process.cwd(),
9+
`assets/src/${ script }.js`
10+
) )
11+
);
12+
13+
module.exports = {
14+
...defaultConfig,
15+
entry,
16+
output: {
17+
path: path.join( __dirname, './assets/build' ),
18+
},
19+
externals: {
20+
react: 'React',
21+
'react-dom': 'ReactDOM',
22+
},
23+
};

0 commit comments

Comments
 (0)