diff --git a/package-lock.json b/package-lock.json index d394996..f8118cc 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "1.0.0", "license": "GPL-3.0-or-later", "dependencies": { + "@wordpress/icons": "^9.39.0", "classnames": "^2.3.2" }, "devDependencies": { @@ -2009,7 +2010,6 @@ "version": "7.23.6", "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.23.6.tgz", "integrity": "sha512-zHd0eUrf5GZoOWVCXp6koAKQTfZV07eit6bGPmJgnZdnSAvvZee6zniW2XMF7Cmc4ISOOnPy3QaSiIJGJkVEDQ==", - "dev": true, "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -3764,6 +3764,11 @@ "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==", "dev": true }, + "node_modules/@types/prop-types": { + "version": "15.7.11", + "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.11.tgz", + "integrity": "sha512-ga8y9v9uyeiLdpKddhxYQkxNDrfvuPrlFb0N1qnZZByvcElJaXthF1UhvCh9TLWJBEHeNtdnbysW7Y6Uq8CVng==" + }, "node_modules/@types/qs": { "version": "6.9.10", "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.10.tgz", @@ -3776,12 +3781,35 @@ "integrity": "sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ==", "dev": true }, + "node_modules/@types/react": { + "version": "18.2.45", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.2.45.tgz", + "integrity": "sha512-TtAxCNrlrBp8GoeEp1npd5g+d/OejJHFxS3OWmrPBMFaVQMSN0OFySozJio5BHxTuTeug00AVXVAjfDSfk+lUg==", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "*", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom": { + "version": "18.2.18", + "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", + "integrity": "sha512-TJxDm6OfAX2KJWJdMEVTwWke5Sc/E/RlnPGvGfS0W7+6ocy2xhDVQVh/KvC2Uf7kACs+gDytdusDSdWfWkaNzw==", + "dependencies": { + "@types/react": "*" + } + }, "node_modules/@types/retry": { "version": "0.12.0", "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz", "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==", "dev": true }, + "node_modules/@types/scheduler": { + "version": "0.16.8", + "resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.8.tgz", + "integrity": "sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==" + }, "node_modules/@types/semver": { "version": "7.5.6", "resolved": "https://registry.npmjs.org/@types/semver/-/semver-7.5.6.tgz", @@ -4536,6 +4564,43 @@ "@playwright/test": ">=1" } }, + "node_modules/@wordpress/element": { + "version": "5.25.0", + "resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.25.0.tgz", + "integrity": "sha512-8FFK1wJ/4n7Y7s3wWRJinoX5WSPbgnJJawYEc6f5Jc7cG+OddHiWZQkU94o6lnRRm0+cCarxMV8K8hNI2Jc7OQ==", + "dependencies": { + "@babel/runtime": "^7.16.0", + "@types/react": "^18.0.21", + "@types/react-dom": "^18.0.6", + "@wordpress/escape-html": "^2.48.0", + "change-case": "^4.1.2", + "is-plain-object": "^5.0.0", + "react": "^18.2.0", + "react-dom": "^18.2.0" + }, + "engines": { + "node": ">=12" + } + }, + "node_modules/@wordpress/element/node_modules/is-plain-object": { + "version": "5.0.0", + "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz", + "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==", + "engines": { + "node": ">=0.10.0" + } + }, + "node_modules/@wordpress/escape-html": { + "version": "2.48.0", + "resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.48.0.tgz", + "integrity": "sha512-zWOJWyRYVddJeZHnAJzV8f58+0GukbIdp+EcbNuRVm+Q2rhv0BpyO1HJB3Z8ba35whtNcGWJibk9WqdMzBAMAw==", + "dependencies": { + "@babel/runtime": "^7.16.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/eslint-plugin": { "version": "17.5.0", "resolved": "https://registry.npmjs.org/@wordpress/eslint-plugin/-/eslint-plugin-17.5.0.tgz", @@ -4663,6 +4728,19 @@ "node": ">=12" } }, + "node_modules/@wordpress/icons": { + "version": "9.39.0", + "resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-9.39.0.tgz", + "integrity": "sha512-5L0VseLEDtZv1P/weUmwiTLGYCnXuTLtpqLN/CUo7o3TqqrNIK7xubXlFVKd7zeUOpVQAG+S/BgnaWIXru9N5w==", + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/element": "^5.25.0", + "@wordpress/primitives": "^3.46.0" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/jest-console": { "version": "7.19.0", "resolved": "https://registry.npmjs.org/@wordpress/jest-console/-/jest-console-7.19.0.tgz", @@ -4749,6 +4827,19 @@ "prettier": ">=3" } }, + "node_modules/@wordpress/primitives": { + "version": "3.46.0", + "resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-3.46.0.tgz", + "integrity": "sha512-KCNr1PqswT9XZoar53HC0e94TF3Sd96DQGvueMZVUE2YPdD96p3EWJjDRhmya+U63yVdHec+35fPDm+aJQQDdQ==", + "dependencies": { + "@babel/runtime": "^7.16.0", + "@wordpress/element": "^5.25.0", + "classnames": "^2.3.1" + }, + "engines": { + "node": ">=12" + } + }, "node_modules/@wordpress/scripts": { "version": "26.19.0", "resolved": "https://registry.npmjs.org/@wordpress/scripts/-/scripts-26.19.0.tgz", @@ -5990,7 +6081,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz", "integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==", - "dev": true, "dependencies": { "pascal-case": "^3.1.2", "tslib": "^2.0.3" @@ -6079,7 +6169,6 @@ "version": "1.0.4", "resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz", "integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==", - "dev": true, "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3", @@ -6106,7 +6195,6 @@ "version": "4.1.2", "resolved": "https://registry.npmjs.org/change-case/-/change-case-4.1.2.tgz", "integrity": "sha512-bSxY2ws9OtviILG1EiY5K7NNxkqg/JnRnFxLtKQ96JaviiIxi7djMrSd0ECT9AC+lttClmYwKw53BWpOMblo7A==", - "dev": true, "dependencies": { "camel-case": "^4.1.2", "capital-case": "^1.0.4", @@ -6495,7 +6583,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-3.0.4.tgz", "integrity": "sha512-I2hSBi7Vvs7BEuJDr5dDHfzb/Ruj3FyvFyh7KLilAjNQw3Be+xgqUBA2W6scVEcL0hL1dwPRtIqEPVUCKkSsyQ==", - "dev": true, "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3", @@ -7096,6 +7183,11 @@ "integrity": "sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==", "dev": true }, + "node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" + }, "node_modules/cwd": { "version": "0.10.0", "resolved": "https://registry.npmjs.org/cwd/-/cwd-0.10.0.tgz", @@ -7756,7 +7848,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz", "integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==", - "dev": true, "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3" @@ -10014,7 +10105,6 @@ "version": "2.0.4", "resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz", "integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==", - "dev": true, "dependencies": { "capital-case": "^1.0.4", "tslib": "^2.0.3" @@ -11869,8 +11959,7 @@ "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", - "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==", - "dev": true + "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==" }, "node_modules/js-yaml": { "version": "3.14.1", @@ -12479,7 +12568,6 @@ "version": "1.4.0", "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz", "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==", - "dev": true, "dependencies": { "js-tokens": "^3.0.0 || ^4.0.0" }, @@ -12491,7 +12579,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz", "integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==", - "dev": true, "dependencies": { "tslib": "^2.0.3" } @@ -13178,7 +13265,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/no-case/-/no-case-3.0.4.tgz", "integrity": "sha512-fgAN3jGAh+RoxUGZHTSOLJIqUc2wmoBwGR4tbpNAKmmovFoWq0OdRkb0VkldReO2a2iBT/OEulG9XSUc10r3zg==", - "dev": true, "dependencies": { "lower-case": "^2.0.2", "tslib": "^2.0.3" @@ -13831,7 +13917,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz", "integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==", - "dev": true, "dependencies": { "dot-case": "^3.0.4", "tslib": "^2.0.3" @@ -13907,7 +13992,6 @@ "version": "3.1.2", "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.2.tgz", "integrity": "sha512-uWlGT3YSnK9x3BQJaOdcZwrnV6hPpd8jFH1/ucpiLRPh/2zCVJKS19E4GvYHvaCcACn3foXZ0cLB9Wrx1KGe5g==", - "dev": true, "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3" @@ -13917,7 +14001,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/path-case/-/path-case-3.0.4.tgz", "integrity": "sha512-qO4qCFjXqVTrcbPt/hQfhTQ+VhFsqNKOPtytgNKkKxSoEp3XPUQ8ObFuePylOIok5gjn69ry8XiULxCwot3Wfg==", - "dev": true, "dependencies": { "dot-case": "^3.0.4", "tslib": "^2.0.3" @@ -15364,7 +15447,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz", "integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==", - "dev": true, "dependencies": { "loose-envify": "^1.1.0" }, @@ -15376,8 +15458,6 @@ "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", "integrity": "sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==", - "dev": true, - "peer": true, "dependencies": { "loose-envify": "^1.1.0", "scheduler": "^0.23.0" @@ -15631,8 +15711,7 @@ "node_modules/regenerator-runtime": { "version": "0.14.1", "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz", - "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==", - "dev": true + "integrity": "sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==" }, "node_modules/regenerator-transform": { "version": "0.15.2", @@ -16046,8 +16125,6 @@ "version": "0.23.0", "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz", "integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==", - "dev": true, - "peer": true, "dependencies": { "loose-envify": "^1.1.0" } @@ -16159,7 +16236,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-3.0.4.tgz", "integrity": "sha512-8LS0JInaQMCRoQ7YUytAo/xUu5W2XnQxV2HI/6uM6U7CITS1RqPElr30V6uIqyMKM9lJGRVFy5/4CuzcixNYSg==", - "dev": true, "dependencies": { "no-case": "^3.0.4", "tslib": "^2.0.3", @@ -16459,7 +16535,6 @@ "version": "3.0.4", "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-3.0.4.tgz", "integrity": "sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==", - "dev": true, "dependencies": { "dot-case": "^3.0.4", "tslib": "^2.0.3" @@ -17706,8 +17781,7 @@ "node_modules/tslib": { "version": "2.6.2", "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.6.2.tgz", - "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==", - "dev": true + "integrity": "sha512-AEYxH93jGFPn/a2iVAwW87VuUIkR1FVUKB77NwMF7nBTDkDrrT/Hpt/IrCJ0QXhW27jTBDcf5ZY7w6RiqTMw2Q==" }, "node_modules/tsutils": { "version": "3.21.0", @@ -18014,7 +18088,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz", "integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==", - "dev": true, "dependencies": { "tslib": "^2.0.3" } @@ -18023,7 +18096,6 @@ "version": "2.0.2", "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-2.0.2.tgz", "integrity": "sha512-514ppYHBaKwfJRK/pNC6c/OxfGa0obSnAl106u97Ed0I625Nin96KAjttZF6ZL3e1XLtphxnqrOi9iWgm+u+bg==", - "dev": true, "dependencies": { "tslib": "^2.0.3" } diff --git a/package.json b/package.json index cc937ef..7a0bb92 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "pre-commit": "npm run lint:js && composer run-script lint && composer run-script phpstan" }, "dependencies": { + "@wordpress/icons": "^9.39.0", "classnames": "^2.3.2" } } diff --git a/src/components/TemplatePreview.js b/src/components/TemplatePreview.js new file mode 100644 index 0000000..26525e1 --- /dev/null +++ b/src/components/TemplatePreview.js @@ -0,0 +1,17 @@ +/** + * WordPress dependencies. + */ +import { BlockPreview } from '@wordpress/block-editor'; + +const TemplatePreview = ({ template }) => { + return ( +
+ +
+ ); +}; + +export default TemplatePreview; diff --git a/src/parts/ColorPalette.js b/src/parts/ColorPalette.js index f532415..9f3f58a 100644 --- a/src/parts/ColorPalette.js +++ b/src/parts/ColorPalette.js @@ -3,11 +3,21 @@ */ import { __ } from '@wordpress/i18n'; -import { BlockPreview } from '@wordpress/block-editor'; +import { + Button, + ColorIndicator, + TextControl +} from '@wordpress/components'; -import { Button, ColorIndicator, TextControl } from '@wordpress/components'; +import { + useDispatch, + useSelect +} from '@wordpress/data'; -import { useDispatch, useSelect } from '@wordpress/data'; +/** + * Internal dependencies. + */ +import TemplatePreview from '../components/TemplatePreview'; const palette = [ { @@ -97,9 +107,7 @@ const ColorPalette = () => { -
- -
+ ); }; diff --git a/src/parts/ImageSuggestions.js b/src/parts/ImageSuggestions.js new file mode 100644 index 0000000..12210d4 --- /dev/null +++ b/src/parts/ImageSuggestions.js @@ -0,0 +1,94 @@ +/** + * External dependencies. + */ +import classNames from 'classnames'; + +import { check } from '@wordpress/icons'; + +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +import { + Button, + Icon +} from '@wordpress/components'; + +import { useDispatch } from '@wordpress/data'; + +import { useState } from '@wordpress/element'; + +const dummy = [ + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52172949534_aa8893fd8f_c.jpg?v=1', + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52171667257_e4c90f0a38_c.jpg?v=2', + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52172949534_aa8893fd8f_c.jpg?v=3', + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52172949534_aa8893fd8f_c.jpg?v=4', + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52172949534_aa8893fd8f_c.jpg?v=5', + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52171667257_e4c90f0a38_c.jpg?v=6', + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52171667257_e4c90f0a38_c.jpg?v=7', + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52172949534_aa8893fd8f_c.jpg?v=8', + 'https://mystock.themeisle.com/wp-content/uploads/2022/06/52171667257_e4c90f0a38_c.jpg?v=9' +]; + +const ImageSuggestions = () => { + const [ value, setValue ] = useState([]); + + const { onContinue } = useDispatch( 'quickwp/data' ); + + return ( +
+
+

+ { __( + 'Pick out images that you like, and we\'ll include them in the designs.', + 'quickwp' + ) } +

+ + +
+ +
+
+ { dummy.map( ( image, index ) => ( +
{ + if ( value.includes( image ) ) { + setValue( value.filter( ( item ) => item !== image ) ); + } else { + setValue([ ...value, image ]); + } + }} + > + { value.includes( image ) && ( +
+ +
+ ) } + + +
+ ) ) } +
+
+
+ ); +}; + +export default ImageSuggestions; diff --git a/src/parts/Template.js b/src/parts/Template.js new file mode 100644 index 0000000..1b0295f --- /dev/null +++ b/src/parts/Template.js @@ -0,0 +1,95 @@ +/** + * External dependencies. + */ +import classNames from 'classnames'; + +import { check } from '@wordpress/icons'; + +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +import { + Button, + Icon +} from '@wordpress/components'; + +import { + useDispatch, + useSelect +} from '@wordpress/data'; + +import { useState } from '@wordpress/element'; + +/** + * Internal dependencies. + */ +import TemplatePreview from '../components/TemplatePreview'; + +const dummy = [ 1, 2, 3, 4 ]; + +const Template = () => { + const [ value, setValue ] = useState(); + + const { onContinue } = useDispatch( 'quickwp/data' ); + + const { template } = useSelect( ( select ) => { + const { getBlocks } = select( 'core/block-editor' ); + + return { + template: getBlocks() + }; + }); + + return ( +
+
+

+ { __( + 'Pick a layout for your homepage.', + 'quickwp' + ) } +

+ + +
+ +
+
+ { dummy.map( ( image, index ) => ( +
{ + setValue( value === image ? null : image ); + }} + > + { value === image && ( +
+ +
+ ) } + + +
+ ) ) } +
+
+
+ ); +}; + +export default Template; diff --git a/src/parts/ViewSite.js b/src/parts/ViewSite.js new file mode 100644 index 0000000..d76314b --- /dev/null +++ b/src/parts/ViewSite.js @@ -0,0 +1,46 @@ +/** + * WordPress dependencies. + */ +import { __ } from '@wordpress/i18n'; + +import { Button } from '@wordpress/components'; + +const ViewSite = () => { + return ( +
+
+

+ { __( + 'Your site is ready. Good job!', + 'quickwp' + ) } +

+ +

+ { __( + 'You can download the ZIP file and install it to your WordPress site.', + 'quickwp' + ) } +

+ +
+ + + +
+
+
+ ); +}; + +export default ViewSite; diff --git a/src/steps.js b/src/steps.js index 77d158d..eff486a 100644 --- a/src/steps.js +++ b/src/steps.js @@ -9,6 +9,9 @@ import { __ } from '@wordpress/i18n'; import SiteTopic from './parts/SiteTopic'; import SiteDescription from './parts/SiteDescription'; import ColorPalette from './parts/ColorPalette'; +import ImageSuggestions from './parts/ImageSuggestions'; +import Template from './parts/Template'; +import ViewSite from './parts/ViewSite'; const STEPS = [ { @@ -28,15 +31,18 @@ const STEPS = [ }, { value: 'image_suggestions', - label: __( 'Image Suggestions', 'quickwp' ) + label: __( 'Image Suggestions', 'quickwp' ), + view: ImageSuggestions }, { value: 'frontpage_template', - label: __( 'Front Page Template', 'quickwp' ) + label: __( 'Front Page Template', 'quickwp' ), + view: Template }, { value: 'view_site', - label: __( 'View Site', 'quickwp' ) + label: __( 'View Site', 'quickwp' ), + view: ViewSite } ]; diff --git a/src/store.js b/src/store.js index f50094a..578a8c1 100644 --- a/src/store.js +++ b/src/store.js @@ -1,7 +1,7 @@ /** * WordPress dependencies. */ -import { createReduxStore, dispatch, register, select } from '@wordpress/data'; +import { createReduxStore, register } from '@wordpress/data'; /** * Internal dependencies. @@ -9,7 +9,7 @@ import { createReduxStore, dispatch, register, select } from '@wordpress/data'; import STEPS from './steps'; const DEFAULT_STATE = { - step: 2 + step: 0 }; const actions = { diff --git a/src/style.scss b/src/style.scss index 2ddaa7d..d76976a 100644 --- a/src/style.scss +++ b/src/style.scss @@ -22,6 +22,22 @@ &.is-primary { @apply bg-transparent w-fit h-auto border border-solid border-fg text-fg rounded-md px-6 py-4 transition-all text-lg not-italic font-medium; + &:hover { + @apply bg-fg text-bg; + } + + &:disabled { + @apply opacity-50; + } + } + + &.is-secondary { + @apply bg-secondary w-fit h-auto text-fg rounded-md px-6 py-4 transition-all text-lg not-italic font-medium shadow-none; + + &:hover { + @apply bg-fg text-bg; + } + &:disabled { @apply opacity-50; } diff --git a/tailwind.config.js b/tailwind.config.js index a10a29e..1d2cde9 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -3,11 +3,20 @@ module.exports = { content: [ './src/style.scss', './src/*.js', './src/**/*.js' ], theme: { extend: { + aspectRatio: { + vert: [ 3, 4 ] + }, + boxShadow: { + selected: '-3px 3px 0px -1px #000' + }, colors: { bg: '#000000', - fg: '#FFFFFF' + fg: '#FFFFFF', + secondary: '#232323' }, maxHeight: { + 'md': '32rem', + '40vh': '40vh', '80vh': '80vh' } }