From b378b4387bd42581c78016b2883c1177cefe4446 Mon Sep 17 00:00:00 2001 From: Dieter Date: Tue, 17 Jul 2018 20:38:03 +0200 Subject: [PATCH 1/8] Added Cornerstone toggle to sidebar --- js/src/edit.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/js/src/edit.js b/js/src/edit.js index fde7aba4b46..c505180dad2 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -13,6 +13,7 @@ import ClassicEditorData from "./analysis/classicEditorData.js"; import isGutenbergDataAvailable from "./helpers/isGutenbergDataAvailable"; import SnippetEditor from "./containers/SnippetEditor"; import { ThemeProvider } from "styled-components"; +import CornerstoneToggle from "yoast-components/composites/Plugin/CornerstoneContent/CornerstoneToggle"; // This should be the entry point for all the edit screens. Because of backwards compatibility we can't change this at once. let localizedData = { intl: {}, isRtl: false }; @@ -60,6 +61,7 @@ function registerPlugin() { title="Yoast SEO" >

Contents of the sidebar

+ ); @@ -70,6 +72,12 @@ function registerPlugin() { } } +var cornerstone = false; +function cornerstoneOnChange() { + cornerstone = !cornerstone; + return cornerstone; +} + /** * Wraps a component in the required top level components. * From ce583050acdaaefa39b83b60ad4b521b3489253b Mon Sep 17 00:00:00 2001 From: Dieter Date: Thu, 19 Jul 2018 10:44:01 +0200 Subject: [PATCH 2/8] Added cornerstone toggle to gutenberg sidebar --- js/src/edit.js | 21 +++++++++++++-------- 1 file changed, 13 insertions(+), 8 deletions(-) diff --git a/js/src/edit.js b/js/src/edit.js index c505180dad2..23d468fccb1 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -14,6 +14,7 @@ import isGutenbergDataAvailable from "./helpers/isGutenbergDataAvailable"; import SnippetEditor from "./containers/SnippetEditor"; import { ThemeProvider } from "styled-components"; import CornerstoneToggle from "yoast-components/composites/Plugin/CornerstoneContent/CornerstoneToggle"; +import Styled from "styled-components"; // This should be the entry point for all the edit screens. Because of backwards compatibility we can't change this at once. let localizedData = { intl: {}, isRtl: false }; @@ -36,6 +37,14 @@ function registerStoreInGutenberg() { } ); } +const YoastSidebarContainer = Styled.div` + padding: 16px; +`; + +function cornerstoneOnChange() { + console.log("Clicked"); +} + /** * Registers the plugin into the gutenberg editor, creates a sidebar entry for the plugin, * and creates that sidebar's content. @@ -60,8 +69,10 @@ function registerPlugin() { name="seo-sidebar" title="Yoast SEO" > -

Contents of the sidebar

- + +

Contents of the sidebar

+ + ); @@ -72,12 +83,6 @@ function registerPlugin() { } } -var cornerstone = false; -function cornerstoneOnChange() { - cornerstone = !cornerstone; - return cornerstone; -} - /** * Wraps a component in the required top level components. * From a4661e0cefe0e586cd2625ee1249679e469a9599 Mon Sep 17 00:00:00 2001 From: boblinthorst Date: Thu, 19 Jul 2018 12:20:01 +0200 Subject: [PATCH 3/8] changed props --- js/src/edit.js | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/js/src/edit.js b/js/src/edit.js index 23d468fccb1..8eba4793afb 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -41,10 +41,6 @@ const YoastSidebarContainer = Styled.div` padding: 16px; `; -function cornerstoneOnChange() { - console.log("Clicked"); -} - /** * Registers the plugin into the gutenberg editor, creates a sidebar entry for the plugin, * and creates that sidebar's content. @@ -71,7 +67,9 @@ function registerPlugin() { >

Contents of the sidebar

- + { + console.log( "clicked" ); + } } checked={ true } /> From 21a81cdafa7e1c3a2b8b2579b0c09fa9d7e918f6 Mon Sep 17 00:00:00 2001 From: Dieter Date: Thu, 19 Jul 2018 14:05:30 +0200 Subject: [PATCH 4/8] cleaned up code a bit --- js/src/edit.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/js/src/edit.js b/js/src/edit.js index 8eba4793afb..6ee836b34cb 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -13,7 +13,7 @@ import ClassicEditorData from "./analysis/classicEditorData.js"; import isGutenbergDataAvailable from "./helpers/isGutenbergDataAvailable"; import SnippetEditor from "./containers/SnippetEditor"; import { ThemeProvider } from "styled-components"; -import CornerstoneToggle from "yoast-components/composites/Plugin/CornerstoneContent/CornerstoneToggle"; +import CornerstoneToggle from "yoast-components/composites/Plugin/CornerstoneContent/components/CornerstoneToggle"; import Styled from "styled-components"; // This should be the entry point for all the edit screens. Because of backwards compatibility we can't change this at once. @@ -67,9 +67,7 @@ function registerPlugin() { >

Contents of the sidebar

- { - console.log( "clicked" ); - } } checked={ true } /> + {} } checked={ true } /> From 48223f1408a75cf8b5aad015a6da9441349e5764 Mon Sep 17 00:00:00 2001 From: Dieter Date: Fri, 20 Jul 2018 09:26:39 +0200 Subject: [PATCH 5/8] Fixed CS after PR --- js/src/edit.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/js/src/edit.js b/js/src/edit.js index 6ee836b34cb..a9c6dbfcf70 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -14,7 +14,7 @@ import isGutenbergDataAvailable from "./helpers/isGutenbergDataAvailable"; import SnippetEditor from "./containers/SnippetEditor"; import { ThemeProvider } from "styled-components"; import CornerstoneToggle from "yoast-components/composites/Plugin/CornerstoneContent/components/CornerstoneToggle"; -import Styled from "styled-components"; +import styled from "styled-components"; // This should be the entry point for all the edit screens. Because of backwards compatibility we can't change this at once. let localizedData = { intl: {}, isRtl: false }; @@ -37,7 +37,7 @@ function registerStoreInGutenberg() { } ); } -const YoastSidebarContainer = Styled.div` +const YoastSidebarContainer = styled.div` padding: 16px; `; @@ -68,7 +68,7 @@ function registerPlugin() {

Contents of the sidebar

{} } checked={ true } /> - + ); From 221ed345cb7e89a8f7befa9e8cf7c1387169e3f2 Mon Sep 17 00:00:00 2001 From: Dieter Date: Mon, 23 Jul 2018 13:59:05 +0200 Subject: [PATCH 6/8] Added css loader, sass loader and webpack update --- package.json | 5 ++++- webpack/webpack.config.default.js | 7 +++++++ 2 files changed, 11 insertions(+), 1 deletion(-) diff --git a/package.json b/package.json index 4084a30f051..59d87f7c6e5 100644 --- a/package.json +++ b/package.json @@ -57,6 +57,7 @@ "babel-preset-react": "^6.11.1", "babelify": "^7.3.0", "copy-webpack-plugin": "^4.0.1", + "css-loader": "^1.0.0", "envify": "^3.4.1", "enzyme": "^3.3.0", "enzyme-adapter-react-16": "^1.1.1", @@ -90,15 +91,17 @@ "i18n-calypso": "^1.8.4", "jest": "^23.3.0", "load-grunt-config": "^0.19.2", + "node-sass": "^4.9.2", "raf": "^3.4.0", "react": "^16.2.0", "react-dom": "16.2.0", "redux-logger": "^3.0.6", + "sass-loader": "^7.0.3", "sassdash": "^0.8.1", "svg-react-loader": "^0.4.5", "time-grunt": "^1.0.0", "unminified-webpack-plugin": "^1.4.2", - "webpack": "^3.4.1", + "webpack": "^3.12.0", "webpack-dev-server": "^2.11.0" }, "optionalDependencies": { diff --git a/webpack/webpack.config.default.js b/webpack/webpack.config.default.js index 0127d8c95f0..5dcffe14b7d 100644 --- a/webpack/webpack.config.default.js +++ b/webpack/webpack.config.default.js @@ -90,6 +90,13 @@ const defaultWebpackConfig = { test: /\.json$/, use: [ "json-loader" ], }, + { + test: /\.scss$/, + use: [ + "css-loader", + "sass-loader", + ], + }, ], }, externals, From 25b4d288817f8745e5a91f6d6f9e33ffba631f08 Mon Sep 17 00:00:00 2001 From: Dieter Date: Mon, 23 Jul 2018 16:52:04 +0200 Subject: [PATCH 7/8] Fixed small CS error --- js/src/edit.js | 1 - 1 file changed, 1 deletion(-) diff --git a/js/src/edit.js b/js/src/edit.js index 3fc4cb2a4a8..83f63515ca9 100644 --- a/js/src/edit.js +++ b/js/src/edit.js @@ -5,7 +5,6 @@ import ReactDOM from "react-dom"; import { Provider } from "react-redux"; import flatten from "lodash/flatten"; import { ThemeProvider } from "styled-components"; -import styled from "styled-components"; /* Internal dependencies */ import IntlProvider from "./components/IntlProvider"; From c38961e2ca5bb21809ecc0bb1be3c733681daf79 Mon Sep 17 00:00:00 2001 From: Dieter Date: Tue, 24 Jul 2018 13:58:22 +0200 Subject: [PATCH 8/8] Started implementing gutenberg components --- package.json | 6 ++ webpack/dependencies/post-css-config.js | 64 ++++++++++++++++++++ webpack/webpack.config.default.js | 78 ++++++++++++++++++++++++- 3 files changed, 145 insertions(+), 3 deletions(-) create mode 100644 webpack/dependencies/post-css-config.js diff --git a/package.json b/package.json index 59d87f7c6e5..1f3355cd63d 100644 --- a/package.json +++ b/package.json @@ -65,6 +65,7 @@ "eslint-config-yoast": "^1.3.1", "eslint-plugin-react": "^6.0.0", "eslint-plugin-yoast": "^1.0.1", + "extract-text-webpack-plugin": "^3.0.2", "grunt": "^1.0.2", "grunt-browserify": "^5.0.0", "grunt-checktextdomain": "^1.0.1", @@ -92,7 +93,9 @@ "jest": "^23.3.0", "load-grunt-config": "^0.19.2", "node-sass": "^4.9.2", + "postcss-loader": "^2.1.6", "raf": "^3.4.0", + "raw-loader": "^0.5.1", "react": "^16.2.0", "react-dom": "16.2.0", "redux-logger": "^3.0.6", @@ -110,6 +113,7 @@ "dependencies": { "@wordpress/i18n": "^1.1.1", "@wordpress/is-shallow-equal": "^1.0.2", + "@wordpress/postcss-themes": "^1.0.1", "a11y-speak": "git+https://github.com/Yoast/a11y-speak.git#master", "babel-polyfill": "^6.26.0", "draft-js": "^0.10.5", @@ -120,8 +124,10 @@ "interpolate-components": "^1.1.0", "jed": "^1.1.1", "lodash": "^4.17.4", + "lodash.defaultsdeep": "^4.6.0", "marked": "^0.3.6", "material-ui": "^0.20.0", + "postcss-color-function": "^4.0.1", "prop-types": "^15.5.10", "react-intl": "^2.4.0", "react-redux": "^5.0.6", diff --git a/webpack/dependencies/post-css-config.js b/webpack/dependencies/post-css-config.js new file mode 100644 index 00000000000..bbcef9bc36e --- /dev/null +++ b/webpack/dependencies/post-css-config.js @@ -0,0 +1,64 @@ +module.exports = [ + require( '@wordpress/postcss-themes' )( { + defaults: { + primary: '#0085ba', + secondary: '#11a0d2', + toggle: '#11a0d2', + button: '#0085ba', + outlines: '#007cba', + }, + themes: { + 'admin-color-light': { + primary: '#0085ba', + secondary: '#c75726', + toggle: '#11a0d2', + button: '#0085ba', + outlines: '#007cba', + }, + 'admin-color-blue': { + primary: '#82b4cb', + secondary: '#d9ab59', + toggle: '#82b4cb', + button: '#d9ab59', + outlines: '#417e9B', + }, + 'admin-color-coffee': { + primary: '#c2a68c', + secondary: '#9fa47b', + toggle: '#c2a68c', + button: '#c2a68c', + outlines: '#59524c', + }, + 'admin-color-ectoplasm': { + primary: '#a7b656', + secondary: '#c77430', + toggle: '#a7b656', + button: '#a7b656', + outlines: '#523f6d', + }, + 'admin-color-midnight': { + primary: '#e14d43', + secondary: '#77a6b9', + toggle: '#77a6b9', + button: '#e14d43', + outlines: '#497b8d', + }, + 'admin-color-ocean': { + primary: '#a3b9a2', + secondary: '#a89d8a', + toggle: '#a3b9a2', + button: '#a3b9a2', + outlines: '#5e7d5e', + }, + 'admin-color-sunrise': { + primary: '#d1864a', + secondary: '#c8b03c', + toggle: '#c8b03c', + button: '#d1864a', + outlines: '#837425', + }, + }, + } ), + require( 'autoprefixer' ), + require( 'postcss-color-function' ), +]; \ No newline at end of file diff --git a/webpack/webpack.config.default.js b/webpack/webpack.config.default.js index 99094d626d8..91598a1cc97 100644 --- a/webpack/webpack.config.default.js +++ b/webpack/webpack.config.default.js @@ -8,6 +8,8 @@ const pkg = require( "../package.json" ); const pluginVersionSlug = paths.flattenVersionForFile( pkg.yoast.pluginVersion ); const outputFilename = "[name]-" + pluginVersionSlug + ".min.js"; +const ExtractTextPlugin = require( "extract-text-webpack-plugin" ); +const postCSSPlugin = require( "./dependencies/post-css-config" ); const externals = { // This is necessary for Gutenberg to work. @@ -44,6 +46,47 @@ wpDependencies.forEach( wpDependency => { ); } ); +// CSS loader for styles specific to blocks in general. +const blocksCSSPlugin = new ExtractTextPlugin( { + filename: "./build/core-blocks/style.css", +} ); + +// Main CSS loader for everything but blocks.. +const mainCSSExtractTextPlugin = new ExtractTextPlugin( { + filename: './build/[basename]/style.css', +} ); + +// CSS loader for styles specific to block editing. +const editBlocksCSSPlugin = new ExtractTextPlugin( { + filename: './build/core-blocks/edit-blocks.css', +} ); + +// CSS loader for default visual block styles. +const themeBlocksCSSPlugin = new ExtractTextPlugin( { + filename: './build/core-blocks/theme.css', +} ); + +// Configuration for the ExtractTextPlugin. +const extractConfig = { + use: [ + { loader: "raw-loader" }, + { + loader: "postcss-loader", + options: { + plugins: postCSSPlugin, + }, + }, + { + loader: "sass-loader", + query: { + includePaths: [ "edit-post/assets/stylesheets" ], + data: '@import "colors"; @import "breakpoints"; @import "variables"; @import "mixins"; @import "animations";@import "z-index";', + outputStyle: "production" === process.env.NODE_ENV + ? "compressed" : "nested", + }, + }, + ], +}; const defaultWebpackConfig = { devtool: "cheap-module-eval-source-map", @@ -87,16 +130,44 @@ const defaultWebpackConfig = { }, ], }, + { + test: /style\.s?css$/, + include: [ + /core-blocks/, + ], + use: blocksCSSPlugin.extract( extractConfig ), + }, + { + test: /editor\.s?css$/, + include: [ + /core-blocks/, + ], + use: editBlocksCSSPlugin.extract( extractConfig ), + }, + { + test: /theme\.s?css$/, + include: [ + /core-blocks/, + ], + use: themeBlocksCSSPlugin.extract( extractConfig ), + }, + { + test: /\.s?css$/, + exclude: [ + /core-blocks/, + ], + use: mainCSSExtractTextPlugin.extract( extractConfig ), + }, { test: /\.json$/, use: [ "json-loader" ], }, { test: /\.scss$/, - use: [ - "css-loader", - "sass-loader", + include: [ + /node_modules\/gutenberg/, ], + use: blocksCSSPlugin.extract( extractConfig ), }, ], }, @@ -107,6 +178,7 @@ const defaultWebpackConfig = { NODE_ENV: JSON.stringify( "production" ), }, } ), + blocksCSSPlugin, new UnminifiedWebpackPlugin(), new webpack.optimize.UglifyJsPlugin(), new webpack.optimize.AggressiveMergingPlugin(),