npm: Add new lint scripts

.github/workflows/run-test-and-deploy.yml

@@ -55,8 +55,7 @@ jobs:
         run: npm run lint
 
       - name: Install Playwright dependencies
-        run: |
-            npx playwright install chromium firefox webkit --with-deps
+        run: npx playwright install chromium firefox webkit --with-deps
 
       - name: Install WordPress
         run: |
@@ -70,7 +69,7 @@ jobs:
   deploy:
     name: Deploy to WP.org
     runs-on: ubuntu-latest
-    needs: [ test ]
+    needs: [test]
     steps:
       - name: Checkout
         uses: actions/checkout@main

.github/workflows/run-test.yml

@@ -58,8 +58,7 @@ jobs:
         run: npm run lint
 
       - name: Install Playwright dependencies
-        run: |
-            npx playwright install chromium firefox webkit --with-deps
+        run: npx playwright install chromium firefox webkit --with-deps
 
       - name: Install WordPress
         run: |

.prettierrc.js

@@ -7,11 +7,7 @@ const config = {
 	printWidth: 100,
 	bracketSpacing: true,
 	parenSpacing: true,
-	// Set new property instead of jsxBracketSameLine
 	bracketSameLine: false,
-}
-
-// Remove deprecated property
-delete config.jsxBracketSameLine
+};
 
 module.exports = config;

.stylelintrc.js

@@ -1,22 +1,20 @@
 module.exports = {
-	extends: [
-		'@wordpress/stylelint-config/scss',
-	],
-  ignoreFiles: [
+	extends: [ '@wordpress/stylelint-config/scss' ],
+	ignoreFiles: [
 		'build/**/*.css',
 		'node_modules/**/*.css',
 		'vendor/**/*.css',
 		'**/*.js',
-		'**/*.svg'
-  ],
+		'**/*.svg',
+	],
 	rules: {
 		'no-descending-specificity': null,
 		'font-weight-notation': null,
 		'font-family-no-missing-generic-family-keyword': null,
 		'selector-class-pattern': null,
 		'at-rule-empty-line-before': null,
 		'declaration-property-unit-allowed-list': {
-			'line-height': []
+			'line-height': [],
 		},
-	}
-}
+	},
+};

.wp-env.json

@@ -1,8 +1,5 @@
 {
-	"plugins": [
-		".",
-		"https://downloads.wordpress.org/plugin/classic-editor.zip"
-	],
+	"plugins": [ ".", "https://downloads.wordpress.org/plugin/classic-editor.zip" ],
 	"env": {
 		"tests": {
 			"config": {

README.md

@@ -10,21 +10,25 @@ Custom HTML Block Extension extends Custom HTML block to evolve into the advance
 ## Features
 
 ### Various color themes
+
 ![Various color themes](https://raw.githubusercontent.com/t-hamano/custom-html-block-extension/main/assets/images/admin/welcome-guide/slide_2.gif)
 
 There are 50 different color themes to choose from, and you can select the one that best suits your taste.
 
 ### Faster coding with Emmet
+
 ![Faster coding with Emmet](https://raw.githubusercontent.com/t-hamano/custom-html-block-extension/main/assets/images/admin/welcome-guide/slide_3.gif)
 
 Emmet allows you to type shortcuts that are then expanded into full pieces of code. Type less, saving both keystrokes.
 
 ### High customizability
+
 ![High customizability](https://raw.githubusercontent.com/t-hamano/custom-html-block-extension/main/assets/images/admin/welcome-guide/slide_4.jpg)
 
 You can change all kinds of settings to create your ideal editor in advanced mode.
 
 ### More support
+
 ![More support](https://raw.githubusercontent.com/t-hamano/custom-html-block-extension/main/assets/images/admin/welcome-guide/slide_5.jpg)
 
 Supports the classic editor, the theme/plugin editor, import/export editor settings, and change indentation.
@@ -39,7 +43,7 @@ Place the font files in **the public directory** of the server where WordPress i
 It is recommended to create `fonts` folder directly under the theme and place the fonts there.
 Like this:
 
-```
+```sh
 html
 └── wp-content
     └── themes
@@ -58,7 +62,7 @@ Create a CSS file in order to load the placed fonts.
 It is recommend to place the CSS file in `css` folder directly under the theme, just as you did when you placed the font files.
 Like this:
 
-```
+```sh
 html
 ├── wp-content
 │   └── themes
@@ -139,57 +143,66 @@ add_filter( 'chbe_additional_font_families', 'my_chbe_additional_font_families'
 | ---------- | ------ | ------------------------------------------------------------ |
 | label      | string | The label that appears in the font family pull-down in the plugin settings screen. |
 | name       | string | Enter **the value of the font-family property** that you defined in the CSS file in STEP3. |
-| stylesheet | string | Describe **the URL of the CSS file** you placed in STEP2.<br/>We recommend using `get_template_directory_uri` function if you've placed the CSS file in the theme folder, |
-| weight     | array  | Write font weight variations according to the fonts defined in the CSS file.<br />It is recommended to use numeric values 100 to 900 instead of weight names. |
+| stylesheet | string | Describe **the URL of the CSS file** you placed in STEP2. We recommend using `get_template_directory_uri` function if you've placed the CSS file in the theme folder, |
+| weight     | array  | Write font weight variations according to the fonts defined in the CSS file. It is recommended to use numeric values 100 to 900 instead of weight names. |
 
 ### STEP5: Sets custom font
 
 Make sure that the custom font is displayed in the font family pull-down of the settings page. And the font is applied to the preview area when you select it.
 
 ## How to build
 
-```
-$ npm install
-$ npm run build
+```sh
+npm install
+npm run build
 ```
 
 ## Resources
 
 ### monaco-editor
+
 * License: MIT License
-* Source: https://github.com/microsoft/monaco-editor
+* Source: <https://github.com/microsoft/monaco-editor>
 
 ### react-notifications-component
+
 * License: MIT License
-* Source: https://github.com/teodosii/react-notifications-component
+* Source: <https://github.com/teodosii/react-notifications-component>
 
 ### emmet-monaco-es
+
 * License: MIT License
-* Source: https://github.com/troy351/emmet-monaco-es
+* Source: <https://github.com/troy351/emmet-monaco-es>
 
 ### monaco-themes
+
 * License: MIT License
-* Source: https://github.com/brijeshb42/monaco-themes
+* Source: <https://github.com/brijeshb42/monaco-themes>
 
 ### webfontloader
+
 * License: Apache-2.0 License
-* Source: https://github.com/typekit/webfontloader
+* Source: <https://github.com/typekit/webfontloader>
 
 ### Web Font (Fira Code)
+
 * License: OFL-1.1 License
-* Source: https://github.com/tonsky/FiraCode
+* Source: <https://github.com/tonsky/FiraCode>
 
 ### Web Font (Source Code Pro)
+
 * License: OFL-1.1 License
-* Source: https://github.com/adobe-fonts/source-code-pro
+* Source: <https://github.com/adobe-fonts/source-code-pro>
 
 ### Web Font (Ubuntu Mono)
+
 * License: OFL-1.1 License
-* Source: https://ubuntu.com/legal/font-licence
+* Source: <https://ubuntu.com/legal/font-licence>
 
 ### Web Font (Anonymous Pro)
+
 * License: OFL License
-* Source: https://www.marksimonson.com/fonts/view/anonymous-pro
+* Source: <https://www.marksimonson.com/fonts/view/anonymous-pro>
 
 ## Author
 

package.json

@@ -1,7 +1,46 @@
 {
 	"name": "custom-html-block-extension",
+	"version": "3.4.0",
+	"description": "WordPress plugin to extends \"Custom HTML block\" to evolve into an advanced code editor",
 	"author": "Aki Hamano",
-	"license": "GPL-2.0+",
+	"license": "GPL-2.0-or-later",
+	"keywords": [
+		"gutenberg",
+		"block",
+		"html",
+		"highlighting",
+		"emmet"
+	],
+	"homepage": "https://github.com/t-hamano/custom-html-block-extension",
+	"repository": "git+https://github.com/t-hamano/custom-html-block-extension.git",
+	"bugs": {
+		"url": "https://github.com/t-hamano/custom-html-block-extension/issues"
+	},
+	"engines": {
+		"node": ">=16.0.0",
+		"npm": ">=8.0.0"
+	},
+	"volta": {
+		"node": "16.18.0",
+		"npm": "8.19.2"
+	},
+	"dependencies": {
+		"@wordpress/icons": "^9.36.0",
+		"emmet-monaco-es": "^5.3.0",
+		"monaco-editor": "^0.44.0",
+		"react-notifications-component": "^4.0.1",
+		"webfontloader": "^1.6.28"
+	},
+	"devDependencies": {
+		"@deboxsoft/cpx": "^1.5.0",
+		"@wordpress/base-styles": "^4.36.0",
+		"@wordpress/e2e-test-utils": "^10.16.0",
+		"@wordpress/env": "^8.11.0",
+		"@wordpress/scripts": "^26.16.0",
+		"opener": "^1.5.2",
+		"prettier": "npm:[email protected]",
+		"rimraf": "^5.0.5"
+	},
 	"scripts": {
 		"wp-env": "wp-env",
 		"open": "wp-env start && opener http://localhost:8888",
@@ -10,37 +49,16 @@
 		"build": "npm run clean && wp-scripts build src/admin src/block-editor src/classic-editor src/theme-plugin-editor --output-path build && npm run copy-lib",
 		"copy-lib": "cpx -C \"node_modules/monaco-editor/min/**\" \"build/vendor/monaco-editor/min\" && node bin/delete-sourcemaps.js",
 		"clean": "rimraf build",
-		"lint": "npm run lint:php && npm run lint:style && npm run lint:js",
-		"lint:php": "composer lint",
+		"check-licenses": "wp-scripts check-licenses",
+		"lint": "npm run lint:css && npm run lint:js && npm run lint:php && npm run lint:md-docs && npm run lint:pkg-json",
+		"lint:css": "wp-scripts lint-style",
 		"lint:js": "wp-scripts lint-js",
-		"lint:style": "wp-scripts lint-style",
+		"lint:php": "composer lint",
+		"lint:md-docs": "wp-scripts lint-md-docs",
+		"lint:pkg-json": "wp-scripts lint-pkg-json",
+		"format": "wp-scripts format",
 		"test": "npm run lint:js && npm run test:e2e",
 		"test:e2e": "wp-scripts test-playwright",
 		"test:e2e:debug": "wp-scripts test-playwright --debug"
-	},
-	"devDependencies": {
-		"@deboxsoft/cpx": "^1.5.0",
-		"@wordpress/base-styles": "^4.35.0",
-		"@wordpress/e2e-test-utils": "^10.15.0",
-		"@wordpress/env": "^8.10.0",
-		"@wordpress/scripts": "^26.15.0",
-		"opener": "^1.5.2",
-		"prettier": "npm:[email protected]",
-		"rimraf": "^5.0.5"
-	},
-	"dependencies": {
-		"@wordpress/icons": "^9.35.0",
-		"emmet-monaco-es": "^5.3.0",
-		"monaco-editor": "^0.44.0",
-		"react-notifications-component": "^4.0.1",
-		"webfontloader": "^1.6.28"
-	},
-	"engines": {
-		"node": ">=16.0.0",
-		"npm": ">=8.0.0"
-	},
-	"volta": {
-		"node": "16.18.0",
-		"npm": "8.19.2"
 	}
 }