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

Refactor: Add Google Fonts section from vanilla JS to React app #194

Merged
merged 9 commits into from
Feb 2, 2023
Merged

Refactor: Add Google Fonts section from vanilla JS to React app #194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
188aa8f
Load react app in google fonts page
matiasbenedetto Jan 23, 2023
139a28e
continue re-implementation
matiasbenedetto Jan 25, 2023
5e34b8b
implementing font variant selection
matiasbenedetto Jan 27, 2023
5dc9476
Merge branch 'trunk' into refactor/google-fonts-to-react-app
matiasbenedetto Jan 31, 2023
09b2582
moving context component
matiasbenedetto Jan 31, 2023
aed3e95
context demo text on google fonts
matiasbenedetto Jan 31, 2023
dcdb81f
Refactoring client-server data
matiasbenedetto Feb 1, 2023
85d50fa
fixing notices for local fonts
matiasbenedetto Feb 1, 2023
50cb5cf
Merge branch 'trunk' into refactor/google-fonts-to-react-app
matiasbenedetto Feb 2, 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
94 changes: 40 additions & 54 deletions admin/class-manage-fonts.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,7 @@ function can_read_and_write_font_assets_directory () {
return true;
}


function manage_fonts_admin_page () {
function load_fonts_react_app () {
// Load the required WordPress packages.
// Automatically load imported dependencies and assets version.
$asset_file = include plugin_dir_path( __DIR__ ) . 'build/index.asset.php';
Expand All @@ -73,7 +72,10 @@ function manage_fonts_admin_page () {
// Load our app.js.
array_push( $asset_file['dependencies'], 'wp-i18n' );
wp_enqueue_script( 'create-block-theme-app', plugins_url( 'build/index.js', __DIR__ ), $asset_file['dependencies'], $asset_file['version'] );
}

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' );
Expand Down Expand Up @@ -108,7 +110,7 @@ function manage_fonts_admin_page () {
<p name="theme-fonts-json" id="theme-fonts-json" class="hidden"><?php echo $fonts_json_string; ?></p>

<form method="POST" id="manage-fonts-form">
<div id="manage-fonts"></div>
<div id="fonts-app"></div>
<input type="hidden" name="nonce" value="<?php echo wp_create_nonce( 'create_block_theme' ); ?>" />
</form>

Expand Down Expand Up @@ -195,37 +197,12 @@ function add_type_attribute($tag, $handle, $src) {
}

function google_fonts_admin_page() {
wp_enqueue_script('google-fonts-script', plugin_dir_url(__FILE__) . 'js/google-fonts.js', array( ), '1.0', false );
wp_enqueue_style('google-fonts-styles', plugin_dir_url( __DIR__ ) . '/css/google-fonts.css', array(), '1.0', false );
$this->load_fonts_react_app();
?>
<div class="wrap google-fonts-page">
<h2><?php _ex('Add Google fonts to your theme', 'UI String', 'create-block-theme'); ?></h2>
<form enctype="multipart/form-data" action="" method="POST">
<h3><?php printf( esc_html__('Add Google fonts assets and font face definitions to your currently active theme (%1$s)', 'create-block-theme'), esc_html( wp_get_theme()->get('Name') ) ); ?></h3>
<label for="google-font-id"><?php printf( esc_html__('Select Font', 'create-block-theme')); ?></label>
<select name="google-font" id="google-font-id">
<option value=""><?php _e('Select a font...', 'create-block-theme'); ?></option>
</select>
<br /><br />
<p class="hint"><?php _e('Select the font variants you want to include:', 'create-block-theme'); ?></p>
<table class="wp-list-table widefat fixed striped table-view-list" id="google-fonts-table">
<thead>
<tr>
<td class=""><input type="checkbox" id="select-all-variants" /></td>
<td class=""><?php printf( esc_html__('Variant', 'create-block-theme')); ?></td>
<td class=""><?php printf( esc_html__('Preview', 'create-block-theme')); ?></td>
</tr>
</thead>
<tbody id="font-options">
</tbody>
</table>
<br /><br />
<input type="hidden" name="font-name" id="font-name" value="" />
<input type="hidden" name="google-font-variants" id="google-font-variants" value="" />
<input type="submit" value="<?php _e('Add google fonts to your theme', 'create-block-theme'); ?>" class="button button-primary" id="google-fonts-submit" disabled=true />
<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 Expand Up @@ -339,46 +316,39 @@ function save_local_fonts_to_theme () {
function save_google_fonts_to_theme () {
if (
current_user_can( 'edit_themes' ) &&
! empty( $_POST['nonce'] ) &&
wp_verify_nonce( $_POST['nonce'], 'create_block_theme' ) &&
! empty( $_POST['google-font-variants'] ) &&
! empty( $_POST['font-name'] )
! empty( $_POST[ 'nonce' ] ) &&
wp_verify_nonce( $_POST[ 'nonce' ], 'create_block_theme' ) &&
! empty( $_POST[ 'selection-data' ] )
) {
if( ! $this->can_read_and_write_font_assets_directory() ) {
return add_action( 'admin_notices', [ $this, 'admin_notice_embed_font_permission_error' ] );
}

// Gets data from the form
$google_font_name = $_POST['font-name'];
$data = json_decode( stripslashes( $_POST[ 'selection-data' ] ), true );
$google_font_name = $data[ 'family' ];
$font_slug = sanitize_title( $google_font_name );
$google_font_variants = $_POST['google-font-variants'];
$variants = explode(',', $google_font_variants);
$variants = $data[ '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]
$variant_and_url = explode ('::', $variant);
$file_extension = pathinfo($variant_and_url[1], PATHINFO_EXTENSION);
$file_name = $font_slug.'_'.$variant_and_url[0].'.'.$file_extension;
$file_extension = pathinfo($variant[ 'src' ], PATHINFO_EXTENSION);
$file_name = $font_slug.'_'.$variant[ 'style' ].'_'.$variant[ 'weight' ].'.'.$file_extension;

// Download font asset in temp folder
$temp_file = download_url( $variant_and_url[1] );
$temp_file = download_url( $variant[ 'src' ] );

if ( $this->has_font_mime_type( $variant_and_url[1] ) ) {
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);

// Get the font style and weight
$variant_style = str_contains($variant_and_url[0], 'italic') ? 'italic' : 'normal';
$variant_weight = ($variant_and_url[0] === 'regular' || $variant_and_url[0] === 'italic') ? '400' : $variant_and_url[0];
$variant_weight = str_replace('italic', '', $variant_weight);
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,
'fontStyle' => $variant[ 'style' ],
'fontWeight' => $variant[ 'weight' ],
'src' => array(
'file:./assets/fonts/'.$file_name
),
Expand Down Expand Up @@ -454,10 +424,18 @@ function ($font_family) use ($font_slug) { return $font_family['slug'] !== $fon

function admin_notice_embed_font_success () {
$theme_name = wp_get_theme()->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' ];
}
?>
<div class="notice notice-success is-dismissible">
<p>
<?php printf( esc_html__( '%1$s font added to %2$s theme.', 'create-block-theme' ), esc_html( $_POST['font-name'] ), esc_html( $theme_name ) ); ?>
<?php printf( esc_html__( '%1$s font added to %2$s theme.', 'create-block-theme' ), esc_html( $font_family ), esc_html( $theme_name ) ); ?>
<a href="themes.php?page=manage-fonts"><?php printf( esc_html__( "Manage Fonts", "create-block-theme" ) ); ?></a>
</p>
</div>
Expand All @@ -466,9 +444,17 @@ function admin_notice_embed_font_success () {

function admin_notice_embed_font_permission_error () {
$theme_name = wp_get_theme()->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' ];
}
?>
<div class="notice notice-error is-dismissible">
<p><?php printf( esc_html__( 'Error adding %1$s font to %2$s theme. WordPress lack permissions to write the font assets.', 'create-block-theme' ), esc_html( $_POST['font-name'] ), esc_html( $theme_name ) ); ?></p>
<p><?php printf( esc_html__( 'Error adding %1$s font to %2$s theme. WordPress lack permissions to write the font assets.', 'create-block-theme' ), esc_html( $font_family ), esc_html( $theme_name ) ); ?></p>
</div>
<?php
}
Expand Down
155 changes: 0 additions & 155 deletions admin/js/google-fonts.js
View file
Open in desktop

This file was deleted.

13 changes: 5 additions & 8 deletions css/google-fonts.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
#google-fonts-table {
display: none;
}

#google-fonts-table.widefat thead td input {
margin: 0;
}

#google-fonts-table tbody tr td:nth-of-type(3) {
width: 100%;
}

#google-fonts-table tbody td {
vertical-align: middle;
}
Expand All @@ -19,6 +11,11 @@
margin: 0;
}

#google-fonts-table .demo-cell {
width: 100%;
font-size: 1.7rem;
}

.google-fonts-page .hint {
display: none;
}
Loading