Merge branch 'trunk' into add/code-linting

# Conflicts:
#	package-lock.json
#	package.json
This commit is contained in:
Sarah Norris 2023-02-03 14:59:29 +00:00
commit 8070c03010
15 changed files with 347 additions and 170 deletions

View file

@ -64,10 +64,13 @@ class Manage_Fonts_Admin {
// Automatically load imported dependencies and assets version.
$asset_file = include plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
// Enqueue CSS dependencies.
// Enqueue CSS dependencies of the scripts included in the build.
foreach ( $asset_file['dependencies'] as $style ) {
wp_enqueue_style( $style );
}

// Enqueue CSS of the app
wp_enqueue_style( 'fonts-app', plugins_url( 'build/index.css', __DIR__ ), array(), $asset_file['version'] );
// Load our app.js.
array_push( $asset_file['dependencies'], 'wp-i18n' );
@ -76,7 +79,6 @@ class Manage_Fonts_Admin {

function manage_fonts_admin_page () {
$this->load_fonts_react_app();
wp_enqueue_style( 'manage-fonts-styles', plugin_dir_url( __DIR__ ) . '/css/manage-fonts.css', array(), '1.0', false );

$theme_name = wp_get_theme()->get( 'Name' );

@ -197,7 +199,6 @@ class Manage_Fonts_Admin {
}

function google_fonts_admin_page() {
wp_enqueue_style('google-fonts-styles', plugin_dir_url( __DIR__ ) . '/css/google-fonts.css', array(), '1.0', false );
$this->load_fonts_react_app();
?>
<input id="nonce" type="hidden" value="<?php echo wp_create_nonce( 'create_block_theme' ); ?>" />

View file

@ -5,7 +5,7 @@
* Plugin Name: Create Block Theme
* Plugin URI: https://wordpress.org/plugins/create-block-theme
* Description: Generates a block theme
* Version: 1.4.0
* Version: 1.5.0
* Author: WordPress.org
* Author URI: https://wordpress.org/
* License: GNU General Public License v2 or later

179
package-lock.json generated
View file

@ -1,13 +1,16 @@
{
"name": "create-block-theme",
"version": "1.4.0",
"version": "1.5.0",
"lockfileVersion": 2,
"requires": true,
"packages": {
"": {
"name": "create-block-theme",
"version": "1.4.0",
"version": "1.5.0",
"license": "GPL-2.0-or-later",
"dependencies": {
"@wordpress/icons": "^9.17.0"
},
"devDependencies": {
"@actions/core": "^1.10.0",
"@emotion/babel-plugin": "^11.10.5",
@ -1956,7 +1959,6 @@
"version": "7.20.13",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
"integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
"dev": true,
"dependencies": {
"regenerator-runtime": "^0.13.11"
},
@ -3364,8 +3366,7 @@
"node_modules/@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"node_modules/@types/qs": {
"version": "6.9.7",
@ -3383,7 +3384,6 @@
"version": "18.0.27",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
"dev": true,
"dependencies": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -3394,7 +3394,6 @@
"version": "18.0.10",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
"integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
"dev": true,
"dependencies": {
"@types/react": "*"
}
@ -3408,8 +3407,7 @@
"node_modules/@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"node_modules/@types/semver": {
"version": "7.3.13",
@ -4004,15 +4002,14 @@
}
},
"node_modules/@wordpress/element": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.2.0.tgz",
"integrity": "sha512-0hhFhzcQChSIT5pcOCSGVSK4DEi3xBtuu3uRj3HrYefcthmRdZnAeLGUGaebO5HgcxnImJ/Y0u4r948XFjj9SA==",
"dev": true,
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.3.0.tgz",
"integrity": "sha512-sgBrPm9suYx9sAtMLnfqgJem54Vew+BvVRpQoKQjpoXAKklGKSr52xOERek2TZQuZl/hMCCdvScrLIIW96UNAw==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@wordpress/escape-html": "^2.25.0",
"@wordpress/escape-html": "^2.26.0",
"change-case": "^4.1.2",
"is-plain-object": "^5.0.0",
"react": "^18.2.0",
@ -4026,7 +4023,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"
},
@ -4038,7 +4034,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,
"dependencies": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
@ -4051,16 +4046,14 @@
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"dev": true,
"dependencies": {
"loose-envify": "^1.1.0"
}
},
"node_modules/@wordpress/escape-html": {
"version": "2.25.0",
"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.25.0.tgz",
"integrity": "sha512-a+k2g/fg/E+XEAjq5O9iFFFMZ1+04JvaekF/ZUzDLLyBzk12D8Zfmg3UiHs0HkMFwZM1uyofpen9TOdGk9Op8Q==",
"dev": true,
"version": "2.26.0",
"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.26.0.tgz",
"integrity": "sha512-uWumpNH4hnmeepTw9K3gC5LmoZECom5L1P6HuZXYXyld8eU5L9p/JdvAPOwLmjffHyJO3hiB2JqYd+nKElbtrw==",
"dependencies": {
"@babel/runtime": "^7.16.0"
},
@ -4137,6 +4130,19 @@
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/@wordpress/icons": {
"version": "9.17.0",
"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-9.17.0.tgz",
"integrity": "sha512-bz906ftwaUgFFZB7/yrLswl43y4C14eEDhPamJ+3o45VwSr0yeKPFVNF1uOx/uNrRjihZnAyQaqs12/C7L27NQ==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/element": "^5.3.0",
"@wordpress/primitives": "^3.24.0"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@wordpress/jest-console": {
"version": "6.8.0",
"resolved": "https://registry.npmjs.org/@wordpress/jest-console/-/jest-console-6.8.0.tgz",
@ -4210,6 +4216,19 @@
"prettier": ">=2"
}
},
"node_modules/@wordpress/primitives": {
"version": "3.24.0",
"resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-3.24.0.tgz",
"integrity": "sha512-VX5iS6VKdMRC+mkd5EOjeq3wfWITPRnTWzTHGH9ozYWHNukE9+yOkeLlmTpW1yTy/IZxSFDGg+vAMDe85lf9oA==",
"dependencies": {
"@babel/runtime": "^7.16.0",
"@wordpress/element": "^5.3.0",
"classnames": "^2.3.1"
},
"engines": {
"node": ">=12"
}
},
"node_modules/@wordpress/scripts": {
"version": "25.2.0",
"resolved": "https://registry.npmjs.org/@wordpress/scripts/-/scripts-25.2.0.tgz",
@ -5254,7 +5273,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"
@ -5330,7 +5348,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",
@ -5357,7 +5374,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",
@ -5487,6 +5503,11 @@
"integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
"dev": true
},
"node_modules/classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"node_modules/clean-stack": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@ -5815,7 +5836,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",
@ -6312,8 +6332,7 @@
"node_modules/csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
"dev": true
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
},
"node_modules/cwd": {
"version": "0.10.0",
@ -6753,7 +6772,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"
@ -8842,7 +8860,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"
@ -9544,7 +9561,6 @@
"version": "5.0.0",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
"dev": true,
"engines": {
"node": ">=0.10.0"
}
@ -10464,8 +10480,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",
@ -11111,7 +11126,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"
},
@ -11123,7 +11137,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"
}
@ -11716,7 +11729,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"
@ -12222,7 +12234,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"
@ -12286,7 +12297,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"
@ -12296,7 +12306,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"
@ -13533,8 +13542,7 @@
"node_modules/regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"dev": true
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"node_modules/regenerator-transform": {
"version": "0.15.1",
@ -14057,7 +14065,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",
@ -14314,7 +14321,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"
@ -15413,8 +15419,7 @@
"node_modules/tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
"dev": true
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"node_modules/tsutils": {
"version": "3.21.0",
@ -15648,7 +15653,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"
}
@ -15657,7 +15661,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"
}
@ -18050,7 +18053,6 @@
"version": "7.20.13",
"resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz",
"integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==",
"dev": true,
"requires": {
"regenerator-runtime": "^0.13.11"
}
@ -19124,8 +19126,7 @@
"@types/prop-types": {
"version": "15.7.5",
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.5.tgz",
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==",
"dev": true
"integrity": "sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w=="
},
"@types/qs": {
"version": "6.9.7",
@ -19143,7 +19144,6 @@
"version": "18.0.27",
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.0.27.tgz",
"integrity": "sha512-3vtRKHgVxu3Jp9t718R9BuzoD4NcQ8YJ5XRzsSKxNDiDonD2MXIT1TmSkenxuCycZJoQT5d2vE8LwWJxBC1gmA==",
"dev": true,
"requires": {
"@types/prop-types": "*",
"@types/scheduler": "*",
@ -19154,7 +19154,6 @@
"version": "18.0.10",
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.0.10.tgz",
"integrity": "sha512-E42GW/JA4Qv15wQdqJq8DL4JhNpB3prJgjgapN3qJT9K2zO5IIAQh4VXvCEDupoqAwnz0cY4RlXeC/ajX5SFHg==",
"dev": true,
"requires": {
"@types/react": "*"
}
@ -19168,8 +19167,7 @@
"@types/scheduler": {
"version": "0.16.2",
"resolved": "https://registry.npmjs.org/@types/scheduler/-/scheduler-0.16.2.tgz",
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
"dev": true
"integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew=="
},
"@types/semver": {
"version": "7.3.13",
@ -19633,15 +19631,14 @@
}
},
"@wordpress/element": {
"version": "5.2.0",
"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.2.0.tgz",
"integrity": "sha512-0hhFhzcQChSIT5pcOCSGVSK4DEi3xBtuu3uRj3HrYefcthmRdZnAeLGUGaebO5HgcxnImJ/Y0u4r948XFjj9SA==",
"dev": true,
"version": "5.3.0",
"resolved": "https://registry.npmjs.org/@wordpress/element/-/element-5.3.0.tgz",
"integrity": "sha512-sgBrPm9suYx9sAtMLnfqgJem54Vew+BvVRpQoKQjpoXAKklGKSr52xOERek2TZQuZl/hMCCdvScrLIIW96UNAw==",
"requires": {
"@babel/runtime": "^7.16.0",
"@types/react": "^18.0.21",
"@types/react-dom": "^18.0.6",
"@wordpress/escape-html": "^2.25.0",
"@wordpress/escape-html": "^2.26.0",
"change-case": "^4.1.2",
"is-plain-object": "^5.0.0",
"react": "^18.2.0",
@ -19652,7 +19649,6 @@
"version": "18.2.0",
"resolved": "https://registry.npmjs.org/react/-/react-18.2.0.tgz",
"integrity": "sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0"
}
@ -19661,7 +19657,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,
"requires": {
"loose-envify": "^1.1.0",
"scheduler": "^0.23.0"
@ -19671,7 +19666,6 @@
"version": "0.23.0",
"resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz",
"integrity": "sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==",
"dev": true,
"requires": {
"loose-envify": "^1.1.0"
}
@ -19679,10 +19673,9 @@
}
},
"@wordpress/escape-html": {
"version": "2.25.0",
"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.25.0.tgz",
"integrity": "sha512-a+k2g/fg/E+XEAjq5O9iFFFMZ1+04JvaekF/ZUzDLLyBzk12D8Zfmg3UiHs0HkMFwZM1uyofpen9TOdGk9Op8Q==",
"dev": true,
"version": "2.26.0",
"resolved": "https://registry.npmjs.org/@wordpress/escape-html/-/escape-html-2.26.0.tgz",
"integrity": "sha512-uWumpNH4hnmeepTw9K3gC5LmoZECom5L1P6HuZXYXyld8eU5L9p/JdvAPOwLmjffHyJO3hiB2JqYd+nKElbtrw==",
"requires": {
"@babel/runtime": "^7.16.0"
}
@ -19728,6 +19721,16 @@
}
}
},
"@wordpress/icons": {
"version": "9.17.0",
"resolved": "https://registry.npmjs.org/@wordpress/icons/-/icons-9.17.0.tgz",
"integrity": "sha512-bz906ftwaUgFFZB7/yrLswl43y4C14eEDhPamJ+3o45VwSr0yeKPFVNF1uOx/uNrRjihZnAyQaqs12/C7L27NQ==",
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/element": "^5.3.0",
"@wordpress/primitives": "^3.24.0"
}
},
"@wordpress/jest-console": {
"version": "6.8.0",
"resolved": "https://registry.npmjs.org/@wordpress/jest-console/-/jest-console-6.8.0.tgz",
@ -19772,6 +19775,16 @@
"dev": true,
"requires": {}
},
"@wordpress/primitives": {
"version": "3.24.0",
"resolved": "https://registry.npmjs.org/@wordpress/primitives/-/primitives-3.24.0.tgz",
"integrity": "sha512-VX5iS6VKdMRC+mkd5EOjeq3wfWITPRnTWzTHGH9ozYWHNukE9+yOkeLlmTpW1yTy/IZxSFDGg+vAMDe85lf9oA==",
"requires": {
"@babel/runtime": "^7.16.0",
"@wordpress/element": "^5.3.0",
"classnames": "^2.3.1"
}
},
"@wordpress/scripts": {
"version": "25.2.0",
"resolved": "https://registry.npmjs.org/@wordpress/scripts/-/scripts-25.2.0.tgz",
@ -20548,7 +20561,6 @@
"version": "4.1.2",
"resolved": "https://registry.npmjs.org/camel-case/-/camel-case-4.1.2.tgz",
"integrity": "sha512-gxGWBrTT1JuMx6R+o5PTXMmUnhnVzLQ9SNutD4YqKtI6ap897t3tKECYla6gCWEkplXnlNybEkZg9GEGxKFCgw==",
"dev": true,
"requires": {
"pascal-case": "^3.1.2",
"tslib": "^2.0.3"
@ -20601,7 +20613,6 @@
"version": "1.0.4",
"resolved": "https://registry.npmjs.org/capital-case/-/capital-case-1.0.4.tgz",
"integrity": "sha512-ds37W8CytHgwnhGGTi88pcPyR15qoNkOpYwmMMfnWqqWgESapLqvDx6huFjQ5vqWSn2Z06173XNA7LtMOeUh1A==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
@ -20622,7 +20633,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,
"requires": {
"camel-case": "^4.1.2",
"capital-case": "^1.0.4",
@ -20716,6 +20726,11 @@
"integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
"dev": true
},
"classnames": {
"version": "2.3.2",
"resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
"integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw=="
},
"clean-stack": {
"version": "2.2.0",
"resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@ -20965,7 +20980,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,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
@ -21320,8 +21334,7 @@
"csstype": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.1.tgz",
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw==",
"dev": true
"integrity": "sha512-DJR/VvkAvSZW9bTouZue2sSxDwdTN92uHjqeKVm+0dAqdfNykRzQ95tay8aXMBAAPpUiq4Qcug2L7neoRh2Egw=="
},
"cwd": {
"version": "0.10.0",
@ -21660,7 +21673,6 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz",
"integrity": "sha512-Kv5nKlh6yRrdrGvxeJ2e5y2eRUpkUosIW4A2AS38zwSz27zu7ufDwQPi5Jhs3XAlGNetl3bmnGhQsMtkKJnj3w==",
"dev": true,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3"
@ -23213,7 +23225,6 @@
"version": "2.0.4",
"resolved": "https://registry.npmjs.org/header-case/-/header-case-2.0.4.tgz",
"integrity": "sha512-H/vuk5TEEVZwrR0lp2zed9OCo1uAILMlx0JEMgC26rzyJJ3N1v6XkwHHXJQdR2doSjcGPM6OKPYoJgf0plJ11Q==",
"dev": true,
"requires": {
"capital-case": "^1.0.4",
"tslib": "^2.0.3"
@ -23711,8 +23722,7 @@
"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==",
"dev": true
"integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q=="
},
"is-potential-custom-element-name": {
"version": "1.0.1",
@ -24419,8 +24429,7 @@
"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=="
},
"js-yaml": {
"version": "3.14.1",
@ -24896,7 +24905,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,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
@ -24905,7 +24913,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/lower-case/-/lower-case-2.0.2.tgz",
"integrity": "sha512-7fm3l3NAF9WfN6W3JOmf5drwpVqX78JtoGJ3A6W0a6ZnldM41w2fV5D490psKFTpMds8TJse/eHLFFsNHHjHgg==",
"dev": true,
"requires": {
"tslib": "^2.0.3"
}
@ -25364,7 +25371,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,
"requires": {
"lower-case": "^2.0.2",
"tslib": "^2.0.3"
@ -25742,7 +25748,6 @@
"version": "3.0.4",
"resolved": "https://registry.npmjs.org/param-case/-/param-case-3.0.4.tgz",
"integrity": "sha512-RXlj7zCYokReqWpOPH9oYivUzLYZ5vAPIfEmCTNViosC78F8F0H9y7T7gG2M39ymgutxF5gcFEsyZQSph9Bp3A==",
"dev": true,
"requires": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
@ -25791,7 +25796,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,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3"
@ -25801,7 +25805,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,
"requires": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
@ -26641,8 +26644,7 @@
"regenerator-runtime": {
"version": "0.13.11",
"resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
"dev": true
"integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
},
"regenerator-transform": {
"version": "0.15.1",
@ -27029,7 +27031,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,
"requires": {
"no-case": "^3.0.4",
"tslib": "^2.0.3",
@ -27241,7 +27242,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,
"requires": {
"dot-case": "^3.0.4",
"tslib": "^2.0.3"
@ -28101,8 +28101,7 @@
"tslib": {
"version": "2.4.0",
"resolved": "https://registry.npmjs.org/tslib/-/tslib-2.4.0.tgz",
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==",
"dev": true
"integrity": "sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ=="
},
"tsutils": {
"version": "3.21.0",
@ -28267,7 +28266,6 @@
"version": "2.0.2",
"resolved": "https://registry.npmjs.org/upper-case/-/upper-case-2.0.2.tgz",
"integrity": "sha512-KgdgDGJt2TpuwBUIjgG6lzw2GWFRCW9Qkfkiv0DxqHHLYJHmtmdUIKcZd8rHgFSjopVTlw6ggzCm1b8MFQwikg==",
"dev": true,
"requires": {
"tslib": "^2.0.3"
}
@ -28276,7 +28274,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,
"requires": {
"tslib": "^2.0.3"
}

View file

@ -1,6 +1,6 @@
{
"name": "create-block-theme",
"version": "1.4.0",
"version": "1.5.0",
"private": true,
"description": "Create a block-based theme",
"author": "The WordPress Contributors",
@ -19,6 +19,9 @@
"npm": ">=7 <8"
},
"main": "build/index.js",
"dependencies": {
"@wordpress/icons": "^9.17.0"
},
"devDependencies": {
"@actions/core": "^1.10.0",
"@emotion/babel-plugin": "^11.10.5",

View file

@ -4,7 +4,7 @@ Donate link: https://automattic.com/
Tags: themes, theme, block-theme
Requires at least: 6.0
Tested up to: 6.1
Stable tag: 1.4.0
Stable tag: 1.5.0
Requires PHP: 7.0
License: GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
@ -36,6 +36,13 @@ Still in the WordPress dashboard, navigate to "Appearance" -> "Create Block Them

== Changelog ==

= 1.5.0 =
* Fix: browser console errors
* Fix: Adding or removing fonts fails in some Windows environments
* Add placeholder screenshot to boilerplate theme
* Refactor: Add Google Fonts section from vanilla JS to React app
* Adding demo text settings

= 1.4.0 =
* Specify node and npm versions, add nvmrc file
* Add theme screenshot uploading

View file

@ -0,0 +1,27 @@
.demo-text-input {
border-top: 1px solid #ddd;
border-bottom: 1px solid #ddd;
padding: 1rem 0;
margin: 1rem 0;
}

.demo-text-input .container {
display: grid;
column-gap: 1rem;
grid-template-columns: 0.5fr 1fr 0.5fr min-content;
}

.demo-text-input .container > div:last-child {
display: flex;
flex-direction: column;
justify-content: center;
}

.demo-text-input .components-range-control__root {
flex-direction: row-reverse;
}

.demo-text-input .components-range-control__number {
margin-left: unset !important;
margin-right: 1rem;
}

View file

@ -0,0 +1,21 @@
import { useContext } from '@wordpress/element';
import { ManageFontsContext, DEMO_DEFAULTS } from '../fonts-context';

function Demo ( { style } ) {

const { demoText, demoType, demoFontSize } = useContext( ManageFontsContext );
const Component = DEMO_DEFAULTS[ demoType ][ "component" ];
const demoStyles = {
...style,
fontSize: `${demoFontSize}px`,
lineHeight: DEMO_DEFAULTS[ demoType ][ "lineHeight" ],
margin: DEMO_DEFAULTS[ demoType ][ "margin" ],
};
return (
<div>
<Component style={ demoStyles }>{ demoText }</Component>
</div>
)
}

export default Demo;

View file

@ -0,0 +1,62 @@
import {
Button,
RangeControl,
SelectControl,
__experimentalInputControl as InputControl
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { useContext } from '@wordpress/element';
import { ManageFontsContext } from '../fonts-context';
import { update } from '@wordpress/icons';
import "./demo-text-input.css";

function DemoTextInput () {
const { demoText, handleDemoTextChange, demoType, handleDemoTypeChange, demoFontSize, handleDemoFontSizeChange, resetDefaults } = useContext( ManageFontsContext );

return (
<div className="demo-text-input">
<div className="container">

<SelectControl
label={ __( "Preview type", "create-block-theme" ) }
onChange={ handleDemoTypeChange }
value={ demoType }
>
<option value="heading">{ __( "Heading", "create-block-theme" ) }</option>
<option value="sentence">{ __( "Sentence", "create-block-theme" ) }</option>
<option value="paragraph">{ __( "Paragraph", "create-block-theme" ) }</option>
</SelectControl>

<InputControl
label="Demo text"
value={ demoText }
onChange={ handleDemoTextChange }
/>

<div>
<RangeControl
label={ __( "Font size (px)", "create-block-theme" ) }
value={ demoFontSize }
onChange={ handleDemoFontSizeChange }
min={ 8 }
max={ 140 }
withInputField={ true }
/>
</div>

<div>
<Button variant="secondary" icon={ update } onClick={ () => {
resetDefaults( "sentence" );
handleDemoTypeChange( "sentence" );
}}>
{ __( "Reset", "create-block-theme" ) }
</Button>
</div>

</div>
</div>
)
}

export default DemoTextInput;

View file

@ -2,23 +2,82 @@ import { useState, createContext } from '@wordpress/element';
import { __ } from '@wordpress/i18n';

export const ManageFontsContext = createContext();
export const DEFAULT_DEMO_TEXT = __( "The quick brown fox jumps over the lazy dog.", "create-block-theme" );

const DEFAULT_HEADING_TEXT = __( "The quick brown fox jumps over the lazy dog.", "create-block-theme" );
const DEFAULT_SENTENCE_TEXT = __( "Incredible as it may seem, I believe that the Aleph of Garay Street was a false Aleph.", "create-block-theme" );
const DEFAULT_PARAGRAPH_TEXT = __(
"First a glass of pseudo-cognac, he ordered, and then down you dive into the cellar. Let me warn you, you'll have to lie flat on your back. Total darkness, total immobility, and a certain ocular adjustment will also be necessary. From the floor, you must focus your eyes on the nineteenth step. Once I leave you, I'll lower the trapdoor and you'll be quite alone. You needn't fear the rodents very much though I know you will. In a minute or two, you'll see the Aleph, the microcosm of the alchemists and Kabbalists, our true proverbial friend, the multum in parvo!",
"create-block-theme" )
const DEFAULT_DEMO_TYPE = "sentence";

export const DEMO_DEFAULTS = {
heading: {
text: DEFAULT_HEADING_TEXT,
size: 40,
lineHeight: 1.1,
margin: "0.5em",
component: "h2",
},
sentence: {
text: DEFAULT_SENTENCE_TEXT,
size: 24,
lineHeight: 1.3,
margin: "0.5em",
component: "p",
},
paragraph: {
text: DEFAULT_PARAGRAPH_TEXT,
size: 16,
lineHeight: 1.5,
margin: "0.5em",
component: "p",
},
};

export function ManageFontsProvider( { children } ) {
const [ demoText, setDemoText ] = useState( localStorage.getItem( "create-block-theme_default-demo-text" ) || DEFAULT_DEMO_TEXT );
const [ demoType, setDemoType ] = useState(
localStorage.getItem( "cbt_default-demo-type" ) || DEFAULT_DEMO_TYPE
);

const [ demoText, setDemoText ] = useState( localStorage.getItem(
"cbt_default-demo-text" ) || DEMO_DEFAULTS[ demoType ][ "text" ]
);

const [ demoFontSize, setDemoFontSize ] = useState(
parseInt( localStorage.getItem( "cbt_default-demo-font-size" )) || DEMO_DEFAULTS[ demoType ][ "size" ]
);

const handleDemoTextChange = ( newDemoText ) => {
setDemoText( newDemoText );
localStorage.setItem( "create-block-theme_default-demo-text", newDemoText );
localStorage.setItem( "cbt_default-demo-text", newDemoText );
}

const resetDemoText = () => {
setDemoText( DEFAULT_DEMO_TEXT );
const handleDemoTypeChange = ( newDemoType ) => {
setDemoType( newDemoType );
localStorage.setItem( "cbt_default-demo-type", newDemoType );
resetDefaults( newDemoType );
}

const handleDemoFontSizeChange = ( newDemoFontSize ) => {
setDemoFontSize( newDemoFontSize );
localStorage.setItem( "cbt_default-demo-font-size", newDemoFontSize );
}

const resetDefaults = ( newDemoType ) => {
handleDemoTextChange ( DEMO_DEFAULTS[ newDemoType || demoType ][ "text" ] );
handleDemoFontSizeChange( DEMO_DEFAULTS[ newDemoType || demoType ][ "size" ] );
}

return (
<ManageFontsContext.Provider value={{ demoText, handleDemoTextChange, resetDemoText }}>
<ManageFontsContext.Provider value={{
demoText,
handleDemoTextChange,
resetDefaults,
demoType,
handleDemoTypeChange,
demoFontSize,
handleDemoFontSizeChange,
}}>
{ children }
</ManageFontsContext.Provider>
);

View file

@ -1,10 +1,9 @@
import { __ } from '@wordpress/i18n';
import { useEffect, useContext } from '@wordpress/element';
import { ManageFontsContext } from '../fonts-context';
import Demo from "../demo-text-input/demo";

function FontVariant ( { font, variant, isSelected, handleToggle } ) {
const { demoText, handleDemoTextChange, resetDemoText } = useContext( ManageFontsContext );

const style = variant.includes('italic') ? 'italic' : 'normal';
const weight = variant === 'regular' || variant === 'italic' ? '400' : variant.replace('italic', '');
// Force https because sometimes Google Fonts API returns http instead of https
@ -39,9 +38,7 @@ function FontVariant ( { font, variant, isSelected, handleToggle } ) {
<td className="">{ weight }</td>
<td className="">{ style }</td>
<td className="demo-cell">
<span className="font-preview" style={ previewStyles }>
{ demoText }
</span>
<Demo style={ previewStyles } />
</td>
</tr>
)

View file

@ -1,3 +1,7 @@
#google-fonts-table {
margin-bottom: 2rem;
}

#google-fonts-table.widefat thead td input {
margin: 0;
}
@ -16,6 +20,6 @@
font-size: 1.7rem;
}

.google-fonts-page .hint {
display: none;
.select-font {
display: flex;
}

View file

@ -2,10 +2,13 @@ import { __ } from '@wordpress/i18n';
import { useState, useEffect } from '@wordpress/element';
import { useSelect } from '@wordpress/data';
import { store as coreDataStore } from '@wordpress/core-data';
import { SelectControl } from '@wordpress/components';

import FontVariant from './font-variant';
import googleFontsData from "../../assets/google-fonts/fallback-fonts-list.json";
import { getWeightFromGoogleVariant, getStyleFromGoogleVariant, forceHttps } from './utils';
import DemoTextInput from "../demo-text-input";
import "./google-fonts.css";

const EMPTY_SELECTION_DATA = JSON.stringify( {} );

@ -64,70 +67,70 @@ function GoogleFonts () {
return select( coreDataStore ).getCurrentTheme();
}, null );

const handleSelectChange = ( event ) => {
setSelectedFont( googleFontsData.items[ event.target.value ] ) ;
const handleSelectChange = ( value ) => {
setSelectedFont( googleFontsData.items[ value ] ) ;
}

return (
<div className="wrap google-fonts-page">
<h2>{ __('Add Google fonts to your theme', 'create-block-theme') }</h2>
<h1 className="wp-heading-inline">{ __('Add Google fonts to your theme', 'create-block-theme') }</h1>
<h3>{ __('Add Google fonts assets and font face definitions to your currently active theme', 'create-block-theme')} ({ theme?.name.rendered })</h3>

<div className="select-font">
<SelectControl
label={ __('Select Font', 'create-block-theme') }
name="google-font"
onChange={ handleSelectChange }
>
<option value={null}>{ __('Select a font...', 'create-block-theme') }</option>
{ googleFontsData.items.map( ( font, index ) => (
<option value={ index }>{ font.family }</option>
))}
</SelectControl>
</div>

<form enctype="multipart/form-data" action="" method="POST">
<label for="google-font-id">{ __('Select Font', 'create-block-theme') }</label>
<DemoTextInput />

<select name="google-font" onChange={ handleSelectChange }>
<option value={null}>{ __('Select a font...', 'create-block-theme') }</option>
{ googleFontsData.items.map( ( font, index ) => (
<option value={ index }>{ font.family }</option>
))}
</select>
{ selectedFont && <p>{ __('Select the font variants you want to include:', 'create-block-theme') }</p> }

<br /><br />
<p className="hint">{ __('Select the font variants you want to include:', 'create-block-theme') }</p>

{ selectedFont && (
<table className="wp-list-table widefat striped table-view-list" id="google-fonts-table">
<thead>
<tr>
<td className="">
<input
type="checkbox"
onClick={ handleToggleAllVariants }
checked={ selectedVariants.length === selectedFont?.variants.length }
/>
</td>
<td className="">{ __('Weight', 'create-block-theme') }</td>
<td className="">{ __('Style', 'create-block-theme') }</td>
<td className="">{ __('Preview', 'create-block-theme') }</td>
</tr>
</thead>
<tbody>
{selectedFont.variants.map( ( variant, i ) => (
<FontVariant
font={ selectedFont }
variant={ variant }
key={`font-variant-${i}`}
isSelected={ selectedVariants.includes( variant ) }
handleToggle={ () => handleToggleVariant( variant ) }
{ selectedFont && (
<table className="wp-list-table widefat striped table-view-list" id="google-fonts-table">
<thead>
<tr>
<td className="">
<input
type="checkbox"
onClick={ handleToggleAllVariants }
checked={ selectedVariants.length === selectedFont?.variants.length }
/>
))}
</tbody>
</table>
) }

<br /><br />

</td>
<td className="">{ __('Weight', 'create-block-theme') }</td>
<td className="">{ __('Style', 'create-block-theme') }</td>
<td className="">{ __('Preview', 'create-block-theme') }</td>
</tr>
</thead>
<tbody>
{selectedFont.variants.map( ( variant, i ) => (
<FontVariant
font={ selectedFont }
variant={ variant }
key={`font-variant-${i}`}
isSelected={ selectedVariants.includes( variant ) }
handleToggle={ () => handleToggleVariant( variant ) }
/>
))}
</tbody>
</table>
) }
<form enctype="multipart/form-data" action="" method="POST">
<input type="hidden" name="selection-data" value={ selectionData } />

<input
type="submit"
value={ __('Add google fonts to your theme', 'create-block-theme') }
className="button button-primary"
disabled={ selectedVariants.length === 0 }
/>

<input type="hidden" name="nonce" value={ nonce } />
</form>
</div>

View file

@ -1,6 +1,7 @@
import { Button } from '@wordpress/components';
import { useContext } from '@wordpress/element';
import { ManageFontsContext } from '../fonts-context';
import Demo from "../demo-text-input/demo";
const { __ } = wp.i18n;

function FontFace ( {
@ -10,7 +11,7 @@ function FontFace ( {
deleteFontFace,
shouldBeRemoved
} ) {
const { demoText, handleDemoTextChange, resetDemoText } = useContext( ManageFontsContext );
const { demoText, handleDemoTextChange, resetDefaults } = useContext( ManageFontsContext );

const demoStyles = {
fontFamily,
@ -24,12 +25,6 @@ function FontFace ( {
handleDemoTextChange( newDemoText );
}

const onBlur = ( event ) => {
if ( ! event.target.value ) {
resetDemoText();
}
}

if ( shouldBeRemoved ) {
return null;
}
@ -39,7 +34,8 @@ function FontFace ( {
<td>{fontStyle}</td>
<td>{fontWeight}</td>
<td className="demo-cell">
<input style={ demoStyles } onChange={ handleChange } value={ demoText } onBlur={ onBlur }/>
{/* <input style={ demoStyles } onChange={ handleChange } value={ demoText }/> */}
<Demo style={ demoStyles } />
</td>
{ deleteFontFace && <td><Button variant="tertiary" isDestructive={true} onClick={deleteFontFace}>{__('Remove', 'create-block-theme')}</Button></td> }
</tr>

View file

@ -1,6 +1,8 @@
import { useState, useEffect } from "react";
import FontFamily from "./font-family";
import { __experimentalConfirmDialog as ConfirmDialog, Modal, Icon, Button } from '@wordpress/components';
import DemoTextInput from "../demo-text-input";
import "./manage-fonts.css";

const { __ } = wp.i18n;

@ -142,6 +144,9 @@ function ManageFonts () {
}
<p>{__('This action will delete the font definition and the font file assets from your theme.', "create-block-theme")}</p>
</ConfirmDialog>

<DemoTextInput />

<div className="font-families">
{newThemeFonts.map((fontFamily, i) => (
<FontFamily

View file

@ -53,11 +53,6 @@
width: 100%;
}

.font-face td {
white-space: nowrap;
text-align: center;
}

.font-face .demo-cell input {
font-size: 1.7rem;
line-height: 1.5;