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