From 59713d6483ee56b265cbcfe42e66bc872ffedf37 Mon Sep 17 00:00:00 2001 From: Brady Vercher Date: Fri, 26 Feb 2021 20:33:15 -0800 Subject: [PATCH 01/10] Update the webpack config and npm dependencies. --- .babelrc | 43 +-------------------------- blocks/code/index.js | 2 -- package.json | 42 +++++++++++++------------- webpack.config.js | 70 ++++++++++++++++---------------------------- 4 files changed, 46 insertions(+), 111 deletions(-) diff --git a/.babelrc b/.babelrc index 233a202..9704a95 100644 --- a/.babelrc +++ b/.babelrc @@ -1,44 +1,3 @@ { - "presets": [ - [ "env", { - "modules": false, - "targets": { - "browsers": [ - "last 2 Chrome versions", - "last 2 Firefox versions", - "last 2 Safari versions", - "last 2 Edge versions", - "last 2 Opera versions", - "last 2 iOS versions", - "last 1 Android version", - "last 1 ChromeAndroid version", - "ie 11", - "> 1%" - ] - } - } ] - ], - "plugins": [ - "transform-object-rest-spread", - [ "transform-react-jsx", { - "pragma": "wp.element.createElement" - } ] - ], - "env": { - "default": { - "plugins": [ - "transform-runtime" - ] - }, - "test": { - "presets": [ "env" ] - }, - "gettext": { - "plugins": [ - [ "./i18n/babel-plugin", { - "output": "languages/shiny-code.pot" - } ] - ] - } - } + "presets": [ "@wordpress/default" ] } diff --git a/blocks/code/index.js b/blocks/code/index.js index d357ad3..75d7a8d 100644 --- a/blocks/code/index.js +++ b/blocks/code/index.js @@ -1,5 +1,3 @@ -import './editor.scss'; - import classnames from 'classnames'; import { blocks, i18n } from 'wp'; import CodeBlockEdit from './edit'; diff --git a/package.json b/package.json index e4a4c18..739fe4a 100644 --- a/package.json +++ b/package.json @@ -6,30 +6,28 @@ "license": "GPL-2.0-or-later", "repository": "cedaro/shiny-code", "dependencies": { - "classnames": "^2.2.5" + "classnames": "^2.2.6" }, "devDependencies": { - "archiver": "^3.0.0", - "autoprefixer": "^9.0.2", - "babel-core": "^6.26.0", - "babel-loader": "^7.1.5", - "babel-plugin-lodash": "3.3.4", - "babel-plugin-transform-object-rest-spread": "^6.26.0", - "babel-plugin-transform-react-jsx": "6.24.1", - "babel-plugin-transform-runtime": "6.23.0", - "babel-preset-env": "^1.6.0", - "extract-text-webpack-plugin": "^4.0.0-beta.0", - "fs-extra": "^7.0.0", - "glob": "^7.1.2", - "minimist": "^1.2.0", - "node-sass": "4.11.0", - "node-wp-i18n": "^1.2.0", - "postcss-loader": "^3.0.0", - "raw-loader": "^1.0.0", - "sass-loader": "^7.1.0", - "style-loader": "^0.23.1", - "webpack": "^4.16.3", - "webpack-cli": "^3.1.0" + "@babel/core": "^7.13.8", + "@wordpress/babel-preset-default": "^5.0.1", + "archiver": "^5.2.0", + "autoprefixer": "^10.2.4", + "babel-loader": "^8.2.2", + "css-loader": "^5.1.0", + "fs-extra": "^9.1.0", + "glob": "^7.1.6", + "mini-css-extract-plugin": "^1.3.9", + "minimist": "^1.2.5", + "node-wp-i18n": "^1.2.5", + "postcss": "^8.2.6", + "postcss-loader": "^5.0.0", + "sass": "^1.32.8", + "sass-loader": "^11.0.1", + "style-loader": "^2.0.0", + "webpack": "^5.24.2", + "webpack-cli": "^4.5.0", + "webpack-remove-empty-scripts": "^0.7.1" }, "scripts": { "build": "BABEL_ENV=default NODE_ENV=production webpack", diff --git a/webpack.config.js b/webpack.config.js index 01a961f..3cffa39 100644 --- a/webpack.config.js +++ b/webpack.config.js @@ -1,44 +1,21 @@ const webpack = require( 'webpack' ); -const ExtractTextPlugin = require( 'extract-text-webpack-plugin' ); +const MiniCssExtractPlugin = require( 'mini-css-extract-plugin' ); +const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' ); const mode = process.env.NODE_ENV || 'development'; -const editorCSSPlugin = new ExtractTextPlugin( { - filename: 'build/css/editor.css' -} ); - -const themesCSSPlugin = new ExtractTextPlugin( { - filename: 'build/[name]' -} ); - -const extractConfig = { - use: [ - { loader: 'raw-loader' }, - { - loader: 'postcss-loader', - options: { - plugins: [ - require( 'autoprefixer' ), - ], - }, - }, - { - loader: 'sass-loader' - }, - ], -}; - const config = { mode: mode, entry: { - 'js/editor.js': './blocks/editor.js', - 'css/themes/atom-one-dark/prism.css': './blocks/code/scss/themes/atom-one-dark/prism.scss', - 'css/themes/atom-one-light/prism.css': './blocks/code/scss/themes/atom-one-light/prism.scss', - 'css/themes/atom-one-dark/codemirror.css': './blocks/code/scss/themes/atom-one-dark/codemirror.scss', - 'css/themes/atom-one-light/codemirror.css': './blocks/code/scss/themes/atom-one-light/codemirror.scss' + 'js/editor': './blocks/editor.js', + 'css/editor': './blocks/code/editor.scss', + 'css/themes/atom-one-dark/prism': './blocks/code/scss/themes/atom-one-dark/prism.scss', + 'css/themes/atom-one-light/prism': './blocks/code/scss/themes/atom-one-light/prism.scss', + 'css/themes/atom-one-dark/codemirror': './blocks/code/scss/themes/atom-one-dark/codemirror.scss', + 'css/themes/atom-one-light/codemirror': './blocks/code/scss/themes/atom-one-light/codemirror.scss' }, output: { path: __dirname, - filename: 'build/[name]' + filename: 'build/[name].js' }, externals: { _: '_', @@ -54,25 +31,28 @@ const config = { exclude: /node_modules/, use: 'babel-loader' }, - { - test: /editor\.s?css$/, - include: [ - /blocks/, - ], - use: editorCSSPlugin.extract( extractConfig ), - }, { test: /.*\.scss$/, - include: [ - /scss\/themes/, - ], - use: themesCSSPlugin.extract( extractConfig ), + use: [ + MiniCssExtractPlugin.loader, + { + loader: 'css-loader' + }, + { + loader: 'postcss-loader' + }, + { + loader: 'sass-loader' + } + ] } ] }, plugins: [ - editorCSSPlugin, - themesCSSPlugin, + new RemoveEmptyScriptsPlugin(), + new MiniCssExtractPlugin( { + filename: 'build/[name].css' + } ) ] }; From 00e469758412115ff9d87a2f3ed038136b07b709 Mon Sep 17 00:00:00 2001 From: Brady Vercher Date: Fri, 26 Feb 2021 20:34:12 -0800 Subject: [PATCH 02/10] Import InspectorControls from blockEditor instead of the editor package. --- blocks/code/edit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/blocks/code/edit.js b/blocks/code/edit.js index f6a3900..ba30eda 100644 --- a/blocks/code/edit.js +++ b/blocks/code/edit.js @@ -1,11 +1,11 @@ import classnames from 'classnames'; -import { components, data, editor, element, i18n } from 'wp'; +import { blockEditor, components, data, element, i18n } from 'wp'; import CodeEditor from './code-editor'; import { languageChoices } from './settings'; +const { InspectorControls } = blockEditor; const { PanelBody, SelectControl, TextControl, ToggleControl } = components; -const { select, withSelect } = data; -const { InspectorControls } = editor; +const { withSelect } = data; const { Component, Fragment } = element; const { __ } = i18n; From c7477e52d68f844c07e48fc1db5e595d2dc7e4e8 Mon Sep 17 00:00:00 2001 From: Brady Vercher Date: Sat, 23 Nov 2024 13:52:14 -0800 Subject: [PATCH 03/10] Add the text domain to i18n calls in JavaScript files. --- blocks/code/code-editor.js | 2 +- blocks/code/edit.js | 8 ++++---- blocks/code/index.js | 3 +-- blocks/code/sidebar.js | 12 ++++++------ 4 files changed, 12 insertions(+), 13 deletions(-) diff --git a/blocks/code/code-editor.js b/blocks/code/code-editor.js index ae7b336..68a52af 100644 --- a/blocks/code/code-editor.js +++ b/blocks/code/code-editor.js @@ -88,7 +88,7 @@ export default class CodeEditor extends Component { return (