Slide 1
Slide 1 text
ϒϩοΫΤσΟλʔ
ͷΧελϚΠζํ๏Λ
Ϛελʔͯ͠ϥΠόϧʹ
ࠩΛ͚ͭΑ͏ʂʂʂʂ
1
Slide 2
Slide 2 text
ϥΠόϧͬͯͳΜͶΜ
2
Slide 3
Slide 3 text
Block Editor ΧελϚΠζೖ
Toro_Unit @Kansai WP Meetup in Osaka
3
Slide 4
Slide 4 text
$ whoami
4
Slide 5
Slide 5 text
Toro_Unit
෦ ߛ (͏Β ͻΖ͠)
• Frontend Developer
• WordPress Plugin and Theme Developer
Github: @torounit
Twitter: @Toro_Unit
5
Slide 6
Slide 6 text
6
Slide 7
Slide 7 text
Plugins and Themes
• Custom Post Type Permalinks
• Advanced Posts Blocks
• Simple Post Type Permalinks
• Powerful Posts Per Page (PPPP)
• Vanilla
• and more...
7
Slide 8
Slide 8 text
8
Slide 9
Slide 9 text
WordPress Meetup Map
• React Ͱग़དྷͯ·͢ɻ
• https://github.com/torounit/wp-meetup-map
• ϓϧϦΫ͍ͩ͘͞ɻ
9
Slide 10
Slide 10 text
10
Slide 11
Slide 11 text
ݝদຊࢢ͔Β͖·ͨ͠
• Shinshu WordPress Meetup
• ຖճϐβ৯ͬͯ·͢ɻ
• ߚ༿͕ݟ͝Ζɻ৽ͦɻ
11
Slide 12
Slide 12 text
ຊηογϣϯʹ͍ͭͯ
ϞμϯJSͷ͕͍Ζ͍Ζग़͖ͯ·͢ɻͦͪΒͷղઆ
ಛʹ͠·ͤΜɻ
ʢ͍ͯ͏͔ऴΘΒΜʣ
ࢀߟʹͳΔࢿྉ
• https://speakerdeck.com/likr/re-introduction-to-
modern-javascript
• https://jsprimer.net/
• https://developer.mozilla.org
12
Slide 13
Slide 13 text
αϯϓϧίʔυʹ͍ͭͯ
ΊͪΌͪ͘Όίʔυ͕ग़͖ͯ·͢ɻ
https://github.com/torounit/my-first-block
ʹࠓճͷσϞެ։͍ͯ͠·͢ɻ
tag / branch Ͱɺ͍Ζ͍Ζ͚ͯ·͢ɻ
13
Slide 14
Slide 14 text
࣭ʹ͍ͭͯ
• ղΒͳ͍͜ͱ͕͋ͬͨΒͦͷͰฉ͍ͯΒͬͯେৎͰ͢ɻ
• ͨͩ͠ɺ࣌ؒͱମྗͷؔͰͦͷͰ͓͑ग़དྷͳ͍߹͕͋Γ·
͢ɻ
• 120ϖʔδ͘Β͍͋ΔͷͰɺؾʹͳͬͨ͜ͱͳͲɺπΠʔτ͢Δ
ͳΓ͍͚ͯͨͩ͠ΕɺޙͰ͑Δ͔͠Ε·ͤΜɻ
14
Slide 15
Slide 15 text
ϒϩοΫΤσΟλʔΧελϚΠζೖ
15
Slide 16
Slide 16 text
ͷ·͑ʹ
16
Slide 17
Slide 17 text
ͦͦ WordPress ʹ͓͚ΔΤσΟλͷׂͱ
17
Slide 18
Slide 18 text
WordPress ͱ͍͏ CMS ͷ HTMLཧ
• post_content ͷΧϥϜʹ HTML ΛอଘɻͦΕΛग़ྗ͢Δஔɻ
• HTML Λԣஅతʹཧ͢ΔΈͰ͋Γɺ୯ҰͷϖʔδͦͷͷΛཧ͢Δ
ΈͰͳ͍ɻਤॻؗɻ
• σʔλΛݩʹ HTML Λੜ͢ΔΘ͚Ͱͳ͍ɻ΄΅ͷ HTML ʹςʔ
Ϛͱ͍͏Λணͤͯ৴͢Δஔɻ
• ͍ͬͯ͏͔࠷ॳ (0.71)ɺςʔϚ͢Βແ͔ͬͨɻ
• https://github.com/mt8/wbkobe77/blob/master/index.php
18
Slide 19
Slide 19 text
19
Slide 20
Slide 20 text
• ͨͱ͑ɺconcrete5 ͱ͍͏ CMS ɺϒϩοΫ͝ͱʹσʔλϕʔε
ͷ table ͕ଘࡏ͢ΔΒ͍͠ɻ༷ʑͳ table ͔ΒσʔλΛҾͬுͬͯ
͖ͯ̍ͭͷ HTML Λੜ͢Δɻ
20
Slide 21
Slide 21 text
• ࡶʹݴ͏ͱɺHTMLͰॻ͔ΕͨจॻୡΛΧςΰϦʔͱ͔ͱ͔Λ
͚ͭͯཧग़དྷΔΑ͏ʹ͠Α͏ʂ͕ WordPress ͷίϯςϯπཧɻ
ͭ·Γϒϩάɻ
• ͍͍ͤͥ ϔομͱϑολ͘Β͍ڞ௨Խͯ͠Ζ͏ɻఔɻ
21
Slide 22
Slide 22 text
ͦΜͳ WordPress ʹ͓͚ΔΤσΟλʔͷׂͱ
22
Slide 23
Slide 23 text
HTMLΘ͔Βͳ͍ͻͱͰɺ
HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂ
23
Slide 24
Slide 24 text
ʮHTMLΘ͔Βͳ͍ͻͱͰ HTMLΛ࡞ΕΔΑ͏ʹ͢Δʂʯ
• HTML Θ͔Βͳ͍ਓ͕৮ͬͯɺpost_content ʹ HTML ΛอଘͰ͖
ΔΑ͏ʹ͢Δɺͱ͍͏͜ͱɻ
• DBʹอଘ͢Δͷɺ͞Εͨ HTML
24
Slide 25
Slide 25 text
͍ͬͯ͏͔ͱͱϒϩάιϑτʂ
since 2003.05.27
25
Slide 26
Slide 26 text
ϒϩοΫΤσΟλʔͷΧελϚΠζ
26
Slide 27
Slide 27 text
ςʔϚʹ͍ͭͯ
ࠓճ࣌ؒͱମྗͷؔͰऔΓѻΘͳ͍ͷͰɺެࣜυΩϡϝϯτಡΜͰ
Լ͍͞ɻ
https://developer.wordpress.org/block-editor/developers/themes/
ςʔϚʹهड़͖͢ CSSͷɺΧϥʔύϨοτɺจࣈαΠζઃఆɺetc..
͕ॻ͍ͯ͋Γ·͢ɻ
ςʔϚϢχοτςετͷ࠷৽൛ʢຊޠ൛༁தͳͷͰͱΓ͋͑ͣӳ
ޠ൛ʣಥͬࠐΜͰݟΔͱͳΜͱͳ͘Δ͖͜ͱݟ͑·͢ɻ
27
Slide 28
Slide 28 text
ͱΓ͋͑ͣɺeditor-styles ඞͣઃఆ͢ΔΑ͏ʹ͠·͠ΐ͏ɻ
Slide 29
Slide 29 text
editor-style ΛΘ͟Θ͟࡞ΔͷΊΜͲ͘͞
͍ͬͯਓɺ ͍͍͢WordPressͷͨΊ
ͷCSSͷͭ͘Γ͔ͨ ͬͯΛɺ2015ͷ
WordBench Osaka ͰͬͯΔͷͰͦΕಡΜ
ͰԼ͍͞ɻ
https://www.slideshare.net/Toro_Unit/
wordpresscss
ݹ͍ใ͋Γ·͕͢ɺ͋Μ·Γߟ͑ํม
Θͬͯ·ͤΜɻ SMACSS + BEM ͬͯײ
͡Ͱ CSSॻ͍ͯ·͢ɻ
29
Slide 30
Slide 30 text
ΤσΟλΛΧελϚΠζ͢Δํ๏
@wordpress/blocks
registerBlockStyle, registerBlockType
@wordpress/plugins
registerPlugin
@wordpress/hooks
addFilter, addAction
30
Slide 31
Slide 31 text
ΤσΟλΛΧελϚΠζ͢Δํ๏
@wordpress/blocks
registerBlockStyle, registerBlockType
@wordpress/plugins
registerPlugin
@wordpress/hooks
addFilter, addAction
ʹ͍ͭͯ͠·͢ɻ
31
Slide 32
Slide 32 text
طଘͷϒϩοΫͷ֦ு
• ·ͣɺ৽͍͠ϒϩοΫΑΓطଘͷϒϩοΫͷ֦ுͰͲ͏ʹ͔Ͱ
͖ͳ͍͔ʁΛߟ͑Δɻ
• ͭ·Γ class ଐੑΛ༩͠ɺCSS ͰσβΠϯΛΧελϚΠζ͢Δɻ
32
Slide 33
Slide 33 text
33
Slide 34
Slide 34 text
ϒϩοΫελΠϧ
GUI ͰɺϒϩοΫʹΫϥεΛઃఆग़དྷΔɻ͍ͭͰʹϓϨϏϡʔ͍ͭͯ
͘Δɻඇৗʹศརɻ
ઃఆ͞ΕΔɺis-style-hoge ͷΑ͏ͳܗࣜɻ
"ߴͳઃఆ" ύωϧͷ "ՃCSS Ϋϥε" Λૢ࡞͍ͯ͠Δ͚ͩɻ
Documentation : https://developer.wordpress.org/block-editor/
developers/filters/block-filters/#block-style-variations
34
Slide 35
Slide 35 text
࣮ํ๏ɻ
ΤσΟλʔʹಡ·ͤΔ js ͷઃఆɻwp-blocks Λґଘؔʹࢦఆ
Slide 36
Slide 36 text
wp.blocks.registerBlockStyle ͰɺελΠϧͷઃఆΛهड़ɻ
const { registerBlockStyle } = wp.blocks;
registerBlockStyle( 'core/quote', {
name: 'hoge',
label: '΄͛'
} );
36
Slide 37
Slide 37 text
ελΠϧ͕Ճ͞ΕΔɻeditor-style ΛͪΌ
Μͱઃఆ͍ͯ͠ΕϓϨϏϡʔʹద༻͞Ε
Δɻ
• Ϙλϯͷؙ֯ελΠϧ
• ςʔϒϧͷελΠϧ
ͳͲಉ͡Έɻ
ԼखʹΧελϜϒϩοΫΛ࡞ΔΑΓɺ͜ΕΛ
֮͑Δํ͕༗༻ੑߴ͍ɻ
ϒϩοΫΛࣗ࡞͢ΔࡍɺσβΠϯͷόϦ
ΤʔγϣϯΛ૿͢ͳΒ͜ΕΛ͏ɻ
37
Slide 38
Slide 38 text
ΧελϜϒϩοΫ։ൃ
38
Slide 39
Slide 39 text
֓ཁ
• wp_register_script Ͱ js ϑΝΠϧΛಡΈࠐΉɻͦͷ͋ͱɺJSͰ
ʢͱ͍͏ΑΓɺReact ͰʣΰϦΰϦ͢Δɻ
• PHPͰͷϨϯμϦϯάΛهड़͢Δ͜ͱͰಈతͳཁૉ (γϣʔτίʔ
υɺΟδΣοτͷΑ͏ͳ) Λఏڙग़དྷΔɻ
• ex. WP_Query ͰߘͷใΛදࣔɻ
• JSʢ React ʣ ඞͣ͏ɺPHP ͨ·ʹ͏ఔɻ
39
Slide 40
Slide 40 text
Note: JSX ͱ͔ϞμϯJSͱ͔Ϗϧυͨ͠Γ͍ͬͯ͠ͱ͔Α͘
ฉ͚͘Ͳ
• ެࣜͷαϯϓϧʹɺਃ͠༁ఔʹ ES5 ͷαϯϓϧ͕͋Δ͚Ͳɺ։ൃ
ɺϞμϯJSͰߦΘΕ͍ͯΔɻ
• ʹ Babel ੵΜͰͳ͍ਓɺJSX + ϞμϯJS ॻ͍ͨ΄͏͕͍͍ɻ
• ੵΜͰͳ͍Ͱ͢ɻ
40
Slide 41
Slide 41 text
React Ή͔͍ͭ͠ ?
• React ษڧ͠Α͏ɻ͋Μͳͷ HTML Έ͍ͨͳͷͩʢચ
• ΧελϜϒϩοΫ։ൃͳΒɺHTML ʹໟ͕ੜ͑ͨҐͰΓΕΔέʔε
݁ߏ͋Δɻ
• ͪΐͬͱͨ͠ϞϊΛ࡞Δͷ͞΄Ͳ͘͠ͳ͍ɻߴػೳͳϞϊͭ͘Ζ͏ͱ
͢Δͱ͍͠ɻ
• ͱ͍͏͔ɺঢ়ଶཧ / ඇಉظ / ௨৴ / GUIͰΰϦΰϦΔͷ͕ͦͦ
͍͠ɻͦͷ͠͞Λղܾ͢ΔϞϊͷ͕̍ͭ React.
41
Slide 42
Slide 42 text
ΧελϜϒϩοΫ։ൃͳΒׂͱͳΜͱ͔ͳΔɻ
• WordPress ͔ΒσʔλΛऔಘ͢ΔύοέʔδͳͲ͋ΔͷͰɺͦ͜
·Ͱ React ྗແ͍͚ͯ͘Δɻ
• ͪΖΜ React ྗɺJS ྗ͕͋Ε໓͍ۤΖ͍Ζग़དྷΔ
• ex. ֎෦ͷಠࣗAPIΛ༻͍ͯΰϦΰϦΔͱ͔ɻ
42
Slide 43
Slide 43 text
αΠτ੍࡞ͷ߹
େɺσβΠϯΛ࣮ݱ͢ΔͨΊͷ div ΛϒϩοΫʹ͍ͨ͠έʔεͱ͔
͕ଟ͍ͷͰɻ
͍͍ͩͨ͜Μͳײ͡ͷίʔυɻ
43
Slide 44
Slide 44 text
import { registerBlockType } from '@wordpress/blocks';
import { InnerBlocks } from '@wordpress/block-editor';
const edit = ( { className } ) => (
);
const save = ( { className } ) => (
);
44
Slide 45
Slide 45 text
registerBlockType( 'my-block/section', {
title: 'section',
description: 'section',
icon: 'text-page',
category: 'layout',
supports: {
align: [ 'wide', 'full' ],
anchor: true,
},
edit,
save,
} );
45
Slide 46
Slide 46 text
͜Μ͚ͩɻ
ͳΜͱ͔ͳΔɻ
46
Slide 47
Slide 47 text
ͬͯΈΑ͏ɻ
ࢀߟࢿྉνϡʔτϦΞϧ͋Δɻ
• https://developer.wordpress.org/block-editor/tutorials/block-
tutorial/writing-your-first-block-type/
• ެࣜͷνϡʔτϦΞϧɻ
• https://github.com/WordPress/gutenberg-examples
• ެࣜͷαϯϓϧɻΑ͘ग़དྷͯΔɻ
47
Slide 48
Slide 48 text
ϒϩοΫΛͭͬͯ͘ΈΔ
48
Slide 49
Slide 49 text
४උɻ
ͱΓ͋͑ͣదʹ WordPress ͷϓϥάΠϯΛ࡞͠·͢ɻ
ϑΝΠϧߏ
- my-first-block
- package.json
- my-first-block.php ( js ͷొͱ͔ɺWordPressϓϥάΠϯຊମ )
- src/index.js ( ͜͜ʹΰϦΰϦ͢Δɻ)
49
Slide 50
Slide 50 text
package.json
{
"name": "my-first-block",
"version": "0.0.1",
"license": "GPL2.0+",
"devDependencies": {
"@wordpress/scripts": "^5.0.0"
},
"scripts": {
"start": "wp-scripts start",
"build": "wp-scripts build",
}
}
͜Ε͚ͩͰ OK
50
Slide 51
Slide 51 text
@wordpress/scripts
https://www.npmjs.com/package/@wordpress/scripts
• JSͷࣗಈϏϧυͱ͔ɺBabel ͱ͔ɺWebpack ͱ͔ɺESLint ͱ͔ɺ
WordPressϓϥάΠϯ։ൃڥͷߏஙʢཁ docker-compose ʣͱ͔
ͳΜͰͬͯ͘ΕΔ͍͢͝Ϡπɻ
• PostCSS / SCSS ͷϏϧυࠓͷͱ͜Ζग़དྷͳ͍͚ͲɺՃ͞ΕΔ͔
ɻhttps://github.com/WordPress/gutenberg/issues/14801
51
Slide 52
Slide 52 text
wp-script start or wp-script build Λ͢Δͱ
src/index.js ͔Βɺ
• build/index.js
• build/index.asset.php
Λు͖ग़͢ɻ
52
Slide 53
Slide 53 text
• @wordpress/blocks -> wp.blocks ͷΑ͏ʹɺάϩʔόϧมΛࢀ
র͢ΔΑ͏ʹมͯ͘͠ΕΔɻ
import { registerBlockStyle } from '@wprdpress/blocks'
Λɺ
const { registerBlockStyle } = wp.blocks;
Έ͍ͨʹͯ͘͠ΕΔɻ
• jQuery ͷ WordPress ʹಉࠝ͞Ε͍ͯΔJSಉ༷ɻ
• ςʔϚ։ൃͳͲͰศརʹ͑Δɻ
53
Slide 54
Slide 54 text
my-first-block.php
function my_first_block_register_block() {
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
wp_register_script(
'my-first-block',
plugins_url( 'build/index.js', __FILE__ ),
$asset_file['dependencies'],
$asset_file['version']
);
// block ͷొɻ
register_block_type( 'my-first-block/hello', array(
'editor_script' => 'my-first-block',
) );
}
add_action( 'init', 'my_first_block_register_block' );
54
Slide 55
Slide 55 text
build/index.asset.php
wp_register_script ͢Δͱ͖ͷɺґଘؔɺversion ΛɺJS ͔Βࣗಈతʹผͯ͠࡞͞Ε
Δɻࠓ·ͰखಈͰͬͯͨͷ͕ΞϗΈ͍ͨʹࢥ͑Δ͘Β͍ศརɻ
array(
'wp-block-editor', 'wp-blocks',
'wp-components', 'wp-compose','wp-data',
'wp-element', 'wp-i18n', 'wp-polyfill'
),
'version' => '3ba4a1cc34f9a198d6519b52f8622629'
);
55
Slide 56
Slide 56 text
register_block_type
ϒϩοΫͷొΛߦ͏ɻࣄલʹ JSͷొ͕ඞཁͳͷͰɺwp_register_script Ͱ֤ࣗͬͯ
͍ͩ͘͞ɻ
'ొͯ͋͠Δjsͷ໊લɺϑϩϯτ/ཧը໘༻',
'style' => 'ొͯ͋͠ΔCSSͷ໊લɺϑϩϯτ/ཧը໘༻',
'editor_script' => 'ొͯ͋͠Δjsͷ໊લɺཧը໘༻',
'editor_style' => 'ొͯ͋͠ΔCSSͷ໊લɺཧը໘༻',
) );
editor_script ͚ͩ͋ΕOK. ϓϥάΠϯଆͰ༻ҙͨ͠CSSͱ͔Λಡ·ͤͨΓͰ͖Δɻ
56
Slide 57
Slide 57 text
note: ଟݴޠԽͱ͔ެࣜͷexampleͱ͔ݟͯɻ
https://make.wordpress.org/core/2018/11/09/new-javascript-i18n-
support-in-wordpress/
57
Slide 58
Slide 58 text
͓·ͨͤ͠·ͨ͠ʂ
Α͏͘ϒϩοΫ։ൃʂ
58
Slide 59
Slide 59 text
import { registerBlockType } from '@wordpress/blocks';
// const { registerBlockType } = wp.blocks ʹม͞ΕΔ
registerBlockType( 'my-first-block/hello', {
title: 'hello',
icon: 'palmtree', // Dashicons. ͷࢦఆग़དྷΔ
category: 'common', // ΠϯαʔλʔͷͲͷύωϧʹදࣔ͢Δ͔ɻ
edit({ className } ) {
return (
ΤσΟλʔͩΑɻ
);
},
save({ className } ) {
return ( อଘ͞ΕΔσʔλɺ࣮ࡍʹදࣔ͞ΕΔςΩετɻ
);
},
} );
59
Slide 60
Slide 60 text
60
Slide 61
Slide 61 text
ΧελϜϒϩοΫ͕Ͱ͖ͨʂ
61
Slide 62
Slide 62 text
·͊ɺ͜Ε͚ͩͩͱͦ͜·Ͱ͍ಓͳ͍ɻʢ࠶ར༻ϒϩοΫͰ͑͑
ΜͬͯͳΔʣ
62
Slide 63
Slide 63 text
ฤूՄೳྖҬΛͭ͘Δʂ
63
Slide 64
Slide 64 text
͘ͳΔͷͰɺίʔυΛׂɻ
64
Slide 65
Slide 65 text
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
const edit = ( { className, attributes: { text }, setAttributes } ) => {
const onChange = ( value ) => { return setAttributes( { text: value } ); };
return (
);
};
const save = ( { className, attributes: { text } } ) => {
return (
);
};
65
{ text }
Slide 66
Slide 66 text
registerBlockType( 'my-first-block/hello', {
title: 'hello',
icon: 'palmtree',
category: 'common',
attributes: {
text: {
type: 'string',
default: '',
},
},
edit,
save,
} );
66
Slide 67
Slide 67 text
registerBlockType( 'my-first-block/hello', {
title: 'hello',
icon: 'palmtree',
category: 'common',
attributes: {
text: {
type: 'string',
default: '',
},
},
edit,
save,
} );
67
Slide 68
Slide 68 text
import { registerBlockType } from '@wordpress/blocks';
import { TextControl } from '@wordpress/components';
const edit = ( { className, attributes: { text }, setAttributes } ) => {
const onChange = ( value ) => { return setAttributes( { text: value } ); };
return (
);
};
const save = ( { className, attributes: { text } } ) => {
return (
);
};
68
{ text }
Slide 69
Slide 69 text
const edit = ( { className, attributes: { text }, setAttributes } ) => {
const onChange = ( value ) => { return setAttributes( { text: value } ); };
return (
);
};
69
Slide 70
Slide 70 text
• @wordpress/components ఏڙ͞ΕΔίϯϙʔωϯτɻinput λάΛ
ు͖ग़͢ɻϑΥʔϜͷ෦ͳͲɺ΄΅શͯ༻ҙ͞Ε͍ͯΔɻ
• ex. ,
@wordpress/components ʹଞʹ༷ʑͳίϯϙʔωϯτ͕͋Δɻ
Component Reference: https://developer.wordpress.org/block-
editor/components/
70
Slide 71
Slide 71 text
attributes ϓϩύςΟ
registerBlockType( 'my-first-block/hello', {
title: 'hello',
icon: 'palmtree',
category: 'common',
attributes: {
text: {
type: 'string',
default: '',
},
},
edit,
save,
} );
อଘ͢ΔσʔλͷܗࣜΛఆٛɻσʔλܕɺσϑΥϧτͳͲɻྻͳͲࢦఆՄೳɻ
71
Slide 72
Slide 72 text
attirubutes, setAttirubutes
const edit = ( { className, attributes: { text }, setAttributes } ) => {
const onChange = ( value ) => { return setAttributes( { text: value } ); };
return (
);
};
TextControl ͷத͕มߋ͞ΕͨΒɺݱࡏͷ attributes Λ࠶ઃఆɻߋ৽͢ΔͷΈ
Λهड़ɻ
https://developer.wordpress.org/block-editor/developers/block-api/block-
attributes/
72
Slide 73
Slide 73 text
Hello!!!
Slide 74
Slide 74 text
Hello!!!
Slide 75
Slide 75 text
ͬͱ;ͭ͏ͷϒϩοΫͬΆ͍ͨ͘͠ɻ
ΤσΟλʹ input ͕͋Δͷͪΐͬͱɻɻɻ
75
Slide 76
Slide 76 text
ฤूग़དྷΔςΩετΛఏڙ͢ΔίϯϙʔωϯτɻίΞͷϒϩοΫςΩετฤू
ग़དྷΔͷ͍͍ͩͨ͜ΕͰग़དྷͯΔɻվߦͱ͔औΓѻ͑Δɻ
• : ΤσΟλը໘༻ɻ
• : HTMLΛు͖ग़͢༻ɻ
hello
https://developer.wordpress.org/block-editor/developers/richtext/ 76Slide 77
Slide 77 text
import { registerBlockType } from '@wordpress/blocks';
import { RichText } from '@wordpress/block-editor';
const edit = ( { className, attributes: { text }, setAttributes } ) => {
const onChange = ( value ) => setAttributes( { text: value } );
return (
);
};
const save = ( { className, attributes: { text } } ) => {
return (
);
};
77
Slide 78
Slide 78 text
78
Slide 79
Slide 79 text
ྑ͍ײ͡ʹͳͬͨ!!
79
Slide 80
Slide 80 text
Ͱɻɻɻ
ʮHello!!!ʯॏෳͯ͠Δɻίϝϯτ͔ΒͰͳ͘ɺHTML͔Βɺ
ΛऔΓग़ͤͳ͍͔ʁ
80
Hello!!!
Slide 81
Slide 81 text
attributes: {
text: {
type: 'string',
default: '',
},
},
81
Slide 82
Slide 82 text
attributes: {
text: {
type: 'string',
source: 'html',
selector: '.text',
default: '',
},
},
82
Slide 83
Slide 83 text
attributes: {
text: {
type: 'string',
source: 'html',
selector: '.text',
default: '',
},
},
83
Slide 84
Slide 84 text
Hello!!!
Slide 85
Slide 85 text
attirbutes ͷ source Λઃఆ͢Δ͜ͱͰɺ͍Ζ͍ΖͳܗͰऔಘग़དྷ
Δɻ
ʹΑͬͯɺͦͷଞͷઃఆ͕ඞཁɻ
https://developer.wordpress.org/block-editor/developers/block-api/
block-attributes/
type: array ʹ͢Δ͜ͱͰɺෳͷཁૉΛऔಘग़དྷͨΓ͢Δɻ
ϦετͳͲͱҰॹʹ͏ͱඒຯ͍͠ɻ
85
Slide 86
Slide 86 text
source ʹࢦఆͰ͖Δ
• html: innerHTML ΛऔಘɻෳߦͰऔಘͯ͠ྻʹग़དྷͨΓ͢
Δɻ
• text: textContent Λऔಘ
• attribute : ଐੑΛऔಘ
• query: ෳͷଐੑɺςΩετͳͲΛऔಘͯ͠ΦϒδΣΫτʹɻ
86
Slide 87
Slide 87 text
υΩϡϝϯςʔγϣϯʹॻ͍ͯແ͍ͷ
• children : ࢠཁૉɻ
• node / tag : ͍Ͳ͜Ζ͕ྑ͘ղΒͳ͍
• property: ιʔείʔυʹ͚͋ͬͨͲͳΜ͔ͩղΒͳ͍ɻ
87
Slide 88
Slide 88 text
Note: ΧελϜϑΟʔϧυͱͷ࿈ܞग़དྷΔɻ
register_post_meta( 'post', 'my_post_sub_title', array(
'show_in_rest' => true,
'single' => true,
'type' => 'string',
) );
attributes: {
author: {
type: 'string',
source: 'meta',
meta: 'my_post_sub_title'
},
},
ΧελϜϑΟʔϧυͷΩʔΛ post_hoge ͱ͔ʹ͢Δͱಈ͔ͳ͍ͷͰҙɻ
88
Slide 89
Slide 89 text
ઃఆมߋग़དྷΔUIɻ
https://developer.wordpress.org/block-editor/tutorials/block-tutorial/
block-controls-toolbar-and-sidebar/
InspectorControls, BlockControls
αΠυόʔͷઃఆ߲(ΠϯεϖΫλ)ɺϒϩοΫͷπʔϧόʔʹ߲Λ
ՃͰ͖Δɻ
89
Slide 90
Slide 90 text
const edit = ( props ) => {
// ͷ४උͱ͔͍Ζ͍ΖΔɻ
return (
// ઃఆͱ͔
)
};
90
//ϒϩοΫຊମ
Slide 91
Slide 91 text
InnerBlocks
ϒϩοΫͷதʹϒϩοΫΛೖΕΒΕΔϠπɻΧϥϜϒϩοΫɺάϧʔϓϒϩοΫɺJetpack ͷίϯλΫτ
ϑΥʔϜͰ༻͍ΒΕ͍ͯΔɻallowedBlocks Λࢦఆ͢ΔͱɺதʹೖΕΒΕΔϒϩοΫΛ੍ݶͰ͖Δɻ
const edit = ( { className } ) => (
);
const save = ( { className } ) => (
);
91
Slide 92
Slide 92 text
Dynamic Blocks
https://developer.wordpress.org/block-editor/tutorials/block-tutorial/
creating-dynamic-blocks/
PHP Λ༻͍ͯɺαʔόʔαΠυͰಈతʹɺϨϯμϦϯά͢ΔϒϩοΫɻ
92
Slide 93
Slide 93 text
example: Advanced Posts Blocks
https://www.wordpress.org/plugins/
advanced-posts-blocks/
• ΧςΰϦʔ/λά/λΫιϊϛʔͱߘλΠ
ϓͰɺߜΓࠐ·ΕͨߘΛදࣔ͢Δɻϒ
ϩοΫͳͲΛఏڙɻ
• TOPϖʔδͷ৽ணใҰཡͱ͔Ͱ͏ɻ
93
Slide 94
Slide 94 text
94
Slide 95
Slide 95 text
࡞Γํ
render_callback ͱɺඞཁͰ͋Εɺattributes Λࢦఆɻ௨ৗͷϒϩοΫͱҧ͍ɺattributes
Ͱࢦఆ͠ͳ͍ͱɺclassName ΛҾͬுͬͯདྷΕͳ͍ɻ
register_block_type( 'my-first-block/hello', array(
'editor_script' => 'my-first-block',
'attributes' => [
'className' => [
'type' => 'string',
'default' => '',
],
],
'render_callback' => 'my_first_block_render'
) );
95
Slide 96
Slide 96 text
example.1
ୈ2Ҿʹɺsave ͞ΕͨHTML͕ͦͷ··͞ΕΔͷͰɺ͜ΕΛPHPଆͰɺද੍ࣔ
ޚɻ
function my_first_block_render( $attributes, $content ) {
if ( get_current_user_id() ) {
return $content;
}
return sprintf(
'
login to see this content.
',
$attributes['className']
);
}
96
Slide 97
Slide 97 text
JSଆී௨ʹॻ͘ɻ
const edit = ( { className } ) => (
);
const save = ( { className } ) => (
);
97
Slide 98
Slide 98 text
ͳ͍͠ΐͳ͠ɻ
Slide 99
Slide 99 text
͍Ͳ͜Ζ
• ϩάΠϯϢʔβʔʹͷΈݟ͍ͤͨίϯςϯπɻ
• ظؒݶఆϞϊɻ
• ͜ΕͰA/BςετΛϒϩοΫ୯ҐͰΔϠπ͕͋Δͱ͔ฉ͍ͨ͜ͱ
͋Δɻ
• InnerBlocks ͱηοτͰ͏ίτ͕ଟͦ͏ɻ
99
Slide 100
Slide 100 text
example.2
function my_first_block_render( $attributes, $content ) {
if ( get_current_user_id() ) {
return sprintf(
'
Hello %2$s !!
',
$attributes['className'],
wp_get_current_user()->display_name
);
}
}
100
Slide 101
Slide 101 text
import { registerBlockType } from '@wordpress/blocks';
import { useSelect } from '@wordpress/data';
// JS ͰίΞͷσʔλΛҾͬுͬͯ͘Δɻ
export const useCurrentUser = () => {
return useSelect( ( select ) => {
return select( 'core' ).getCurrentUser();
} );
};
const edit = ( { className } ) => {
const { name } = useCurrentUser();
return (
Hello { name } !!
);
};
// શͯ PHP ͰϨϯμϦϯά͢Δ߹ɺsave null.
const save = () => null;
101
Slide 102
Slide 102 text
ͳײ͡Ͱอଘ͞ΕΔɻsave ͕ null ͳͷͰɺίϝϯτͷΈอଘ͞ΕΔɻ
γϣʔτίʔυతɻ
102
Slide 103
Slide 103 text
Note: ΤσΟλ্ͰαʔόʔαΠυϨϯμϦϯάग़དྷΔ
import { ServerSideRender } from '@wordpress/components';
const edit = ( { className } ) => (
);
103
Slide 104
Slide 104 text
͍Ͳ͜Ζ
• ࠷৽ͷߘҰཡɻ
• WP_Query ͱ͔ɻ
• ࠓ·ͰɺγϣʔτίʔυɺΟδΣοτͰද͍ࣔͯͨ͠Ϟϊɻ
104
Slide 105
Slide 105 text
σϝϦοτ
• ϓϥάΠϯ͕ແޮͳΔͱવػೳ͠ͳ͍ɻ
• ϓϥάΠϯΛແޮʹ͢Δͱɺফ͑Δʂʂʂʂ
• ௨ৗͷϒϩοΫHTMLΛ DBʹอଘ͍ͯ͠ΔͷͰɺফ͑ͳ͍ɻ
• ཧը໘ͰϒϩοΫ͕؆୯ʹ࡞ΕΔΑʁతͳϓϥάΠϯɺDynamic Block ͳ
࣮͕ଟ͍ɻ ϓϥάΠϯΛແޮʹ͢Δɾ༷͕มΘΔͱɺίϯςϯπ͕ফ͑Δ
ϦεΫɻ
• DB ʹೖ͍ͬͯͳ͍ͷͰɺݕࡧͳͲޮ͔ͳ͍ɻ
105
Slide 106
Slide 106 text
ϒϩοΫ։ൃͷֶͼํ
106
Slide 107
Slide 107 text
·ͣɺReact ͱྑ͘ͳΔɻ
• ͱΓ͋͑ͣɺcreate-react-app Ͱ؆
୯ͳΞϓϦΛ࡞ͬͨΓ͢Δͷେࣄɻ
• WordPress Meetup Map ͦͷҰɻ
• ͍ͭͰʹ Redux ͱ͔৮͓ͬͯ͘ͱ͍
͍ɻʢ෦తʹΘΕ·ͬͯ͘Δɻʣ
107
Slide 108
Slide 108 text
Block Editor Handbook
• νϡʔτϦΞϧͳͲͦͦ͋͜͜Δͷ
ͰɺͱΓ͋͑ͣಡΉɻ
• ࠔͬͨΒಡΉɻ
108
Slide 109
Slide 109 text
Gutenberg ͷιʔείʔυ
·ͣɺpackages/block-library/src ͋
ͨΓΛআ͍ͯɺίΞͷϒϩοΫͷιʔεΛಡ
Ήɺࣸܦ͢Δ͋ͨΓ͔Βɻ
• issue ௐΔͱ͍Ζ͍Ζใग़ͯ͘
Δɻ
109
Slide 110
Slide 110 text
ਓͷϓϥάΠϯΛಡΉɻ
• LIQUID BLOCKS:
https://wordpress.org/plugins/liquid-blocks/
• Snow Monkey Blocks:
https://wordpress.org/plugins/snow-monkey-blocks/
• Slide:
https://github.com/WordPress/slides
• ࠓͷ WordCamp US Ͱͷ matt ͰͷηογϣϯͷεϥΠυ͜ΕͰ࡞ΒΕ
͍ͯΔɻ* ίΞίϛολʔͰΤσΟλʔνʔϜͷɺElla ͞Μ࡞ɻͺͶ͐ɻ
110
Slide 111
Slide 111 text
• ࠓճͨ͠༰΄ΜͷҰ෦ɻ ਂਂ͍ɻ
• registerPlugin Λ׆༻͢Δ͜ͱͰɺߋʹ෯͕͕Δɻ
• ͱΓ͋͑ͣɺश͏ΑΓ׳ΕΖײ͋ΔͷͰɺखΛಈ͔͢ͷେࣄɻ
• ίΞͷ։ൃͷϒϩάಡ͏ɻ͍ํͳͲॻ͍ͯ͋ͬͨΓ͢Δɻ
• Making WordPress ͷ #core-editor νϟϯωϧͰ࣭ͯ͠ΈΑ͏
111
Slide 112
Slide 112 text
ϒϩοΫΤσΟλͰมΘ
ΔϫʔΫϑϩʔ
112
Slide 113
Slide 113 text
ϒϩοΫ͝ͱͷ༷Λఆ͕ٛඞཁɻ
• ϒϩοΫ͝ͱͷೖྗ߲ͷఆٛɻ
• ͦΕɺߋ৽͢ΔϢʔβʔʹͱ͍͍ͬͯ͢ͷ͔ʁ
• Ϣʔβʔͷҙਤ͠ͳ͍ಈ࡞Λ͍ͯ͠ͳ͍͔ʁ
• ΤσΟλͷࣗ༝͕ߴ͘GUIͰΰϦΰϦ࿔ΕΔɻΧελϚΠβʔ
ͱΈ͚ɻ
113
Slide 114
Slide 114 text
ฐࣾͷ߹
• ՄೳͳݶΓΧελϚΠβʔΘͣɺશͯϒϩοΫΤσΟλʔ্Ͱ
݁ɻ
• σβΠϯ͔ΒϒϩοΫͷ༷Λى͜͢߹͋Δ͠ɺϫΠϠʔϑ
ϨʔϜ͔ΒϒϩοΫͷ༷Λى͜͢߹͋ΔɻαΠτཁ݅࣍ୈɻ
114
Slide 115
Slide 115 text
ϒϩοΫ࡞Ε͍͍ͬͯΜ͡Όͳ͍ɻ
• ΧελϜϒϩοΫ͕େྔʹ͍͋ͬͯ͜ͳͤͳ͍ɻແཧɻ
• registerBlockStyle Λ্खʹ׆༻͠ɺγϯϓϧ͔ͭɺόϦΤʔ
γϣϯΛ͍࣋ͨͤ͢ํʹ༷Λ͢ɻCSSઃܭྗ͕ཁٻ͞ΕΔɻ
• ίΞͷϒϩοΫͷ HTMLߏͰɺෆՄೳͳσβΠϯΛͲ͏͢Δ͔
͍ͭͰݕ౼ࣄ߲ɻ
115
Slide 116
Slide 116 text
σβΠφʔɾσΟϨΫλʔͱڠྗ͠ͳ͍ͱ͏·͍͔͘ͳ͍Α
ࣗͰ࡞Εͳͯ͘ɺ͓ͬͯ͘͜ͱେࣄ
116
Slide 117
Slide 117 text
͍͞͝ʹ
• ϒϩοΫΤσΟλʔόάͬͯΔ
-> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/gutenberg/issues
• ͍ͮΒ͍
-> ϑΟʔυόοΫ͠·͠ΐ͏ɻhttps://github.com/WordPress/gutenberg/issues
• ӳޠΘ͔ΒΜ -> Google ༁
• ͳΜ͔͜Θ͍ -> SNSͱ͔ͰݴͬͯΔํ͕͜Θ͍ͧ
117
Slide 118
Slide 118 text
118
Slide 119
Slide 119 text
ϒϩοΫΤσΟλʔ͕͍͘͢ͳΔͷ͔ɺͦ͏Ͱͳ͍͔Β࣍ୈɻ
• https://github.com/WordPress/gutenberg/issues/18362 ຊޠೖ
ྗͰͷม࣌ʹΧʔιϧ͕ҙਤ͠ͳ͍ॴʹҠಈ͢Δෆ۩߹ɻ
119
Slide 120
Slide 120 text
Thanks!
• @Toro_Unit on Twitter and WordPress.org
• @torounit on Github and Making WordPress
120