Merge pull request #43 from kuno1/bugfix/buggle-block

吹き出しブロックを修正し、WP6.5対応

.eslintrc

@@ -1,21 +1,25 @@
 {
-	"parser": "babel-eslint",
+	"parser": "@babel/eslint-parser",
 	"env": {
 		"browser": true,
 		"jquery": true
 	},
 	"globals": {
-		"Vue": false,
 		"kbl": true
 	},
 	"extends": [
-		"plugin:@wordpress/eslint-plugin/recommended"
+		"plugin:@wordpress/eslint-plugin/recommended-with-formatting"
 	],
 	"rules": {
 		"object-shorthand": "off",
 		"prettier/prettier": "off",
 		"jsx-a11y/click-events-have-key-events": "off",
 		"jsx-a11y/no-noninteractive-element-interactions": "off"
+	},
+	"settings": {
+		"react": {
+			"version": "16.9.0"
+		}
 	}
 }
 

.gitattributes

@@ -7,7 +7,6 @@
 /.github export-ignore
 /.git export-ignore
 /.gitignore export-ignore
-/.gitignore export-ignore
 /bin export-ignore
 /composer.lock export-ignore
 /phpunit.xml.dist export-ignore

.github/workflows/wordpress.yml

@@ -68,7 +68,7 @@ jobs:
     name: Deploy GitHub Release
     needs: [ status-check ]
     if: contains(github.ref, 'tags/')
-    runs-on: ubuntu-20.04
+    runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@master
 

.gitignore

@@ -1,6 +1,5 @@
 /vendor/
 /node_modules/
 composer.lock
-package-lock.json
 .wp-env.override.json
 /wordpress/

assets/js/blocks/alert.js

@@ -10,7 +10,6 @@ const { __, sprintf } = wp.i18n;
 const { RichText, InspectorControls } = wp.blockEditor;
 const { PanelBody, SelectControl, TextControl, ToggleControl } = wp.components;
 
-
 registerBlockType( 'kunoichi/alert', {
 
 	title: __( 'Alert', 'kbl' ),
@@ -25,12 +24,12 @@ registerBlockType( 'kunoichi/alert', {
 		title: {
 			type: 'string',
 			source: 'text',
-			selector: '.kbl-alert-title'
+			selector: '.kbl-alert-title',
 		},
 		content: {
-			type: 'array',
-			source: 'children',
-			selector: '.kbl-alert-body'
+			type: 'string',
+			source: 'html',
+			selector: '.kbl-alert-body p',
 		},
 		alignment: {
 			type: 'string',
@@ -39,16 +38,16 @@ registerBlockType( 'kunoichi/alert', {
 		closable: {
 			type: 'boolean',
 			default: false,
-		}
+		},
 	},
 
-	edit(  { attributes, setAttributes, className } ) {
+	edit( { attributes, setAttributes, className } ) {
 		const classes = [ 'kbl-alert', 'alert' ];
 		if ( attributes.alignment ) {
 			classes.push( sprintf( 'has-text-align-%s', attributes.alignment ) );
 		}
 		if ( className ) {
-			classes.unshift( className )
+			classes.unshift( className );
 		}
 		const options = [
 			{ value: null, label: __( 'Not specify', 'kbl' ), disabled: true },
@@ -83,10 +82,11 @@ registerBlockType( 'kunoichi/alert', {
 							<span aria-hidden="true">&times;</span>
 						</button>
 					) }
-					<RichText className="kbl-alert-body"
-						tagName={ 'div' } value={ attributes.content }
-						multiline="p"
-						onChange={ content => setAttributes( { content } ) } />
+					<div className="kbl-alert-body">
+						<RichText
+							tagName={ 'p' } value={ attributes.content }
+							onChange={ ( content ) => setAttributes( { content } ) } />
+					</div>
 				</div>
 			</>
 		);
@@ -114,10 +114,12 @@ registerBlockType( 'kunoichi/alert', {
 						{ attributes.title }
 					</div>
 				) }
-				<RichText.Content tagName='div' multiline="p" className='kbl-alert-body' value={ attributes.content } />
+				<div className="kbl-alert-body">
+					<RichText.Content tagName="p" value={ attributes.content } />
+				</div>
 			</div>
-		)
-	}
+		);
+	},
 } );
 
 let isDefault = true;

assets/js/blocks/bubble.js

@@ -1,5 +1,5 @@
 /*!
- * wpdeps=wp-blocks,kbl,wp-block-editor, wp-components, wp-api-fetch, kbl-components-user-selector, kbl-components-post-selector
+ * wpdeps=wp-blocks,kbl,wp-block-editor, wp-element, wp-api-fetch, kbl-components-user-selector, kbl-components-post-selector
  */
 
 /* global KblBubble:false */
@@ -8,7 +8,7 @@ const { registerBlockType } = wp.blocks;
 const { __, sprintf } = wp.i18n;
 const { RichText, withColors, InspectorControls, PanelColorSettings, MediaUpload, MediaUploadCheck } = wp.blockEditor;
 const { Button, PanelBody, SelectControl, TextControl } = wp.components;
-const { withState } = wp.compose;
+const { useState } = wp.element;
 const { UserSelector, PostSelector } = kbl;
 
 const userResults = {};
@@ -82,16 +82,15 @@ registerBlockType( 'kunoichi/bubble', {
 			default: '',
 		},
 		content: {
-			type: 'array',
-			source: 'children',
-			selector: 'p'
-		}
+			type: 'string',
+			source: 'html',
+			selector: '.kbl-bubble-text',
+		},
 	},
 
-	edit: withState( {
-		src: KblBubble.avatar,
-		name: '',
-	} )( withColors( 'backgroundColor', 'textColor' )( ( { attributes, setAttributes, backgroundColor, setBackgroundColor, textColor, setTextColor, src, setState } ) => {
+	edit: withColors( 'backgroundColor', 'textColor' )( ( { attributes, setAttributes, backgroundColor, setBackgroundColor, textColor, setTextColor } ) => {
+		const [ src, setSrc ] = useState( KblBubble.avatar );
+		const [ name, setName ] = useState( '' );
 		let displayName = name;
 		let imageSrc = src;
 		if ( attributes.user ) {
@@ -103,19 +102,17 @@ registerBlockType( 'kunoichi/bubble', {
 			} else {
 				wp.apiFetch( {
 					path: sprintf( 'kbl/v1/users/search?id=%d', attributes.user ),
-				} ).then( res => {
+				} ).then( ( res ) => {
 					if ( ! res.length ) {
 						// User not found.
 						setAttributes( { user: 0 } );
 						displayError( __( 'User not found.', 'kbl' ), 'error' );
 					} else {
 						userResults[ attributes.user ] = res[ 0 ];
-						setState( {
-							name: res[ 0 ].display_name,
-							src: res[ 0 ].avatar,
-						} );
+						setName( res[ 0 ].display_name );
+						setSrc( res[ 0 ].avatar );
 					}
-				} ).catch( res => {
+				} ).catch( ( res ) => {
 					let message = __( 'Error', 'kbl' );
 					if ( res.responseJSON && res.responseJSON.message ) {
 						message = res.responseJSON.message;
@@ -140,12 +137,10 @@ registerBlockType( 'kunoichi/bubble', {
 						displayError( __( 'Post not found.', 'kbl' ), 'error' );
 					} else {
 						postResults[ attributes.writer ] = res[ 0 ];
-						setState( {
-							name: attributes.name ? attributes.name : res[ 0 ].title,
-							src: attributes.avatar ? attributes.avatar : res[ 0 ].thumbnail,
-						} );
+						setName( attributes.name ? attributes.name : res[ 0 ].title );
+						setSrc( attributes.avatar ? attributes.avatar : res[ 0 ].thumbnail );
 					}
-				} ).catch( res => {
+				} ).catch( ( res ) => {
 					let message = __( 'Error', 'kbl' );
 					if ( res.responseJSON && res.responseJSON.message ) {
 						message = res.responseJSON.message;
@@ -177,7 +172,7 @@ registerBlockType( 'kunoichi/bubble', {
 		const bodyClasses = [ 'kbl-bubble-text' ];
 		const bodyStyle = {};
 		if ( backgroundColor.class ) {
-			bodyClasses.push( backgroundColor.class )
+			bodyClasses.push( backgroundColor.class );
 		} else if ( backgroundColor.color ) {
 			bodyStyle.backgroundColor = backgroundColor.color;
 		}
@@ -196,16 +191,16 @@ registerBlockType( 'kunoichi/bubble', {
 						</h4>
 						<TextControl label={ __( 'Name', 'kbl' ) } value={ attributes.name }
 							help={ __( 'If name is empty, this will be just omitted.', 'kbl' ) }
-							onChange={ newName => setAttributes( { name: newName } ) } />
+							onChange={ ( newName ) => setAttributes( { name: newName } ) } />
 						<MediaUploadCheck>
 							<MediaUpload allowedTypes={ [ 'image' ] }
-								onSelect={ select => {
-									setAttributes( { avatar: extractAvatar( select ) } )
+								onSelect={ ( select ) => {
+									setAttributes( { avatar: extractAvatar( select ) } );
 								} }
 								render={ ( { open } ) => {
 									return (
 										<>
-											<Button isDefault={ true }
+											<Button isSecondary={ true }
 												onClick={ open }>{ __( 'Select Avatar', 'kbl' ) }</Button>
 											{ attributes.avatar &&
 											<Button style={ { marginLeft: '10px' } } isLink={ true }
@@ -237,39 +232,39 @@ registerBlockType( 'kunoichi/bubble', {
 								{ label: __( 'Left', 'kbl' ), value: 'left' },
 								{ label: __( 'Right', 'kbl' ), value: 'right' },
 							] }
-							onChange={ position => {
-								setAttributes( { position } )
+							onChange={ ( position ) => {
+								setAttributes( { position } );
 							} }
 						/>
 					</PanelBody>
 					<PanelColorSettings title={ __( 'Color Setting', 'kbl' ) } colorSettings={ colorSettings }
 						initialOpen={ false } />
 				</InspectorControls>
-				<div className='kbl-bubble' data-position={ attributes.position }>
+				<div className="kbl-bubble" data-position={ attributes.position }>
 					{ imageSrc ? (
-						<div className='kbl-bubble-avatar'>
-							<img className='kbl-bubble-image' src={ imageSrc } alt={ displayName } width={ 96 } height={ 96 } />
+						<div className="kbl-bubble-avatar">
+							<img className="kbl-bubble-image" src={ imageSrc } alt={ displayName } width={ 96 } height={ 96 } />
 							{ displayName.length ? (
-								<span className='kbl-bubble-name'>{ displayName }</span>
+								<span className="kbl-bubble-name">{ displayName }</span>
 							) : null }
 						</div>
 					) : null }
-					<div className='kbl-bubble-body'>
+					<div className="kbl-bubble-body">
 						<RichText className={ bodyClasses.join( ' ' ) } style={ bodyStyle || null }
 							tagName={ 'p' } value={ attributes.content }
 							placeholder={ __( 'Enter speech here.', 'kbl' ) }
-							onChange={ content => setAttributes( { content } ) } />
+							onChange={ ( content ) => setAttributes( { content } ) } />
 					</div>
 				</div>
 			</>
 		);
-	} ) ),
+	} ),
 
 	save( { attributes } ) {
 		return (
-			<div className='kbl-bubble-body'>
-				<RichText.Content tagName='p' className='kbl-bubble-text' value={ attributes.content } />
+			<div className="kbl-bubble-body">
+				<RichText.Content tagName="p" className="kbl-bubble-text" value={ attributes.content } />
 			</div>
-		)
-	}
+		);
+	},
 } );