Merge pull request #3 from tarosky/update-wp-6-5

Remove withState and bump supporting version of WP and PHP

.eslintrc

@@ -8,14 +8,10 @@
 		"wp": false,
 		"jQuery": false,
 		"angular": false,
-		"Hametuha": true,
-		"wpApiSettings": false,
-		"ga": false,
-		"Hashboard": true,
-		"Vue": false
+		"wpApiSettings": false
 	},
 	"extends": [
-		"plugin:@wordpress/eslint-plugin/recommended"
+		"plugin:@wordpress/eslint-plugin/recommended-with-formatting"
 	],
 	"rules": {
 		"no-alert": "off",

.github/workflows/wordpress.yml

@@ -8,16 +8,15 @@ on:
       - '*'
   pull_request:
     branches:
-      - master
+      - main
 
 jobs:
   test:
-    runs-on: ${{ matrix.operating-system }}
+    runs-on: ubuntu-latest
     strategy:
       matrix:
-        operating-system: [ ubuntu-18.04 ]  # OS. ubuntu-18.04 is also available.
-        php: [ '5.6', '7.2', '7.4' ] # PHP versions to check.
-        wp: [ 'latest', '5.4' ]      # WordPress version to check.
+        php: [ '7.2', '7.4', '8.0' ] # PHP versions to check.
+        wp: [ 'latest', '5.9' ]      # WordPress version to check.
     services:
       mysql:
         image: mysql:5.7
@@ -28,12 +27,15 @@ jobs:
           MYSQL_ROOT_PASSWORD: root
     name: WordPress ${{ matrix.wp }} in PHP ${{ matrix.php }} UnitTest
     steps:
-      - uses: actions/checkout@master
+      - uses: actions/checkout@main
 
-      - name: Setup PHP
-        uses: nanasess/setup-php@master
+      - name: Setup PHP with composer v2
+        uses: shivammathur/setup-php@v2
         with:
           php-version: ${{ matrix.php }}
+          tools: composer
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Validate composer.json and composer.lock
         run: composer validate
@@ -47,38 +49,54 @@ jobs:
       - name: Install WordPress
         run: bash bin/install-wp-tests.sh wordpress root root 127.0.0.1:3306 ${{ matrix.wp }}
 
+      - name: Check PHP syntax
+        run: composer test
+
+  lint:
+    name: Check JS & CSS syntax
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@main
+
       - name: Install Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '12'
+          node-version: '14'
 
       - name: Install NPM Packages
         run: npm install
 
-      - name: Check PHP syntax
-        run: composer test
-
       - name: Check JS & CSS syntax
         run: npm run lint
 
+  status-check:
+    name: Status Check
+    runs-on: ubuntu-latest
+    needs: [ lint, test ]
+    steps:
+      - run: echo "Status Check"
+
   release:
     name: Deploy WordPress.org
-    needs: test
+    needs: status-check
     if: contains(github.ref, 'tags/')
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v2
+        uses: actions/checkout@main
 
-      - name: Setup PHP
-        uses: nanasess/setup-php@master
+      - name: Setup PHP with composer v2
+        uses: shivammathur/setup-php@v2
         with:
-          php-version: 5.6
+          php-version: 7.2
+          tools: composer
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Install Node
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v3
         with:
-          node-version: '12'
+          node-version: '14'
 
       - name: Build Plugin
         run: bash bin/build.sh ${{ github.ref }}

.gitignore

@@ -3,4 +3,3 @@
 /wordpress
 /dist
 composer.lock
-package-lock.json

README.md

@@ -2,9 +2,9 @@
 
 Tags: gutenberg, block editor, iframe  
 Contributors: tarosky, Takahashi_Fumiki  
-Tested up to: 5.7  
-Requires at least: 5.4  
-Requires PHP: 5.6  
+Tested up to: 6.5  
+Requires at least: 5.9  
+Requires PHP: 7.2  
 Stable Tag: nightly  
 License: GPLv3 or later  
 License URI: http://www.gnu.org/licenses/gpl-3.0.txt
@@ -48,6 +48,13 @@ Create a new [issue](https://github.com/tarosky/taro-iframe-block/issues) or sen
 
 ## Changelog
 
+### 1.1.0
+
+* Drop support for PHP 5.6 and minimum PHP version is 7.2.
+* Minimum WordPress version is now 5.9.
+* Update JS for the latest block editor.
+
+
 ### 1.0.3
 
 * Add quick hack for JS translation in GlotPress([detail](https://wordpress.slack.com/archives/C02RP50LK/p1635254887019500))

assets/js/block.js

@@ -2,17 +2,17 @@
  * iframe block
  *
  * @handle taro-iframe-block-editor
- * @deps wp-i18n, wp-components, wp-blocks, wp-block-editor, wp-server-side-render, wp-compose, wp-data
+ * @deps wp-i18n, wp-components, wp-blocks, wp-block-editor, wp-server-side-render, wp-data, wp-element
  */
 
 /* global TaroIframeBlockEditor:false */
 
 const { registerBlockType } = wp.blocks;
+const { useState } = wp.element;
 const { __, sprintf } = wp.i18n;
 const { InspectorControls } = wp.blockEditor;
 const { PanelBody, ToggleControl, TextControl, TextareaControl, Button } = wp.components;
 const { serverSideRender: ServerSideRender } = wp;
-const { withState } = wp.compose;
 const { dispatch } = wp.data;
 
 /**
@@ -41,7 +41,7 @@ const convertHtmlToOptions = ( string ) => {
 		// error.
 		dispatch( 'core/notices' ).createNotice( 'error', __( 'Sorry, but failed to parse iframe tag.', 'taro-iframe-block' ), {
 			type: 'snackbar',
-		} ).then( res => {
+		} ).then( ( res ) => {
 			setTimeout( () => {
 				dispatch( 'core/notices' ).removeNotice( res.notice.id );
 			}, 3000 );
@@ -76,14 +76,13 @@ const convertHtmlToOptions = ( string ) => {
 	return false;
 };
 
-const IframeInserter = withState( {
-	html: ''
-} )( ( { html, setState, onConvert } ) => {
+const IframeInserter = ( { onConvert } ) => {
+	const [ html, setHtmlState ] = useState( '' );
 	return (
 		<>
 			<TextareaControl label={ __( 'iframe tag', 'taro-iframe-block' ) } value={ html }
-				onChange={ ( newHtml ) => setState( { html: newHtml } ) }
-				help={ __( 'Paste html tag here and convert into options.',  'taro-iframe-block' ) }
+				onChange={ ( newHtml ) => setHtmlState( newHtml ) }
+				help={ __( 'Paste html tag here and convert into options.', 'taro-iframe-block' ) }
 				placeholder={ 'e.g. <iframe src="https://example.com" width="640" height="480" />' } rows={ 4 } />
 			<Button onClick={ () => {
 				if ( onConvert ) {
@@ -97,7 +96,7 @@ const IframeInserter = withState( {
 			</Button>
 		</>
 	);
-} );
+};
 
 registerBlockType( 'taro/iframe-block', {
 
@@ -129,7 +128,7 @@ registerBlockType( 'taro/iframe-block', {
 	example: {
 		src: 'https://wordpress.org',
 		width: 320,
-		height: 180
+		height: 180,
 	},
 
 	keywords: [ 'iframe', __( 'Embed', 'taro-iframe-block' ) ],
@@ -139,8 +138,6 @@ registerBlockType( 'taro/iframe-block', {
 	description: __( 'Add responsive iframe block which keep original aspect ratio.', 'taro-iframe-block' ),
 
 	edit( { attributes, setAttributes } ) {
-
-
 		let responsiveHelp;
 		if ( attributes.responsive ) {
 			if ( /^\d+$/.test( attributes.width ) && /^\d+$/.test( attributes.height ) && 0 < attributes.width * attributes.height ) {
@@ -157,16 +154,16 @@ registerBlockType( 'taro/iframe-block', {
 			<>
 				<InspectorControls>
 					<PanelBody defaultOpen={ true } title={ __( 'Display Setting', 'taro-iframe-block' ) } >
-						<TextControl type="url" label={ __( 'SRC attribute', 'taro-iframe-block' ) } value={ attributes.src } onChange={ src => setAttributes( { src } ) } />
-						<TextControl label={ __( 'Width', 'taro-iframe-block' ) } value={ attributes.width } onChange={ width => setAttributes( { width } ) } />
-						<TextControl label={ __( 'Height', 'taro-iframe-block' ) } value={ attributes.height } onChange={ height => setAttributes( { height } ) } />
-						<ToggleControl checked={ attributes.responsive } label={ __( 'Responsive', 'taro-iframe-block' ) } onChange={ responsive => setAttributes( { responsive } ) }
+						<TextControl type="url" label={ __( 'SRC attribute', 'taro-iframe-block' ) } value={ attributes.src } onChange={ ( src ) => setAttributes( { src } ) } />
+						<TextControl label={ __( 'Width', 'taro-iframe-block' ) } value={ attributes.width } onChange={ ( width ) => setAttributes( { width } ) } />
+						<TextControl label={ __( 'Height', 'taro-iframe-block' ) } value={ attributes.height } onChange={ ( height ) => setAttributes( { height } ) } />
+						<ToggleControl checked={ attributes.responsive } label={ __( 'Responsive', 'taro-iframe-block' ) } onChange={ ( responsive ) => setAttributes( { responsive } ) }
 							help={ responsiveHelp } />
-						<ToggleControl checked={ attributes.fullscreen } label={ __( 'Allow Fullscreen', 'taro-iframe-block' ) } onChange={ fullscreen => setAttributes( { fullscreen } ) } />
+						<ToggleControl checked={ attributes.fullscreen } label={ __( 'Allow Fullscreen', 'taro-iframe-block' ) } onChange={ ( fullscreen ) => setAttributes( { fullscreen } ) } />
 						<TextControl label={ __( 'Other Attributes', 'taro-iframe-block' ) }
 							placeholder={ 'e.g. id="frame" name="my-map"' }
 							help={ __( 'Add other attribute here.', 'taro-iframe-block' ) }
-							value={ attributes.other } onChange={ other => setAttributes( { other } ) } />
+							value={ attributes.other } onChange={ ( other ) => setAttributes( { other } ) } />
 					</PanelBody>
 					<PanelBody defaultOpen={ false } title={ __( 'Converter', 'taro-iframe-block' ) }>
 						<IframeInserter onConvert={ ( newAttr ) => setAttributes( newAttr ) } />

composer.json

@@ -1,15 +1,13 @@
 {
 	"name": "tarosky/taro-iframe-block",
-	"description": "WordPress plguin fro simple iframe block.",
+	"description": "WordPress plugin for simple iframe block.",
 	"minimum-stability": "stable",
 	"license": "GPL-3.0-or-later",
 	"scripts": {
 		"test": [
-			"phpcs --config-set installed_paths $(pwd)/vendor/wp-coding-standards/wpcs",
 			"phpcs --standard=phpcs.ruleset.xml $(find ./ -name '*.php')"
 		],
 		"fix": [
-			"phpcs --config-set installed_paths $(pwd)/vendor/wp-coding-standards/wpcs",
 			"phpcbf --standard=phpcs.ruleset.xml $(find ./ -name '*.php')"
 		]
 	},
@@ -20,10 +18,18 @@
 		}
 	],
 	"require": {
-		"php": "^5.6|^7.0"
+		"php": ">=7.2"
 	},
 	"require-dev": {
 		"squizlabs/php_codesniffer": "^3.0",
-		"wp-coding-standards/wpcs": "^2.0"
+		"wp-coding-standards/wpcs": "^2.0",
+		"phpcompatibility/php-compatibility": "^9.3",
+		"dealerdirect/phpcodesniffer-composer-installer": "^1.0"
+	},
+	"config": {
+		"allow-plugins": {
+			"dealerdirect/phpcodesniffer-composer-installer": true
+		}
 	}
+
 }