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.

Sign up for GitHub

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 #268

Merged
merged 18 commits into from
Mar 15, 2023
Merged

Local fonts section implementation in React #268

Show file tree
Hide file tree
Changes from 17 commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
3feb346
local fonts upload: refactor ui from php and vanilla js to react app
matiasbenedetto Mar 10, 2023
738bcfe
adding preview for the local fonts
matiasbenedetto Mar 10, 2023
c6e3dbf
Adding range controls for each variable font available axis
matiasbenedetto Mar 10, 2023
7868090
previewing and saving font variation settings
matiasbenedetto Mar 10, 2023
cb5fb98
rendering in CSS only not the default values
matiasbenedetto Mar 13, 2023
df5aa4e
moving font weight with wght font axis
matiasbenedetto Mar 13, 2023
e0a62f5
otf support
matiasbenedetto Mar 13, 2023
dd6b5eb
translatable strings
matiasbenedetto Mar 14, 2023
a2fd41f
translatable string
matiasbenedetto Mar 14, 2023
415d157
adjusting padding
matiasbenedetto Mar 14, 2023
b307676
avoid polluting other parts of the app with css
matiasbenedetto Mar 14, 2023
8496840
add preview message before loading a font
matiasbenedetto Mar 14, 2023
896200c
removing html native validation
matiasbenedetto Mar 14, 2023
a64bcaf
refining styles
matiasbenedetto Mar 14, 2023
3442928
removing the need to define a font weight for a font file
matiasbenedetto Mar 14, 2023
93af55a
moving variable controls to preview panel
matiasbenedetto Mar 14, 2023
73e3e73
Merge branch 'trunk' into refactor/localfonts
matiasbenedetto Mar 14, 2023
4c67ee4
fixing npm vulnerability with 'npm audit fix'
matiasbenedetto Mar 15, 2023
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
17 changes: 13 additions & 4 deletions admin/class-manage-fonts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -147,7 +147,6 @@ function save_local_fonts_to_theme() {
! empty( $_FILES['font-file'] ) &&
! empty( $_POST['font-name'] ) &&
! empty( $_POST['font-style'] ) &&
! empty( $_POST['font-weight'] ) &&
$this->has_file_and_user_permissions()
) {
if (
Expand All @@ -160,16 +159,26 @@ function save_local_fonts_to_theme() {

move_uploaded_file( $_FILES['font-file']['tmp_name'], get_stylesheet_directory() . '/assets/fonts/' . $file_name );

$new_font_faces = array();
$new_font_faces[] = array(
$uploaded_font_face = array(
'fontFamily' => $_POST['font-name'],
'fontStyle' => $_POST['font-style'],
'fontWeight' => $_POST['font-weight'],
'src' => array(
'file:./assets/fonts/' . $file_name,
),
);

if ( ! empty( $_POST['font-weight'] ) ) {
$uploaded_font_face['fontWeight'] = $_POST['font-weight'];
}

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 );
return add_action( 'admin_notices', array( 'Font_Form_Messages', 'admin_notice_embed_font_success' ) );
}
Expand Down
54 changes: 0 additions & 54 deletions admin/js/embed-local-font.js
View file
Open in desktop

This file was deleted.

1 change: 0 additions & 1 deletion admin/js/lib/lib-font.browser.js
View file
Open in desktop

This file was deleted.

85 changes: 8 additions & 77 deletions admin/manage-fonts/local-fonts-page.php
View file
Open in desktop
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( '.otf, .ttf, .woff, .woff2 file extensions supported', 'create-block-theme' ); ?></small>
</th>
<td>
<input type="file" accept=".otf, .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
Loading