Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Local fonts section implementation in React #267

Closed
wants to merge 1 commit into from
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
54 changes: 0 additions & 54 deletions admin/js/embed-local-font.js

This file was deleted.

1 change: 0 additions & 1 deletion admin/js/lib/lib-font.browser.js

This file was deleted.

85 changes: 8 additions & 77 deletions admin/manage-fonts/local-fonts-page.php
Original file line number Diff line number Diff line change
@@ -1,87 +1,18 @@
<?php

require_once( __DIR__ . '/fonts-page.php' );

class Local_Fonts {
public static function local_fonts_admin_page() {
wp_enqueue_script( 'inflate', plugin_dir_url( dirname( __FILE__ ) ) . 'js/lib/inflate.js', array(), '1.0', false );
wp_enqueue_script( 'unbrotli', plugin_dir_url( dirname( __FILE__ ) ) . 'js/lib/unbrotli.js', array(), '1.0', false );
wp_enqueue_script( 'lib-font-browser', plugin_dir_url( dirname( __FILE__ ) ) . 'js/lib/lib-font.browser.js', array(), '1.0', false );
wp_enqueue_script( 'embed-local-font', plugin_dir_url( dirname( __FILE__ ) ) . 'js/embed-local-font.js', array(), '1.0', false );
// JS dependencies needed to read the file data from .woff and .woff2 files. (no needed for .ttf files)
wp_enqueue_script( 'inflate', plugin_dir_url( dirname( __FILE__ ) ) . 'js/lib/inflate.js', array(), '', false );
wp_enqueue_script( 'unbrotli', plugin_dir_url( dirname( __FILE__ ) ) . 'js/lib/unbrotli.js', array(), '', false );

function add_type_attribute( $tag, $handle, $src ) {
// if not your script, do nothing and return original $tag
if ( 'embed-local-font' !== $handle && 'lib-font-browser' !== $handle ) {
return $tag;
}
// change the script tag by adding type="module" and return it.
$tag = '<script type="module" src="' . esc_url( $src ) . '"></script>';
return $tag;
}
Fonts_Page::load_fonts_react_app();

add_filter( 'script_loader_tag', 'add_type_attribute', 10, 3 );
?>
<div class="wrap local-fonts-page">
<h2><?php _ex( 'Add local fonts to your theme', 'UI String', 'create-block-theme' ); ?></h2>
<h3>
<?php
printf(
// translators: %1$s: Theme name
esc_html__( 'Add local fonts assets and font face definitions to your currently active theme (%1$s)', 'create-block-theme' ),
esc_html( wp_get_theme()->get( 'Name' ) )
);
?>
</h3>
<form enctype="multipart/form-data" action="" method="POST">
<table class="form-table">
<tbody>
<tr>
<th scope="row">
<label for="font-file"><?php _e( 'Font file', 'create-block-theme' ); ?></label>
<br>
<small style="font-weight:normal;"><?php _e( '.ttf, .woff, .woff2 file extensions supported', 'create-block-theme' ); ?></small>
</th>
<td>
<input type="file" accept=".ttf, .woff, .woff2" name="font-file" id="font-file" class="upload" required/>
</td>
</tr>
<tr>
<th><?php _e( 'Font face definition for this font file:', 'create-block-theme' ); ?></th>
<td>
<hr/>
</td>
</tr>
<tr>
<th>
<label for="font-name"><?php _e( 'Font name', 'create-block-theme' ); ?></label>
</th>
<td>
<input type="text" name="font-name" id="font-name" placeholder="<?php _e( 'Font name', 'create-block-theme' ); ?>" required>
</td>
</tr>
<tr>
<th>
<label for="font-style"><?php _e( 'Font style', 'create-block-theme' ); ?></label>
</th>
<td>
<select name="font-style" id="font-style" required>
<option value="normal">Normal</option>
<option value="italic">Italic</option>
</select>
</td>
</tr>
<tr>
<th>
<label for="font-weight"><?php _e( 'Font weight', 'create-block-theme' ); ?></label>
</th>
<td>
<input type="text" name="font-weight" id="font-weight" placeholder="<?php _e( 'Font weight', 'create-block-theme' ); ?>" required>
</td>
</tr>
</tbody>
</table>
<input type="submit" value="<?php _e( 'Upload local fonts to your theme', 'create-block-theme' ); ?>" class="button button-primary" />
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce( 'create_block_theme' ); ?>" />
</form>
</div>
<input id="nonce" type="hidden" value="<?php echo wp_create_nonce( 'create_block_theme' ); ?>" />
<div id="fonts-app"></div>

<?php
}
Expand Down
17 changes: 14 additions & 3 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,8 @@
},
"main": "build/index.js",
"dependencies": {
"@wordpress/icons": "^9.17.0"
"@wordpress/icons": "^9.17.0",
"lib-font": "^2.4.0"
},
"devDependencies": {
"@actions/core": "^1.10.0",
Expand Down
4 changes: 4 additions & 0 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { render } from '@wordpress/element';
import ManageFonts from './manage-fonts';
import GoogleFonts from './google-fonts';
import LocalFonts from './local-fonts';
import { ManageFontsProvider } from './fonts-context';

function App() {
Expand All @@ -15,6 +16,9 @@ function App() {
case 'add-google-font-to-theme-json':
PageComponent = GoogleFonts;
break;
case 'add-local-font-to-theme-json':
PageComponent = LocalFonts;
break;
default:
PageComponent = () => <h1>This page is not implemented yet.</h1>;
break;
Expand Down
Loading