This commit is contained in:
rodolfomartinez 2026-02-02 00:13:36 -05:00
parent 572552ff13
commit 847ed92c23
10 changed files with 1232 additions and 591 deletions

View file

@ -16,23 +16,6 @@ if (!defined('ABSPATH')) {
*/
class MLF_Admin_Page {
/**
* Available font weights.
*
* @var array
*/
private $weights = [
100 => 'Thin',
200 => 'Extra Light',
300 => 'Light',
400 => 'Regular',
500 => 'Medium',
600 => 'Semi Bold',
700 => 'Bold',
800 => 'Extra Bold',
900 => 'Black',
];
/**
* Constructor.
*/
@ -53,7 +36,8 @@ class MLF_Admin_Page {
$installed_fonts = $registry->get_imported_fonts();
?>
<div class="wrap mlf-wrap">
<h1><?php esc_html_e('Maple Local Fonts', 'maple-local-fonts'); ?></h1>
<h1><?php esc_html_e('Maple Fonts', 'maple-local-fonts'); ?></h1>
<p class="mlf-description"><?php esc_html_e('Import Google Fonts to your local server for privacy-friendly, GDPR-compliant typography.', 'maple-local-fonts'); ?></p>
<div class="mlf-container">
<!-- Import Section -->
@ -61,73 +45,62 @@ class MLF_Admin_Page {
<h2><?php esc_html_e('Import from Google Fonts', 'maple-local-fonts'); ?></h2>
<form id="mlf-import-form" class="mlf-form">
<!-- Search Input -->
<div class="mlf-form-row">
<label for="mlf-font-name"><?php esc_html_e('Font Name', 'maple-local-fonts'); ?></label>
<input type="text" id="mlf-font-name" name="font_name" placeholder="<?php esc_attr_e('e.g., Open Sans', 'maple-local-fonts'); ?>" required />
<p class="description"><?php esc_html_e('Enter the exact font name as it appears on Google Fonts.', 'maple-local-fonts'); ?></p>
</div>
<div class="mlf-form-row">
<label><?php esc_html_e('Weights', 'maple-local-fonts'); ?></label>
<div class="mlf-checkbox-grid">
<?php foreach ($this->weights as $weight => $label) : ?>
<label class="mlf-checkbox-label">
<input type="checkbox" name="weights[]" value="<?php echo esc_attr($weight); ?>" <?php checked(in_array($weight, [400, 700], true)); ?> />
<span><?php echo esc_html($weight); ?> (<?php echo esc_html($label); ?>)</span>
</label>
<?php endforeach; ?>
<label for="mlf-font-search"><?php esc_html_e('Search Fonts', 'maple-local-fonts'); ?></label>
<div class="mlf-search-wrapper">
<span class="dashicons dashicons-search mlf-search-icon"></span>
<input type="text"
id="mlf-font-search"
class="mlf-search-input"
placeholder="<?php esc_attr_e('Search Google Fonts...', 'maple-local-fonts'); ?>"
autocomplete="off" />
<span class="spinner mlf-search-spinner" id="mlf-search-spinner"></span>
</div>
<p class="description"><?php esc_html_e('Type at least 2 characters to search.', 'maple-local-fonts'); ?></p>
</div>
<div class="mlf-form-row">
<label><?php esc_html_e('Styles', 'maple-local-fonts'); ?></label>
<div class="mlf-checkbox-grid mlf-checkbox-grid-small">
<label class="mlf-checkbox-label">
<input type="checkbox" name="styles[]" value="normal" checked />
<span><?php esc_html_e('Normal', 'maple-local-fonts'); ?></span>
</label>
<label class="mlf-checkbox-label">
<input type="checkbox" name="styles[]" value="italic" />
<span><?php esc_html_e('Italic', 'maple-local-fonts'); ?></span>
<!-- Search Results -->
<div class="mlf-search-results" id="mlf-search-results" style="display: none;">
<div class="mlf-results-list" id="mlf-results-list"></div>
</div>
<!-- Selected Font (hidden until a font is selected) -->
<div class="mlf-selected-font" id="mlf-selected-font" style="display: none;">
<div class="mlf-selected-font-header">
<span class="mlf-selected-label"><?php esc_html_e('Selected Font:', 'maple-local-fonts'); ?></span>
<span class="mlf-selected-name" id="mlf-selected-name"></span>
<button type="button" class="mlf-change-font" id="mlf-change-font">
<?php esc_html_e('Change', 'maple-local-fonts'); ?>
</button>
</div>
<!-- Hidden input for font name -->
<input type="hidden" id="mlf-font-name" name="font_name" value="" />
<div class="mlf-form-row mlf-italic-row">
<label class="mlf-checkbox-label mlf-italic-toggle">
<input type="checkbox" name="include_italic" id="mlf-include-italic" value="1" checked />
<span><?php esc_html_e('Include Italic styles', 'maple-local-fonts'); ?></span>
</label>
<p class="description"><?php esc_html_e('Italic styles are useful for emphasized text. Uncheck to reduce download size.', 'maple-local-fonts'); ?></p>
</div>
</div>
<div class="mlf-form-row mlf-form-row-info">
<span class="mlf-file-count">
<?php esc_html_e('Files to download:', 'maple-local-fonts'); ?>
<strong id="mlf-file-count">2</strong>
</span>
</div>
<!-- Font Preview Section -->
<div class="mlf-form-row mlf-preview-section" id="mlf-preview-section" style="display: none;">
<label><?php esc_html_e('Preview', 'maple-local-fonts'); ?></label>
<div class="mlf-preview-box" id="mlf-preview-box">
<div class="mlf-preview-text" id="mlf-preview-text">
<span class="mlf-preview-sample mlf-preview-heading"><?php esc_html_e('The quick brown fox jumps over the lazy dog', 'maple-local-fonts'); ?></span>
<span class="mlf-preview-sample mlf-preview-paragraph"><?php esc_html_e('ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 0123456789', 'maple-local-fonts'); ?></span>
</div>
<div class="mlf-preview-loading" id="mlf-preview-loading" style="display: none;">
<span class="spinner is-active"></span>
<span><?php esc_html_e('Loading preview...', 'maple-local-fonts'); ?></span>
</div>
<div class="mlf-preview-error" id="mlf-preview-error" style="display: none;">
<?php esc_html_e('Could not load font preview. The font may not exist on Google Fonts.', 'maple-local-fonts'); ?>
</div>
<div class="mlf-form-row mlf-form-row-submit">
<button type="submit" class="button button-primary" id="mlf-download-btn">
<?php esc_html_e('Download & Install', 'maple-local-fonts'); ?>
</button>
<span class="spinner" id="mlf-spinner"></span>
</div>
<p class="description"><?php esc_html_e('Preview is loaded directly from Google Fonts. After installation, the font will be served locally.', 'maple-local-fonts'); ?></p>
</div>
<div class="mlf-form-row mlf-form-row-submit">
<button type="submit" class="button button-primary" id="mlf-download-btn">
<?php esc_html_e('Download & Install', 'maple-local-fonts'); ?>
</button>
<span class="spinner" id="mlf-spinner"></span>
</div>
<div id="mlf-message" class="mlf-message" style="display: none;"></div>
</form>
<div class="mlf-info-note">
<span class="dashicons dashicons-info-outline"></span>
<span><?php esc_html_e('All font weights (100-900) will be downloaded automatically. Variable fonts are used when available for better performance.', 'maple-local-fonts'); ?></span>
</div>
</div>
<!-- Installed Fonts Section -->
@ -135,7 +108,7 @@ class MLF_Admin_Page {
<h2><?php esc_html_e('Installed Fonts', 'maple-local-fonts'); ?></h2>
<?php if (empty($installed_fonts)) : ?>
<p class="mlf-no-fonts"><?php esc_html_e('No fonts installed yet.', 'maple-local-fonts'); ?></p>
<p class="mlf-no-fonts"><?php esc_html_e('No fonts installed yet. Search and select a font above to get started.', 'maple-local-fonts'); ?></p>
<?php else : ?>
<div id="mlf-font-list" class="mlf-font-list">
<?php foreach ($installed_fonts as $font) : ?>
@ -167,20 +140,23 @@ class MLF_Admin_Page {
<div class="mlf-section mlf-info-section">
<?php if (wp_is_block_theme()) : ?>
<div class="mlf-info-box">
<span class="dashicons dashicons-info"></span>
<p>
<?php
printf(
/* translators: %s: link to WordPress Editor */
esc_html__('Use %s to apply fonts to your site.', 'maple-local-fonts'),
'<a href="' . esc_url(admin_url('site-editor.php?path=%2Fwp_global_styles')) . '">' . esc_html__('Appearance → Editor → Styles → Typography', 'maple-local-fonts') . '</a>'
);
?>
</p>
<span class="dashicons dashicons-editor-textcolor"></span>
<div>
<p><strong><?php esc_html_e('How to use your fonts', 'maple-local-fonts'); ?></strong></p>
<p>
<?php
printf(
/* translators: %s: link to WordPress Editor */
esc_html__('Go to %s to apply fonts to your site.', 'maple-local-fonts'),
'<a href="' . esc_url(admin_url('site-editor.php?path=%2Fwp_global_styles')) . '">' . esc_html__('Appearance → Editor → Styles → Typography', 'maple-local-fonts') . '</a>'
);
?>
</p>
</div>
</div>
<?php else : ?>
<div class="mlf-info-box mlf-info-box-classic">
<span class="dashicons dashicons-info"></span>
<span class="dashicons dashicons-editor-textcolor"></span>
<div class="mlf-classic-theme-info">
<p><strong><?php esc_html_e('Classic Theme Detected', 'maple-local-fonts'); ?></strong></p>
<p><?php esc_html_e('Your theme does not support the Full Site Editor. To use imported fonts, add custom CSS to your theme:', 'maple-local-fonts'); ?></p>