diff --git a/.github/workflows/deploy-to-dotorg.yml b/.github/workflows/deploy-to-dotorg.yml
index 4fc7b7dc..a48ebb82 100644
--- a/.github/workflows/deploy-to-dotorg.yml
+++ b/.github/workflows/deploy-to-dotorg.yml
@@ -14,40 +14,6 @@ on:
- minor
- patch
jobs:
- update-google-fonts-json:
- if: github.repository_owner == 'WordPress'
- # The type of runner that the job will run on
- runs-on: ubuntu-latest
-
- # Steps represent a sequence of tasks that will be executed as part of the job
- steps:
- - uses: actions/checkout@v3
- - uses: actions/setup-node@v3
- with:
- node-version: 18
-
- # Runs a single command using the runners shell
- # This script fetchs the Goolgle Fonts API data and creates a PR if new data is available
- - name: Update Google Fonts JSON file
- env:
- GOOGLE_FONTS_API_KEY: ${{ secrets.GOOGLE_FONTS_API_KEY }}
- run: |
- echo "Updating Google fonts JSON file"
- node ./update-google-fonts-json-file.js
- - name: Commit Changes
- env:
- GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
- run: |
- git config user.name 'github-actions[bot]'
- git config user.email 'github-actions[bot]@users.noreply.github.com'
- git config --global --add --bool push.autoSetupRemote true
-
- git diff-index --quiet HEAD -- || \
- ( git add assets/google-fonts/fallback-fonts-list.json && \
- git checkout trunk && \
- git commit -m "Automation: update Google Fonts data file" --no-verify && \
- git push
- )
tag:
name: Checkout repo
runs-on: ubuntu-latest
diff --git a/admin/class-manage-fonts.php b/admin/class-manage-fonts.php
deleted file mode 100644
index 5d9d2fa7..00000000
--- a/admin/class-manage-fonts.php
+++ /dev/null
@@ -1,423 +0,0 @@
- 'font/otf',
- 'ttf' => 'font/ttf',
- 'woff' => 'font/woff',
- 'woff2' => 'font/woff2',
- );
-
- function has_font_mime_type( $file ) {
- $filetype = wp_check_filetype( $file, self::ALLOWED_FONT_MIME_TYPES );
- return in_array( $filetype['type'], self::ALLOWED_FONT_MIME_TYPES, true );
- }
-
- function create_admin_menu() {
- if ( ! wp_is_block_theme() ) {
- return;
- }
-
- $manage_font_page_slug = 'manage-fonts';
- $add_google_font_page_slug = 'add-google-font-to-theme-json';
- $add_local_font_page_slug = 'add-local-font-to-theme-json';
-
- $manage_fonts_page_title = _x( 'Manage Theme Fonts', 'UI String', 'create-block-theme' );
- $manage_fonts_menu_title = $manage_fonts_page_title;
- add_theme_page( $manage_fonts_page_title, $manage_fonts_menu_title, 'edit_theme_options', $manage_font_page_slug, array( 'Fonts_Page', 'manage_fonts_admin_page' ) );
-
- // Check if the admin page title is set, and if not, set one.
- // This is needed to avoid a warning in the admin menu, due to the admin page title not being set in
- // the add_submenu_page() function for the Google Fonts and Local Fonts pages.
- global $title;
-
- // Check if current admin page is a create block theme page.
- // Context: https://github.com/WordPress/create-block-theme/issues/478
- $admin_page = isset( $_GET['page'] ) ? sanitize_text_field( wp_unslash( $_GET['page'] ) ) : '';
- $manage_font_pages = array(
- $manage_font_page_slug,
- $add_google_font_page_slug,
- $add_local_font_page_slug,
- );
-
- $is_manage_fonts_page = in_array( $admin_page, $manage_font_pages, true );
-
- if ( ! isset( $title ) && $is_manage_fonts_page ) {
- $title = $manage_fonts_page_title;
- }
-
- $google_fonts_page_title = _x( 'Embed Google font in the active theme', 'UI String', 'create-block-theme' );
- $google_fonts_menu_title = $google_fonts_page_title;
- add_submenu_page( '', $google_fonts_page_title, $google_fonts_menu_title, 'edit_theme_options', $add_google_font_page_slug, array( 'Google_Fonts', 'google_fonts_admin_page' ) );
-
- $local_fonts_page_title = _x( 'Embed local font in the active theme', 'UI String', 'create-block-theme' );
- $local_fonts_menu_title = $local_fonts_page_title;
- add_submenu_page( '', $local_fonts_page_title, $local_fonts_menu_title, 'edit_theme_options', $add_local_font_page_slug, array( 'Local_Fonts', 'local_fonts_admin_page' ) );
- }
-
- function has_file_and_user_permissions() {
- $has_user_permissions = $this->user_can_edit_themes();
- $has_file_permissions = $this->can_read_and_write_font_assets_directory();
- return $has_user_permissions && $has_file_permissions;
- }
-
- function user_can_edit_themes() {
- if ( defined( 'DISALLOW_FILE_EDIT' ) && DISALLOW_FILE_EDIT === true ) {
- add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_file_edit_error' ) );
- return false;
- }
-
- if ( ! current_user_can( 'edit_themes' ) ) {
- add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_user_cant_edit_theme' ) );
- return false;
- }
- return true;
- }
-
- function can_read_and_write_font_assets_directory() {
- // Create the font assets folder if it doesn't exist
- $temp_dir = get_temp_dir();
- $font_assets_path = get_stylesheet_directory() . '/assets/fonts/';
- if ( ! is_dir( $font_assets_path ) ) {
- wp_mkdir_p( $font_assets_path );
- }
- // If the font asset folder can't be written return an error
- if ( ! wp_is_writable( $font_assets_path ) || ! is_readable( $font_assets_path ) || ! wp_is_writable( $temp_dir ) ) {
- add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_manage_fonts_permission_error' ) );
- return false;
- }
- return true;
- }
-
- function delete_font_asset( $font_face ) {
- // if the font asset is a theme asset, delete it
- $theme_folder = get_stylesheet_directory();
- $font_path = pathinfo( $font_face['src'][0] );
- $font_dir = str_replace( 'file:./', '', $font_path['dirname'] );
-
- $font_asset_path = $theme_folder . DIRECTORY_SEPARATOR . $font_dir . DIRECTORY_SEPARATOR . $font_path['basename'];
-
- if ( ! wp_is_writable( $theme_folder . DIRECTORY_SEPARATOR . $font_dir ) ) {
- return add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_font_asset_removal_error' ) );
- }
-
- if ( file_exists( $font_asset_path ) ) {
- return unlink( $font_asset_path );
- }
-
- return false;
- }
-
- protected function prepare_font_families_for_database( $font_families ) {
- $prepared_font_families = array();
-
- foreach ( $font_families as $font_family ) {
- if ( isset( $font_family['fontFace'] ) ) {
- $new_font_faces = array();
- foreach ( $font_family['fontFace'] as $font_face ) {
- $updated_font_face = $font_face;
- // Remove font license from readme.txt if font family is removed
- if ( isset( $font_family['shouldBeRemoved'] ) ) {
- $this->manage_font_license( $font_face['fontFamily'], 'remove' );
- }
- if ( ! isset( $font_face['shouldBeRemoved'] ) && ! isset( $font_family['shouldBeRemoved'] ) ) {
- $new_font_faces[] = $updated_font_face;
- } else {
- $this->delete_font_asset( $font_face );
- }
- }
-
- $font_family['fontFace'] = $new_font_faces;
- }
- if ( ! isset( $font_family['shouldBeRemoved'] ) ) {
- $prepared_font_families[] = $font_family;
- }
- }
-
- return $prepared_font_families;
- }
-
- function save_manage_fonts_changes() {
- if (
- ! empty( $_POST['nonce'] ) &&
- wp_verify_nonce( $_POST['nonce'], 'create_block_theme' ) &&
- ! empty( $_POST['new-theme-fonts-json'] ) &&
- $this->has_file_and_user_permissions()
- ) {
- // parse json from form
- $new_theme_fonts_json = json_decode( stripslashes( $_POST['new-theme-fonts-json'] ), true );
- $new_font_families = $this->prepare_font_families_for_database( $new_theme_fonts_json );
-
- $this->replace_all_theme_font_families( $new_font_families );
-
- add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_delete_font_success' ) );
- }
- }
-
- function save_local_fonts_to_theme() {
- if (
- ! empty( $_POST['nonce'] ) &&
- wp_verify_nonce( $_POST['nonce'], 'create_block_theme' ) &&
- ! empty( $_FILES['font-file'] ) &&
- ! empty( $_POST['font-name'] ) &&
- ! empty( $_POST['font-weight'] ) &&
- ! empty( $_POST['font-style'] ) &&
- $this->has_file_and_user_permissions()
- ) {
- if (
- $this->has_font_mime_type( $_FILES['font-file']['name'] ) &&
- is_uploaded_file( $_FILES['font-file']['tmp_name'] )
- ) {
- $font_slug = sanitize_title( $_POST['font-name'] );
- $file_extension = pathinfo( $_FILES['font-file']['name'], PATHINFO_EXTENSION );
- $file_name = sanitize_title( $font_slug . '_' . $_POST['font-style'] . '_' . $_POST['font-weight'] ) . '.' . $file_extension;
-
- move_uploaded_file( $_FILES['font-file']['tmp_name'], get_stylesheet_directory() . '/assets/fonts/' . $file_name );
-
- $uploaded_font_face = array(
- 'fontFamily' => $_POST['font-name'],
- 'fontWeight' => $_POST['font-weight'],
- 'fontStyle' => $_POST['font-style'],
- 'src' => array(
- 'file:./assets/fonts/' . $file_name,
- ),
- );
-
- if ( ! empty( $_POST['font-variation-settings'] ) ) {
- // replace escaped single quotes with single quotes
- $font_variation_settings = str_replace( "\\'", "'", $_POST['font-variation-settings'] );
- $uploaded_font_face['fontVariationSettings'] = $font_variation_settings;
- }
-
- $new_font_faces = array( $uploaded_font_face );
-
- $this->add_or_update_theme_font_faces( $_POST['font-name'], $font_slug, $new_font_faces );
-
- // Add font license to readme.txt
- $this->manage_font_license( $_POST['font-name'], $file_name );
-
- return add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_embed_font_success' ) );
- }
- return add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_embed_font_file_error' ) );
- }
- }
-
- function get_font_slug( $name ) {
- $slug = sanitize_title( $name );
- $slug = preg_replace( '/\s+/', '', $slug ); // Remove spaces
- return $slug;
- }
-
- function save_google_fonts_to_theme() {
- if (
- ! empty( $_POST['nonce'] ) &&
- wp_verify_nonce( $_POST['nonce'], 'create_block_theme' ) &&
- ! empty( $_POST['selection-data'] ) &&
- $this->has_file_and_user_permissions()
- ) {
- // Gets data from the form
- $data = json_decode( stripslashes( $_POST['selection-data'] ), true );
-
- foreach ( $data as $font_family ) {
- $google_font_name = $font_family['family'];
- $font_slug = $this->get_font_slug( $google_font_name );
- $variants = $font_family['faces'];
- $new_font_faces = array();
- foreach ( $variants as $variant ) {
- // variant name is $variant_and_url[0] and font asset url is $variant_and_url[1]
- $file_extension = pathinfo( $variant['src'], PATHINFO_EXTENSION );
- $file_name = sanitize_title( $font_slug . '_' . $variant['style'] . '_' . $variant['weight'] ) . '.' . $file_extension;
-
- // Download font asset in temp folder
- $temp_file = download_url( $variant['src'] );
-
- if ( $this->has_font_mime_type( $variant['src'] ) ) {
-
- // Move font asset to theme assets folder
- rename( $temp_file, get_stylesheet_directory() . '/assets/fonts/' . $file_name );
-
- // Add each variant as one font face
- $new_font_faces[] = array(
- 'fontFamily' => $google_font_name,
- 'fontStyle' => $variant['style'],
- 'fontWeight' => $variant['weight'],
- 'src' => array(
- 'file:./assets/fonts/' . $file_name,
- ),
- );
- }
- }
-
- $this->add_or_update_theme_font_faces( $google_font_name, $font_slug, $new_font_faces );
-
- // Add font license to readme.txt
- $this->manage_font_license( $font_family['family'], $file_name );
- }
-
- add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_embed_font_success' ) );
- }
- }
-
- function replace_all_theme_font_families( $font_families ) {
- // Construct updated theme.json.
- $theme_json_raw = json_decode( file_get_contents( get_stylesheet_directory() . '/theme.json' ), true );
- // Overwrite the previous fontFamilies with the new ones.
- $theme_json_raw['settings']['typography']['fontFamilies'] = $font_families;
-
- $theme_json = wp_json_encode( $theme_json_raw, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE );
- $theme_json_string = preg_replace( '~(?:^|\G)\h{4}~m', "\t", $theme_json );
-
- // Write the new theme.json to the theme folder
- file_put_contents(
- get_stylesheet_directory() . '/theme.json',
- $theme_json_string
- );
- }
-
- function add_or_update_theme_font_faces( $font_name, $font_slug, $font_faces ) {
- // Get the current theme.json and fontFamilies defined (if any).
- $theme_json_raw = json_decode( file_get_contents( get_stylesheet_directory() . '/theme.json' ), true );
- $theme_font_families = isset( $theme_json_raw['settings']['typography']['fontFamilies'] ) ? $theme_json_raw['settings']['typography']['fontFamilies'] : null;
-
- $existent_family = $theme_font_families ? array_values(
- array_filter(
- $theme_font_families,
- function ( $font_family ) use ( $font_slug ) {
- return $font_family['slug'] === $font_slug; }
- )
- ) : null;
-
- // Add the new font faces.
- if ( empty( $existent_family ) ) { // If the new font family doesn't exist in the theme.json font families, add it to the exising font families
- $theme_font_families[] = array(
- 'fontFamily' => $font_name,
- 'slug' => $font_slug,
- 'fontFace' => $font_faces,
- );
- } else { // If the new font family already exists in the theme.json font families, add the new font faces to the existing font family
- $theme_font_families = array_values(
- array_filter(
- $theme_font_families,
- function ( $font_family ) use ( $font_slug ) {
- return $font_family['slug'] !== $font_slug; }
- )
- );
- $existent_family[0]['fontFace'] = array_merge( $existent_family[0]['fontFace'], $font_faces );
- $theme_font_families = array_merge( $theme_font_families, $existent_family );
- }
-
- // Overwrite the previous fontFamilies with the new ones.
- $theme_json_raw['settings']['typography']['fontFamilies'] = $theme_font_families;
-
- $theme_json = wp_json_encode( $theme_json_raw, JSON_PRETTY_PRINT | JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE );
- $theme_json_string = preg_replace( '~(?:^|\G)\h{4}~m', "\t", $theme_json );
-
- // Write the new theme.json to the theme folder
- file_put_contents(
- get_stylesheet_directory() . '/theme.json',
- $theme_json_string
- );
- }
-
- function manage_font_license( $font_name, $file_name ) {
- if ( ! $font_name ) {
- return;
- }
-
- // Build end of credits note
- $end_credits_note = '-- End of ' . $font_name . ' Font credits --';
-
- // Get theme readme.txt
- $readme_file = get_stylesheet_directory() . '/readme.txt';
- $readme_file_contents = file_get_contents( $readme_file );
-
- if ( ! $readme_file ) {
- return;
- }
-
- // If file_name and font-credits exist, then add font license to readme.txt
- if ( 'remove' !== $file_name && is_string( $file_name ) && ! empty( $_POST['font-credits'] ) && isset( $_POST['font-credits'] ) ) {
- // Check that the font is not already credited in readme.txt
- if ( false === stripos( $readme_file_contents, $font_name ) ) {
- // Get font credits from font file metadata
- $font_credits = json_decode( stripslashes( $_POST['font-credits'] ), true );
-
- if ( ! is_array( $font_credits ) ) {
- return;
- }
-
- // Assign font credits to variables
- $copyright = array_key_exists( 'copyright', $font_credits ) ? trim( $font_credits['copyright'] ) : '';
- $license_info = array_key_exists( 'license', $font_credits ) ? "\n" . trim( $font_credits['license'] ) : '';
- $license_url = array_key_exists( 'licenseURL', $font_credits ) ? "\n" . 'License URL: ' . trim( $font_credits['licenseURL'] ) : '';
- $font_source = array_key_exists( 'source', $font_credits ) ? "\n" . 'Source: ' . trim( $font_credits['source'] ) : '';
-
- // Handle longer, multi-line license info content
- if ( is_string( $license_info ) ) {
- // Split license info at first new line
- $license_info = "\n" . strtok( $license_info, "\n" );
-
- // Prevent license info from being over 200 characters
- if ( strlen( $license_info ) > 200 ) {
- $license_info = substr( $license_info, 0, strrpos( substr( $license_info, 0, 200 ), ' ' ) ) . '...';
- }
- }
-
- // Build the font credits string
- $font_credits = "
-{$font_name} Font
-{$copyright} {$license_info} {$license_url} {$font_source}
-{$end_credits_note}
-";
-
- // Check if readme.txt ends with a new line
- if ( "\n" !== $readme_file_contents[ strlen( $readme_file_contents ) - 1 ] ) {
- $font_credits = "\n" . $font_credits;
- }
-
- // Add font credits to the end of readme.txt
- file_put_contents(
- $readme_file,
- $font_credits,
- FILE_APPEND
- );
- }
- }
-
- // If file_name is set to 'remove', then remove font license from readme.txt
- if ( 'remove' === $file_name ) {
- // Check if font credits are in readme.txt
- if ( false !== stripos( $readme_file_contents, $font_name ) ) {
- // Calculate the start and end positions of the font credits
- $font_name_strlength = strlen( $font_name . ' Font' ) + 1;
- $end_credits_strlength = strlen( $end_credits_note ) + 1;
- $font_start = stripos( $readme_file_contents, "\n" . $font_name . ' Font' ) + $font_name_strlength;
- $font_end = stripos( $readme_file_contents, $end_credits_note, $font_start );
-
- // Check if the start and end positions are valid
- if ( false === $font_start || false === $font_end ) {
- return;
- }
-
- // Remove the font credits from readme.txt
- $removed_font_credits = substr_replace( $readme_file_contents, '', $font_start - $font_name_strlength, $font_end + $end_credits_strlength - $font_start + $font_name_strlength );
- file_put_contents( $readme_file, $removed_font_credits );
- }
- }
- }
-}
-
-
diff --git a/admin/font-helpers.php b/admin/font-helpers.php
deleted file mode 100644
index c4b3369f..00000000
--- a/admin/font-helpers.php
+++ /dev/null
@@ -1,30 +0,0 @@
-get( 'Name' );
- $font_family = '';
- if ( isset( $_POST['selection-data'] ) ) {
- $data = json_decode( stripslashes( $_POST['selection-data'] ), true );
- $font_names = array();
- foreach ( $data as $font_family ) {
- $font_names[] = $font_family['family'];
- }
- $font_family = implode( ', ', $font_names );
- }
- if ( isset( $_POST['font-name'] ) ) {
- $font_family = $_POST['font-name'];
- }
- ?>
-
- get( 'Name' );
- $font_family = '';
- if ( isset( $_POST['selection-data'] ) ) {
- $data = json_decode( stripslashes( $_POST['selection-data'] ), true );
- $font_family = $data['family'];
- }
- if ( isset( $_POST['font-name'] ) ) {
- $font_family = $_POST['font-name'];
- }
- ?>
-
- get( 'Name' );
- ?>
-
- get( 'Name' );
- ?>
-
- get( 'Name' );
- ?>
-
- get( 'Name' );
- ?>
-
-
-
-
-
- get( 'Name' );
-
- $theme_data = WP_Theme_JSON_Resolver::get_theme_data();
- $theme_settings = $theme_data->get_settings();
- $theme_font_families = isset( $theme_settings['typography']['fontFamilies']['theme'] ) ? $theme_settings['typography']['fontFamilies']['theme'] : array();
-
- // This is only run when Gutenberg is not active because WordPress core does not include WP_Webfonts class yet. So we can't use it to load the font asset styles.
- // See the comments here: https://github.com/WordPress/WordPress/blob/88cee0d359f743f94597c586febcc5e09830e780/wp-includes/script-loader.php#L3160-L3186
- // TODO: remove this when WordPress core includes WP_Webfonts class.
- if ( ! class_exists( 'WP_Webfonts' ) ) {
- $font_assets_stylesheet = render_font_styles( $theme_font_families );
- wp_register_style( 'theme-font-families', false );
- wp_add_inline_style( 'theme-font-families', $font_assets_stylesheet );
- wp_enqueue_style( 'theme-font-families' );
- }
-
- $fonts_json = wp_json_encode( $theme_font_families );
- $fonts_json_string = preg_replace( '~(?:^|\G)\h{4}~m', "\t", $fonts_json );
-
- ?>
-
-
-
-
-
-
-
- {
- setAxisCurrentValue( axis.tag, val );
- };
-
- return (
-
-
- );
-}
-
-export default AxisRangeControl;
diff --git a/src/demo-text-input/demo-text-input.css b/src/demo-text-input/demo-text-input.css
deleted file mode 100644
index 0d94c72a..00000000
--- a/src/demo-text-input/demo-text-input.css
+++ /dev/null
@@ -1,35 +0,0 @@
-.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: 2rem;
- grid-template-columns: 1fr min-content;
- align-items: center;
-}
-
-.demo-text-input .controls {
- padding-right: 2rem;
- border-right: 1px solid #e2e2e2;
-}
-
-.demo-text-input .extra-controls {
- margin-top: 2rem;
-}
-
-.demo-text-input .container .standard-controls,
-.demo-text-input .container .extra-controls {
- display: grid;
- grid-template-columns: repeat(3, 1fr);
- gap: 1rem;
-}
-
-.demo-text-input .container > div:last-child {
- display: flex;
- flex-direction: column;
- justify-content: center;
-}
diff --git a/src/demo-text-input/demo.js b/src/demo-text-input/demo.js
deleted file mode 100644
index 247c1ddb..00000000
--- a/src/demo-text-input/demo.js
+++ /dev/null
@@ -1,22 +0,0 @@
-import { useContext } from '@wordpress/element';
-import { ManageFontsContext } from '../fonts-context';
-import { DEMO_DEFAULTS } from '../constants';
-
-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 (
-
- { demoText }
-
- );
-}
-
-export default Demo;
diff --git a/src/demo-text-input/index.js b/src/demo-text-input/index.js
deleted file mode 100644
index c9a592c4..00000000
--- a/src/demo-text-input/index.js
+++ /dev/null
@@ -1,96 +0,0 @@
-import {
- Button,
- RangeControl,
- SelectControl,
- // eslint-disable-next-line
- __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';
-import VariableControls from './variable-controls';
-
-function DemoTextInput( { axes, setAxes, resetAxes } ) {
- const {
- demoText,
- handleDemoTextChange,
- demoType,
- handleDemoTypeChange,
- demoFontSize,
- handleDemoFontSizeChange,
- resetDefaults,
- } = useContext( ManageFontsContext );
-
- return (
-
-
-
-
-
-
- { __( 'Heading', 'create-block-theme' ) }
-
-
- { __( 'Sentence', 'create-block-theme' ) }
-
-
- { __( 'Paragraph', 'create-block-theme' ) }
-
-
-
-
-
-
-
-
-
- { !! axes && !! Object.keys( axes ).length && (
-
-
- ) }
-
-
-
- {
- resetDefaults( 'sentence' );
- handleDemoTypeChange( 'sentence' );
- resetAxes?.();
- } }
- >
- { __( 'Reset', 'create-block-theme' ) }
-
-
-
-
- { children }
-
- );
-}
diff --git a/src/fonts-page-layout/fonts-page-layout.css b/src/fonts-page-layout/fonts-page-layout.css
deleted file mode 100644
index 5f3dd396..00000000
--- a/src/fonts-page-layout/fonts-page-layout.css
+++ /dev/null
@@ -1,18 +0,0 @@
-.fonts-page-layout {
- display: grid;
- grid-template-columns: 1fr 250px;
- margin: 0;
- padding: 0;
-}
-
-.fonts-page-layout > main {
- padding: 2rem;
-}
-
-#wpfooter {
- display: none;
-}
-
-#wpbody-content {
- padding: 0;
-}
diff --git a/src/fonts-page-layout/index.js b/src/fonts-page-layout/index.js
deleted file mode 100644
index ae98c355..00000000
--- a/src/fonts-page-layout/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-import './fonts-page-layout.css';
-
-function FontsPageLayout( props ) {
- return { props.children }
;
-}
-
-export default FontsPageLayout;
diff --git a/src/fonts-sidebar/fonts-sidebar.css b/src/fonts-sidebar/fonts-sidebar.css
deleted file mode 100644
index 0419892d..00000000
--- a/src/fonts-sidebar/fonts-sidebar.css
+++ /dev/null
@@ -1,102 +0,0 @@
-.variants-list {
- height: calc(100vh - 200px);
- overflow-y: auto;
- /* Firefox scrollbar */
- scrollbar-color: #e2e2e2 #fff;
- scrollbar-width: thin;
-}
-
-/* WebKit and Chromiums */
-.variants-list::-webkit-scrollbar {
- width: 8px;
- height: 8px;
- background-color: #fff;
- margin-left: 10px;
-}
-.variants-list::-webkit-scrollbar-thumb {
- background: #e2e2e2;
- border-radius: 5px;
-}
-
-.variants-family .header,
-.variants-family .header div {
- display: flex;
- justify-content: space-between;
- align-items: center;
- margin: 0 0 0.1rem 0;
-}
-
-.variants-family .header button {
- visibility: hidden;
-}
-
-.variants-family .header:hover button {
- visibility: visible;
-}
-
-.variants-family .name {
- font-weight: bold;
-}
-
-.variants-family .variants {
- font-size: 0.7rem;
- color: #7e7e7e;
- white-space: nowrap;
-}
-
-.variants-family {
- padding: 0.25rem 0;
-}
-
-.variant-row {
- display: grid;
- grid-template-columns: 1fr min-content min-content;
- white-space: nowrap;
- align-items: center;
- gap: 0.1rem;
- padding: 0 0 0 0.5rem;
- margin-bottom: 0.1rem;
-}
-
-.variant-row:hover {
- background-color: #f2f2f2;
-}
-
-.variant-row button {
- visibility: hidden;
-}
-
-.variant-row:hover button {
- visibility: visible;
-}
-
-.variants-total {
- border-top: 1px solid #e2e2e2;
- padding-top: 1rem;
- display: flex;
- justify-content: space-between;
-}
-
-.variants-total .variant,
-.variants-total .size {
- font-size: 0.9rem;
-}
-
-.size {
- font-size: 0.7rem;
- color: #7e7e7e;
-}
-
-.sidebar {
- border-left: 1px solid #e2e2e2;
- height: calc(100vh - 32px);
- position: sticky;
- top: 32px; /* 32px is the height of the admin bar */
-}
-
-.sidebar-container {
- padding: 1rem;
- position: sticky;
- top: 0;
-}
-
diff --git a/src/fonts-sidebar/index.js b/src/fonts-sidebar/index.js
deleted file mode 100644
index b04100c7..00000000
--- a/src/fonts-sidebar/index.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import { __, _n } from '@wordpress/i18n';
-import { useEffect, useState } from '@wordpress/element';
-import { Button } from '@wordpress/components';
-import { trash } from '@wordpress/icons';
-import { bytesToSize, localizeFontStyle } from '../utils';
-import './fonts-sidebar.css';
-
-function FontsSidebar( {
- title,
- fontsOutline,
- handleDeleteFontFace,
- handleDeleteFontFamily,
-} ) {
- const [ fileSizes, setFileSizes ] = useState( {} );
-
- const flatfontsOutline = Object.keys( fontsOutline )
- .map( ( family ) => {
- return fontsOutline[ family ].faces.map( ( face ) => {
- return {
- family,
- weight: face.weight,
- style: face.style,
- src: face.src,
- };
- } );
- } )
- .flat();
-
- useEffect( () => {
- const promises = flatfontsOutline.map( ( face ) => {
- return fetch( face.src, { method: 'HEAD' } );
- } );
-
- Promise.all( promises ).then( ( responses ) => {
- const sizes = {};
- responses.forEach( ( response ) => {
- sizes[ response.url ] =
- response.headers.get( 'content-length' );
- } );
- setFileSizes( sizes );
- } );
- }, [ fontsOutline ] );
-
- const variantsCount = Object.keys( fontsOutline ).reduce(
- ( acc, family ) => {
- return acc + fontsOutline[ family ].faces.length;
- },
- 0
- );
-
- const getFileSize = ( url ) => {
- return fileSizes[ url ] ? bytesToSize( fileSizes[ url ] ) : null;
- };
-
- const totalSize = bytesToSize(
- flatfontsOutline.reduce( ( acc, face ) => {
- return acc + parseInt( fileSizes[ face.src ] );
- }, 0 )
- );
-
- return (
-
-
-
-
{ title }
-
{ fontsOutline.family }
-
- { !! fontsOutline && (
- <>
-
-
- { Object.keys( fontsOutline ).map(
- ( key, i ) => (
-
-
-
- {
- fontsOutline[ key ]
- .family
- }{ ' ' }
-
-
-
- { !! fontsOutline[
- key
- ].faces.length && (
- <>
- { sprintf(
- // translators: %s: Variants information.
- __(
- '( %s )',
- 'create-block-theme'
- ),
- sprintf(
- // translators: %d: Number of variants.
- _n(
- '%d Variant',
- '%d Variants',
- fontsOutline[
- key
- ]
- .faces
- .length,
- 'create-block-theme'
- ),
- fontsOutline[
- key
- ]
- .faces
- .length
- )
- ) }
-
- ) }
-
-
- handleDeleteFontFamily(
- fontsOutline[
- key
- ].family
- )
- }
- />
-
-
- { fontsOutline[ key ].faces.map(
- ( face, faceIndex ) => (
-
-
- { face.weight }{ ' ' }
- { localizeFontStyle(
- face.style
- ) }
-
-
- { getFileSize(
- face.src
- ) }
-
-
-
- handleDeleteFontFace(
- fontsOutline[
- key
- ]
- .family,
- face.weight,
- face.style
- )
- }
- icon={
- trash
- }
- iconSize={
- 15
- }
- isSmall
- />
-
-
- )
- ) }
-
- )
- ) }
-
-
-
- ) }
-
-
-
- { sprintf(
- // translators: %d: Number of variants.
- _n(
- '%d Variant',
- '%d Variants',
- variantsCount,
- 'create-block-theme'
- ),
- variantsCount
- ) }
-
-
{ totalSize }
-
-
-
-
-
-
-
- { weight }
-
-
- { localizeFontStyle( style ) }
-
-
- { /* @TODO: associate label with control for accessibility */ }
- { /* eslint-disable-next-line jsx-a11y/label-has-associated-control */ }
-
-
-
-
- );
-}
-
-export default FontVariant;
diff --git a/src/google-fonts/google-fonts.css b/src/google-fonts/google-fonts.css
deleted file mode 100644
index f29a077d..00000000
--- a/src/google-fonts/google-fonts.css
+++ /dev/null
@@ -1,37 +0,0 @@
-#wpwrap {
- background: #fff;
-}
-
-#wpcontent {
- padding: 0;
-}
-
-#google-fonts-table {
- margin-bottom: 2rem;
-}
-
-#google-fonts-table.widefat thead td input {
- margin: 0;
-}
-
-#google-fonts-table tbody td {
- vertical-align: middle;
-}
-
-#google-fonts-table tbody p {
- font-size: 2rem;
- margin: 0;
-}
-
-#google-fonts-table .demo-cell {
- width: 100%;
- font-size: 1.7rem;
-}
-
-.select-font {
- display: flex;
-}
-
-.widefat td {
- padding: 0.2rem 1rem;
-}
diff --git a/src/google-fonts/index.js b/src/google-fonts/index.js
deleted file mode 100644
index 1b7af9c3..00000000
--- a/src/google-fonts/index.js
+++ /dev/null
@@ -1,410 +0,0 @@
-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, Spinner, Button } from '@wordpress/components';
-import { Font } from 'lib-font';
-
-import FontsSidebar from '../fonts-sidebar';
-import FontVariant from './font-variant';
-import {
- getWeightFromGoogleVariant,
- getStyleFromGoogleVariant,
- forceHttps,
- getGoogleVariantFromStyleAndWeight,
-} from '../utils';
-import DemoTextInput from '../demo-text-input';
-import FontsPageLayout from '../fonts-page-layout';
-import './google-fonts.css';
-import BackButton from '../manage-fonts/back-button';
-
-const EMPTY_SELECTION_DATA = {};
-
-// const selectionDataExample = {
-// "Abel sans": {
-// "family": "Abel sans",
-// "faces": [
-// {
-// "weight": "400",
-// "style": "normal",
-// "src": "https://fonts.gstatic.com/s/abel/v11/MwQ5bhbm2POE6VhLPJp6qGI.ttf"
-// }
-// ]
-// }
-// };
-
-function GoogleFonts() {
- const [ googleFontsData, setGoogleFontsData ] = useState( {} );
- const [ selectedFont, setSelectedFont ] = useState( null );
- const [ selectedFontCredits, setSelectedFontCredits ] = useState( {} );
- const [ selectionData, setSelectionData ] =
- useState( EMPTY_SELECTION_DATA );
-
- // pickup the nonce from the input printed in the server
- const nonce = document.querySelector( '#nonce' ).value;
-
- const handleToggleAllVariants = ( family ) => {
- const existingFamily = selectionData[ family ];
- if ( existingFamily && !! existingFamily?.faces?.length ) {
- const { [ family ]: removedFamily, ...rest } = selectionData;
- setSelectionData( rest );
- } else {
- const newFamily = {
- family,
- faces: selectedFont.variants.map( ( variant ) => {
- return {
- weight: getWeightFromGoogleVariant( variant ),
- style: getStyleFromGoogleVariant( variant ),
- src: forceHttps( selectedFont.files[ variant ] ),
- };
- } ),
- };
- setSelectionData( {
- ...selectionData,
- [ family ]: newFamily,
- } );
- }
- };
-
- const isVariantSelected = ( family, weight, style ) => {
- const existingFamily = selectionData[ family ];
- if ( existingFamily ) {
- const existingFace = existingFamily.faces.find( ( face ) => {
- return face.weight === weight && face.style === style;
- } );
- return !! existingFace;
- }
- return false;
- };
-
- const addVariant = ( family, weight, style ) => {
- const existingFamily = selectionData[ family ];
- const variant = getGoogleVariantFromStyleAndWeight( style, weight );
- if ( existingFamily ) {
- setSelectionData( {
- ...selectionData,
- [ family ]: {
- ...existingFamily,
- faces: [
- ...( existingFamily?.faces || [] ),
- {
- weight,
- style,
- src: forceHttps( selectedFont.files[ variant ] ),
- },
- ],
- },
- } );
- } else {
- setSelectionData( {
- ...selectionData,
- [ family ]: {
- family,
- faces: [
- {
- weight,
- style,
- src: forceHttps( selectedFont.files[ variant ] ),
- },
- ],
- },
- } );
- }
- };
-
- const removeVariant = ( family, weight, style ) => {
- const existingFamily = selectionData[ family ];
- const newFaces = existingFamily.faces.filter(
- ( face ) => ! ( face.weight === weight && face.style === style )
- );
- if ( ! newFaces.length ) {
- const { [ family ]: removedFamily, ...rest } = selectionData;
- setSelectionData( rest );
- } else {
- setSelectionData( {
- ...selectionData,
- [ family ]: {
- ...existingFamily,
- faces: newFaces,
- },
- } );
- }
- };
-
- const handleToggleVariant = ( family, weight, style ) => {
- if ( isVariantSelected( family, weight, style ) ) {
- removeVariant( family, weight, style );
- } else {
- addVariant( family, weight, style );
- }
- };
-
- // Load google fonts data
- useEffect( () => {
- ( async () => {
- const responseData = await fetch(
- createBlockTheme.googleFontsDataUrl
- );
- const parsedData = await responseData.json();
- setGoogleFontsData( parsedData );
- } )();
- }, [] );
-
- const theme = useSelect( ( select ) => {
- return select( coreDataStore ).getCurrentTheme();
- }, null );
-
- const getFontCredits = ( selectedFontObj ) => {
- const fontObj = new Font( selectedFontObj.family );
- let fontError = false;
-
- // Force font file to be https
- let fontFile = Object.values( selectedFontObj.files )[ 0 ];
- if ( fontFile.includes( 'http://' ) ) {
- fontFile = fontFile.replace( 'http://', 'https://' );
- }
-
- // Load font file
- fontObj.src = fontFile;
- fontObj.onerror = ( event ) => {
- // eslint-disable-next-line no-console
- console.error( event );
- fontError = true;
- };
-
- if ( ! fontError ) {
- fontObj.onload = ( event ) => getFontData( event );
-
- function getFontData( event ) {
- const font = event.detail.font;
- const { name } = font.opentype.tables;
-
- const fontCredits = {
- copyright: name.get( 0 ),
- source: name.get( 11 ),
- license: name.get( 13 ),
- licenseURL: name.get( 14 ),
- };
-
- setSelectedFontCredits( fontCredits );
- }
- }
- };
-
- const handleSelectChange = ( value ) => {
- setSelectedFont( googleFontsData.items[ value ] );
- getFontCredits( googleFontsData.items[ value ] );
- };
-
- let selectedFontFamilyId = '';
- if ( selectedFont ) {
- selectedFontFamilyId = selectedFont.family
- .toLowerCase()
- .replace( ' ', '-' );
- }
-
- return (
-
-
-
- { ! googleFontsData?.items && (
-
-
- { __(
- 'Loading Google fonts data…',
- 'create-block-theme'
- ) }
-
-
- ) }
- { googleFontsData?.items && (
- <>
-
-
-
- { __(
- 'Select a font…',
- 'create-block-theme'
- ) }
-
- { googleFontsData.items.map(
- ( font, index ) => (
-
- { font.family }
-
- )
- ) }
-
-
-
- { __(
- 'Select the font variants you want to include:',
- 'create-block-theme'
- ) }
-
- ) }
- { selectedFont && (
-
- ) }
-
-
- ) }
-
-
-
- );
-}
-
-export default GoogleFonts;
diff --git a/src/index.js b/src/index.js
deleted file mode 100644
index a886c620..00000000
--- a/src/index.js
+++ /dev/null
@@ -1,50 +0,0 @@
-import { render, createRoot } from '@wordpress/element';
-import ManageFonts from './manage-fonts';
-import GoogleFonts from './google-fonts';
-import LocalFonts from './local-fonts';
-import { ManageFontsProvider } from './fonts-context';
-import './index.scss';
-
-function App() {
- const params = new URLSearchParams( document.location.search );
- const page = params.get( 'page' );
-
- let PageComponent = null;
- switch ( page ) {
- case 'manage-fonts':
- PageComponent = ManageFonts;
- break;
- case 'add-google-font-to-theme-json':
- PageComponent = GoogleFonts;
- break;
- case 'add-local-font-to-theme-json':
- PageComponent = LocalFonts;
- break;
- default:
- PageComponent = () => This page is not implemented yet. ;
- break;
- }
-
- return (
-
-
- );
-}
-
-window.addEventListener(
- 'load',
- function () {
- const domNode = document.getElementById( 'create-block-theme-app' );
-
- // If version is less than 18 use `render` to render the app
- // otherwise use `createRoot` to render the app
- if ( createRoot === undefined ) {
- render(
-
-
-
-
-
-
{ __( 'Font file preview', 'create-block-theme' ) }
-
- { isFormValid() ? (
- <>
-
-
{ __( 'Demo:', 'create-block-theme' ) }
-
-
- ) : (
-
- { __(
- 'Load a font file to preview it.',
- 'create-block-theme'
- ) }
-
- ) }
-
-
- { __( 'Upload font to your theme', 'create-block-theme' ) }
-
-
- );
-}
-
-export default UploadFontForm;
diff --git a/src/manage-fonts/back-button.js b/src/manage-fonts/back-button.js
deleted file mode 100644
index 11433754..00000000
--- a/src/manage-fonts/back-button.js
+++ /dev/null
@@ -1,24 +0,0 @@
-import { Button } from '@wordpress/components';
-import { chevronLeft } from '@wordpress/icons';
-import { __ } from '@wordpress/i18n';
-
-function BackButton() {
- const { adminUrl } = createBlockTheme;
- return (
-
- { fontToDelete?.weight !== undefined &&
- fontToDelete.style !== undefined ? (
- { deleteFontFaceMessage }
- ) : (
- { deleteFontFamilyMessage }
- ) }
-
- { __(
- 'This action will delete the font definition and the font file assets from your theme.',
- 'create-block-theme'
- ) }
-
-
- );
-}
-
-export default ConfirmDeleteModal;
diff --git a/src/manage-fonts/font-face.js b/src/manage-fonts/font-face.js
deleted file mode 100644
index 43098eeb..00000000
--- a/src/manage-fonts/font-face.js
+++ /dev/null
@@ -1,45 +0,0 @@
-import { Button } from '@wordpress/components';
-import Demo from '../demo-text-input/demo';
-import { __ } from '@wordpress/i18n';
-import { localizeFontStyle } from '../utils';
-
-function FontFace( { face, deleteFont, shouldBeRemoved, isFamilyOpen } ) {
- const demoStyles = {
- fontFamily: face.fontFamily,
- fontStyle: face.fontStyle,
- // Handle cases like fontWeight is a number instead of a string or when the fontweight is a 'range', a string like "800 900".
- fontWeight: face.fontWeight
- ? String( face.fontWeight ).split( ' ' )[ 0 ]
- : 'normal',
- ...( face.fontVariationSettings
- ? { fontVariationSettings: face.fontVariationSettings }
- : {} ),
- };
-
- if ( shouldBeRemoved ) {
- return null;
- }
-
- return (
-
- { localizeFontStyle( face.fontStyle ) }
- { face.fontWeight }
-
-
- { deleteFont && (
-
-
- { __( 'Remove', 'create-block-theme' ) }
-
-
- ) }
-
- );
-}
-
-export default FontFace;
diff --git a/src/manage-fonts/font-family.js b/src/manage-fonts/font-family.js
deleted file mode 100644
index d227f264..00000000
--- a/src/manage-fonts/font-family.js
+++ /dev/null
@@ -1,141 +0,0 @@
-import { useContext } from '@wordpress/element';
-import { Button, Icon } from '@wordpress/components';
-import FontFace from './font-face';
-import { ManageFontsContext } from '../fonts-context';
-import { __, _n } from '@wordpress/i18n';
-import { chevronUp, chevronDown } from '@wordpress/icons';
-
-function FontFamily( { fontFamily, deleteFont } ) {
- const { familiesOpen, handleToggleFamily } =
- useContext( ManageFontsContext );
- const isOpen =
- familiesOpen.includes( fontFamily.name ) ||
- familiesOpen.includes( fontFamily.fontFamily );
-
- const toggleIsOpen = () => {
- handleToggleFamily( fontFamily.name || fontFamily.fontFamily );
- };
-
- if ( fontFamily.shouldBeRemoved ) {
- return null;
- }
-
- const hasFontFaces =
- !! fontFamily.fontFace && !! fontFamily.fontFace.length;
-
- return (
-
- { /* TODO: Add keyboard event to fix accessibility issue */ }
- { /* eslint-disable-next-line */ }
-
-
-
-
-
- { fontFamily.name || fontFamily.fontFamily }
-
- { hasFontFaces && (
-
- { ' ' }
- { sprintf(
- // translators: %s: Variants information.
- __( '( %s )', 'create-block-theme' ),
- sprintf(
- // translators: %d: Number of variants.
- _n(
- '%d Variant',
- '%d Variants',
- fontFamily.fontFace.length,
- 'create-block-theme'
- ),
- fontFamily.fontFace.length
- )
- ) }
-
- ) }
-
-
- {
- e.stopPropagation();
- deleteFont(
- fontFamily.name || fontFamily.fontFamily
- );
- } }
- >
- { __(
- 'Remove Font Family',
- 'create-block-theme'
- ) }
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- { __( 'Style', 'create-block-theme' ) }
-
-
- { __( 'Weight', 'create-block-theme' ) }
-
-
- { __(
- 'Preview',
- 'create-block-theme'
- ) }
-
- { hasFontFaces &&
-
-
- { hasFontFaces &&
- fontFamily.fontFace.map(
- ( fontFace, i ) => {
- if ( fontFace.shouldBeRemoved ) {
- return null;
- }
- return (
-
- deleteFont(
- fontFamily.name ||
- fontFamily.fontFamily,
- fontFace.fontWeight,
- fontFace.fontStyle
- )
- }
- isFamilyOpen={ isOpen }
- />
- );
- }
- ) }
- { ! hasFontFaces && fontFamily.fontFamily && (
-
-
-
-
-
-
- );
-}
-
-export default FontFamily;
diff --git a/src/manage-fonts/help-modal.js b/src/manage-fonts/help-modal.js
deleted file mode 100644
index 5d592e01..00000000
--- a/src/manage-fonts/help-modal.js
+++ /dev/null
@@ -1,35 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { Modal, Icon } from '@wordpress/components';
-
-function HelpModal( { isOpen, onClose } ) {
- if ( ! isOpen ) {
- return null;
- }
-
- return (
-
-
- { __(
- 'This is a list of your font families listed in the theme.json file of your theme.',
- 'create-block-theme'
- ) }
-
-
- { __(
- 'If your theme.json makes reference to fonts providers other than local they may not be displayed correctly.',
- 'create-block-theme'
- ) }
-
-
- );
-}
-
-export default HelpModal;
diff --git a/src/manage-fonts/index.js b/src/manage-fonts/index.js
deleted file mode 100644
index 8f5b8bf8..00000000
--- a/src/manage-fonts/index.js
+++ /dev/null
@@ -1,203 +0,0 @@
-import { useState, useEffect } from '@wordpress/element';
-import { __ } from '@wordpress/i18n';
-import FontFamily from './font-family';
-
-import DemoTextInput from '../demo-text-input';
-import FontsPageLayout from '../fonts-page-layout';
-import HelpModal from './help-modal';
-import FontsSidebar from '../fonts-sidebar';
-import PageHeader from './page-header';
-import ConfirmDeleteModal from './confirm-delete-modal';
-import { localFileAsThemeAssetUrl } from '../utils';
-import './manage-fonts.css';
-
-function ManageFonts() {
- const nonce = document.querySelector( '#nonce' ).value;
-
- // The element where the list of theme fonts is rendered coming from the server as JSON
- const themeFontsJsonElement = document.querySelector( '#theme-fonts-json' );
-
- // The form element that will be submitted to the server
- const manageFontsFormElement =
- document.querySelector( '#manage-fonts-form' );
-
- // The theme font list coming from the server as JSON
- const themeFontsJsonValue = themeFontsJsonElement.innerHTML;
-
- const themeFontsJson = JSON.parse( themeFontsJsonValue ) || [];
-
- // The client-side theme font list is initizaliased with the server-side theme font list
- const [ newThemeFonts, setNewThemeFonts ] = useState( themeFontsJson );
-
- // Object where we store the font family or font face index position in the newThemeFonts array that is about to be removed
- const [ fontToDelete, setFontToDelete ] = useState( {
- fontFamily: undefined,
- weight: undefined,
- style: undefined,
- } );
-
- // dialogs states
- const [ showConfirmDialog, setShowConfirmDialog ] = useState( false );
- const [ isHelpOpen, setIsHelpOpen ] = useState( false );
-
- // When client side font list changes, we update the server side font list
- useEffect( () => {
- // Avoids running this effect on the first render
- if ( fontToDelete.fontFamily !== undefined ) {
- // Submit the form to the server
- manageFontsFormElement.submit();
- }
- }, [ newThemeFonts ] );
-
- const toggleIsHelpOpen = () => {
- setIsHelpOpen( ! isHelpOpen );
- };
-
- function requestDeleteConfirmation( fontFamily, weight, style ) {
- setFontToDelete(
- { fontFamily, weight, style },
- setShowConfirmDialog( true )
- );
- }
-
- function confirmDelete() {
- setShowConfirmDialog( false );
- // if fontFaceIndex.weight and fontFace.styles are undefined, we are deleting a font family
- if (
- fontToDelete.weight !== undefined &&
- fontToDelete.style !== undefined
- ) {
- deleteFontFace(
- fontToDelete.fontFamily,
- fontToDelete.weight,
- fontToDelete.style
- );
- } else {
- deleteFontFamily( fontToDelete.fontFamily );
- }
- }
-
- function cancelDelete() {
- setFontToDelete( {} );
- setShowConfirmDialog( false );
- }
-
- function deleteFontFamily( fontFamily ) {
- const updatedFonts = newThemeFonts.map( ( family ) => {
- if (
- fontFamily === family.fontFamily ||
- fontFamily === family.name
- ) {
- return {
- ...family,
- shouldBeRemoved: true,
- };
- }
- return family;
- } );
- setNewThemeFonts( updatedFonts );
- }
-
- function deleteFontFace() {
- const { fontFamily, weight, style } = fontToDelete;
- const updatedFonts = newThemeFonts.reduce( ( acc, family ) => {
- const { fontFace = [], ...updatedFamily } = family;
- if (
- fontFamily === family.fontFamily &&
- fontFace.filter( ( face ) => ! face.shouldBeRemoved ).length ===
- 1
- ) {
- updatedFamily.shouldBeRemoved = true;
- }
- updatedFamily.fontFace = fontFace.map( ( face ) => {
- if (
- weight === face.fontWeight &&
- style === face.fontStyle &&
- ( fontFamily === family.fontFamily ||
- fontFamily === family.name )
- ) {
- return {
- ...face,
- shouldBeRemoved: true,
- };
- }
- return face;
- } );
- return [ ...acc, updatedFamily ];
- }, [] );
- setNewThemeFonts( updatedFonts );
- }
-
- // format the theme fonts object to be used by the FontsSidebar component
- const fontsOutline = newThemeFonts.reduce( ( acc, fontFamily ) => {
- acc[ fontFamily.fontFamily ] = {
- family: fontFamily.name || fontFamily.fontFamily,
- faces: ( fontFamily.fontFace || [] ).map( ( face ) => {
- return {
- weight: face.fontWeight,
- style: face.fontStyle,
- src: localFileAsThemeAssetUrl( face.src[ 0 ] ),
- };
- } ),
- };
- return acc;
- }, {} );
-
- return (
- <>
-
-
-
- { __(
- 'There are no font families defined in your theme.json file.',
- 'create-block-theme'
- ) }
-
- ) : (
-
- { newThemeFonts.map( ( fontFamily, i ) => (
-
- ) }
-
-
-
-
-
-
- );
-}
-
-export default ManageFonts;
diff --git a/src/manage-fonts/manage-fonts.css b/src/manage-fonts/manage-fonts.css
deleted file mode 100644
index 16b72a0b..00000000
--- a/src/manage-fonts/manage-fonts.css
+++ /dev/null
@@ -1,135 +0,0 @@
-.hidden {
- display: none;
- visibility: hidden;
-}
-
-.help {
- display: flex;
- align-items: center;
- gap: 0.5rem;
-}
-
-.font-families > table {
- margin-bottom: 2rem;
- overflow: hidden;
-}
-
-.font-families > table > tbody {
- position: relative;
- z-index: 1;
-}
-
-.font-families > table > thead {
- cursor: pointer;
- position: relative;
- z-index: 2;
-}
-
-.font-families > table > thead .variants-count {
- font-size: 0.7rem;
- font-weight: 400;
- color: #7e7e7e;
-}
-
-.font-families > table > thead td {
- font-size: 0.9rem;
-}
-
-.font-family-contents .slide {
- border-bottom-left-radius: 15px;
- margin: 0 0 0 1.5rem;
- display: block;
- padding: 0;
- transition: all 0.1s ease-in-out;
-}
-
-.font-family-contents .slide.open {
- transform: translateY(0);
- max-height: 999999px;
-}
-
-.font-family-contents .slide.close {
- transform: translateY(-50%);
- opacity: 0;
- max-height: 0;
- pointer-events: none;
-}
-
-.font-family-contents .container {
- overflow: hidden;
- display: block;
-}
-
-.font-family-contents table {
- border-bottom: none;
- border-right: none;
- border-top: none;
-}
-
-.font-family-contents .preview-head {
- width: 100%;
-}
-
-.font-face .demo-cell input {
- font-size: 1.7rem;
- line-height: 1.5;
- margin: 0;
- padding: 0.1em;
- border: none;
- background: none;
- width: 100%;
-}
-
-.font-family-contents tbody td {
- vertical-align: middle;
-}
-
-.widefat td {
- padding: 0.5rem 2rem;
-}
-
-td.font-family-head {
- display: flex;
- justify-content: space-between;
- align-items: center;
- padding: 1rem;
- background-color: #f6f7f7;
-}
-
-.font-family-head div:last-of-type {
- display: flex;
- gap: 1rem;
-}
-
-.slide.open {
- margin: 0;
- border: none;
-}
-
-table.widefat.wp-list-table {
- border-radius: 2px;
-}
-
-table.widefat table {
- border: none;
-}
-
-.manage-fonts-header-flex {
- display: flex;
- justify-content: space-between;
- align-items: center;
-}
-
-.manage-fonts-header-flex .buttons {
- display: flex;
- gap: 1rem;
-}
-
-.manage-fonts-header-flex .wp-heading-inline + .page-title-action {
- margin-left: auto;
-}
-
-.components-button.page-title-action {
- font-weight: normal;
- margin-left: 0.75rem;
-}
diff --git a/src/manage-fonts/page-header.js b/src/manage-fonts/page-header.js
deleted file mode 100644
index b6d93c02..00000000
--- a/src/manage-fonts/page-header.js
+++ /dev/null
@@ -1,46 +0,0 @@
-import { __ } from '@wordpress/i18n';
-import { Button, Icon } from '@wordpress/components';
-
-function PageHeader( { toggleIsHelpOpen } ) {
- const { adminUrl } = createBlockTheme;
-
- return (
- <>
-
-
- { __( 'Manage Theme Fonts', 'create-block-theme' ) }
-
-
-
- { __( 'Add Google Font', 'create-block-theme' ) }
-
-
- { __( 'Add Local Font', 'create-block-theme' ) }
-
-
-
- { __(
- 'These are the fonts currently embedded in your theme ',
- 'create-block-theme'
- ) }
-
-
-
-
- );
-}
-
-export default PageHeader;
diff --git a/src/test/unit.js b/src/test/unit.js
deleted file mode 100644
index 685c3500..00000000
--- a/src/test/unit.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import { addQuotesToName } from '../utils';
-
-describe( 'addQuotesToName', () => {
- const easyFonts = [ 'Roboto' ];
- const complicatedFonts = [
- 'Roboto Mono',
- 'Open Sans Condensed',
- 'Exo 2',
- 'Libre Barcode 128 Text',
- 'Press Start 2P',
- 'Rock 3D',
- 'Rubik 80s Fade',
- ];
-
- it( 'should add quotes to all font names', () => {
- [ ...easyFonts, ...complicatedFonts ].forEach( ( font ) => {
- expect( addQuotesToName( font ) ).toEqual( `'${ font }'` );
- } );
- } );
-
- it( 'should avoid FontFace objects with empty font name', () => {
- complicatedFonts.forEach( ( font ) => {
- const quoted = addQuotesToName( font );
- const fontObject = new FontFace( quoted, {} );
-
- expect( fontObject ).toBeInstanceOf( FontFace );
- expect( fontObject.family ).toEqual( quoted );
- } );
- } );
-} );
diff --git a/src/utils.js b/src/utils.js
index 2da6aaa9..6c25b9b9 100644
--- a/src/utils.js
+++ b/src/utils.js
@@ -1,88 +1,26 @@
-import { __, _x } from '@wordpress/i18n';
-
-export function getStyleFromGoogleVariant( variant ) {
- return variant.includes( 'italic' ) ? 'italic' : 'normal';
-}
-
-export function getWeightFromGoogleVariant( variant ) {
- return variant === 'regular' || variant === 'italic'
- ? '400'
- : variant.replace( 'italic', '' );
-}
-
-export function getGoogleVariantFromStyleAndWeight( style, weight ) {
- if ( weight === '400' ) {
- if ( style === 'italic' ) {
- return 'italic';
- }
- return 'regular';
- }
- if ( style === 'normal' ) {
- return weight;
- }
- return weight + style;
-}
-
-export function localizeFontStyle( style ) {
- const styles = {
- normal: _x( 'Normal', 'Font style', 'create-block-theme' ),
- italic: _x( 'Italic', 'Font style', 'create-block-theme' ),
- };
- return styles[ style ] !== undefined ? styles[ style ] : style;
-}
-
-export function forceHttps( url ) {
- return url.replace( 'http://', 'https://' );
-}
-
-export function bytesToSize( bytes ) {
- const sizes = [ 'Bytes', 'KB', 'MB', 'GB', 'TB' ];
- if ( bytes === 0 ) return __( 'n/a', 'create-block-theme' );
- const i = parseInt( Math.floor( Math.log( bytes ) / Math.log( 1024 ) ) );
- if ( i === 0 ) return bytes + ' ' + sizes[ i ];
- return ( bytes / Math.pow( 1024, i ) ).toFixed( 1 ) + ' ' + sizes[ i ];
-}
-
-export function localFileAsThemeAssetUrl( url ) {
- if ( ! url ) {
- return url;
- }
- return url.replace( 'file:./', createBlockTheme.themeUrl + '/' );
-}
-
-export async function downloadFile( response ) {
+export async function downloadFile(response) {
const blob = await response.blob();
const filename = response.headers
- .get( 'Content-Disposition' )
- .split( 'filename=' )[ 1 ];
+ .get('Content-Disposition')
+ .split('filename=')[1];
// Check if the browser supports navigator.msSaveBlob or navigator.saveBlob
- if ( navigator.msSaveBlob || navigator.saveBlob ) {
+ if (navigator.msSaveBlob || navigator.saveBlob) {
const saveBlob = navigator.msSaveBlob || navigator.saveBlob;
- saveBlob.call( navigator, blob, filename );
+ saveBlob.call(navigator, blob, filename);
} else {
// Fall back to creating an object URL and triggering a download using an anchor element
- const url = URL.createObjectURL( blob );
+ const url = URL.createObjectURL(blob);
- const a = document.createElement( 'a' );
+ const a = document.createElement('a');
a.href = url;
a.download = filename;
- document.body.appendChild( a );
+ document.body.appendChild(a);
a.click();
- document.body.removeChild( a );
+ document.body.removeChild(a);
- setTimeout( () => {
- URL.revokeObjectURL( url );
- }, 100 );
+ setTimeout(() => {
+ URL.revokeObjectURL(url);
+ }, 100);
}
}
-
-/*
- * Add quotes to font name.
- * @param {string} familyName The font family name.
- * @return {string} The font family name with quotes.
- */
-
-export function addQuotesToName( familyName ) {
- return `'${ familyName }'`.trim();
-}
diff --git a/test/unit/jest.config.js b/test/unit/jest.config.js
deleted file mode 100644
index b9e7236a..00000000
--- a/test/unit/jest.config.js
+++ /dev/null
@@ -1,10 +0,0 @@
-module.exports = {
- testEnvironment: 'jsdom',
- rootDir: '../../',
- testMatch: [ '/src/test/**/*.js' ],
- moduleFileExtensions: [ 'js' ],
- moduleNameMapper: {
- '^@/(.*)$': '/src/$1',
- },
- setupFiles: [ '/test/unit/setup.js' ],
-};
diff --git a/test/unit/setup.js b/test/unit/setup.js
deleted file mode 100644
index c41328a1..00000000
--- a/test/unit/setup.js
+++ /dev/null
@@ -1,7 +0,0 @@
-// Stub out the FontFace class for tests.
-global.FontFace = class {
- constructor( family, source ) {
- this.family = family;
- this.source = source;
- }
-};
diff --git a/update-google-fonts-json-file.js b/update-google-fonts-json-file.js
deleted file mode 100644
index 8782f750..00000000
--- a/update-google-fonts-json-file.js
+++ /dev/null
@@ -1,70 +0,0 @@
-const fs = require( 'fs' );
-const crypto = require( 'crypto' );
-
-const API_URL = 'https://www.googleapis.com/webfonts/v1/webfonts?key=';
-const API_KEY = process.env.GOOGLE_FONTS_API_KEY;
-
-function calculateHash( somestring ) {
- return crypto
- .createHash( 'md5' )
- .update( somestring )
- .digest( 'hex' )
- .toString();
-}
-
-async function updateFiles() {
- let newApiData;
- let newData;
-
- try {
- newApiData = await fetch( `${ API_URL }${ API_KEY }` );
- newData = await newApiData.json();
- } catch ( error ) {
- // TODO: show in UI and remove console statement
- // eslint-disable-next-line
- console.error( '❎ Error fetching the Google Fonts API:', error );
- process.exit( 1 );
- }
-
- if ( newData.items ) {
- try {
- const newDataString = JSON.stringify( newData, null, 2 );
- const oldFileData = fs.readFileSync(
- './assets/google-fonts/fallback-fonts-list.json',
- 'utf8'
- );
- const oldData = JSON.parse( oldFileData );
- const oldDataString = JSON.stringify( oldData, null, 2 );
-
- if (
- calculateHash( newDataString ) !==
- calculateHash( oldDataString )
- ) {
- fs.writeFileSync(
- './assets/google-fonts/fallback-fonts-list.json',
- newDataString
- );
- // TODO: show in UI and remove console statement
- // eslint-disable-next-line
- console.info( '✅ Google Fonts JSON file updated' );
- } else {
- // TODO: show in UI and remove console statement
- // eslint-disable-next-line
- console.info( 'ℹ️ Google Fonts JSON file is up to date' );
- }
- } catch ( error ) {
- // eslint-disable-next-line
- console.error( '❎ Error stringifying the new JSON data:', error );
- process.exit( 1 );
- }
- } else {
- // TODO: show in UI and remove console statement
- // eslint-disable-next-line
- console.error(
- '❎ No new data to check. Check the Google Fonts API key.'
- );
- process.exit( 1 );
- }
-}
-
-updateFiles();
diff --git a/webpack.config.js b/webpack.config.js
index 344379ee..71d395a4 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -1,19 +1,9 @@
/**
* WordPress Dependencies
*/
-const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' );
+const defaultConfig = require('@wordpress/scripts/config/webpack.config.js');
module.exports = {
// Default wordpress config
...defaultConfig,
-
- // custom config to avoid errors with lib-font dependency
- ...{
- resolve: {
- fallback: {
- zlib: false,
- fs: false,
- },
- },
- },
};