Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
<?php
/**
* PWA Manifest Short Name plugin initialization file.
*
* @package PWA_Manifest_Short_Name
* @author Weston Ruter, Google
* @license GPL-2.0-or-later
* @copyright 2019 Google Inc.
*
* @wordpress-plugin
* Plugin Name: PWA Manifest Short Name
* Plugin URI: https://gist.github.com/westonruter/dec7d190060732e29a09751ab99cc549
* Description: Add a UI for specifying the <code>short_name</code> that will be added to the Web App Manifest as served by the <a href="https://wordpress.org/plugins/pwa/">PWA plugin</a>. This may be merged into the PWA plugin via <a href="https://github.com/GoogleChromeLabs/pwa-wp/issues/210">pwa-wp#210</a>.
* Version: 0.1
* Author: Weston Ruter, Google
* Author URI: https://weston.ruter.net/
* License: GNU General Public License v2 (or later)
* License URI: http://www.gnu.org/licenses/gpl-2.0.html
* Gist Plugin URI: https://gist.github.com/westonruter/dec7d190060732e29a09751ab99cc549
*/
namespace PWA_Manifest_Short_Name;
const SETTING_ID = 'short_name';
const OPTION_GROUP = 'general';
const MAX_LENGTH = 12;
add_action(
'plugins_loaded',
function () {
if ( ! class_exists( 'WP_Web_App_Manifest' ) ) {
return;
}
add_action( 'admin_init', __NAMESPACE__ . '\admin_init' );
add_filter( 'web_app_manifest', __NAMESPACE__ . '\filter_web_app_manifest' );
}
);
/**
* Filter web app manifest to add short_name.
*
* @param array $data Data.
* @return array Data.
*/
function filter_web_app_manifest( $data ) {
$short_name = get_option( SETTING_ID );
if ( $short_name ) {
$data['short_name'] = $short_name;
}
return $data;
}
/**
* Init.
*/
function admin_init() {
register_settings();
add_setting_field();
}
/**
* Register setting.
*/
function register_settings() {
\register_setting(
OPTION_GROUP,
SETTING_ID,
[
'type' => 'boolean',
'sanitize_callback' => function ( $value ) {
$value = sanitize_text_field( $value );
return substr( $value, 0, MAX_LENGTH );
},
]
);
}
/**
* Add setting field.
*/
function add_setting_field() {
\add_settings_field(
SETTING_ID,
__( 'Short Name', 'pwa' ),
__NAMESPACE__ . '\render_setting',
OPTION_GROUP
);
}
/**
* Renders the setting.
*/
function render_setting() {
$short_name = get_option( SETTING_ID );
?>
<table id="short_name_table" hidden>
<tr>
<th scope="row">
<label for="<?php echo esc_attr( SETTING_ID ); ?>">
<?php esc_html_e( 'Short Name', 'pwa' ); ?>
</label>
</th>
<td>
<input type="text" id="<?php echo esc_attr( SETTING_ID ); ?>" name="<?php echo esc_attr( SETTING_ID ); ?>" value="<?php echo esc_attr( $short_name ); ?>" class="regular-text" maxlength="<?php echo esc_attr( MAX_LENGTH ); ?>">
<p class="description">
<?php
echo wp_kses_post(
sprintf(
/* translators: %1$s is `short_name`, %2$d is the max length as a number */
__( 'The %1$s is a short version of your website&#8217;s name. It is displayed when there is not enough space for the full name, for example with the site icon on a phone&#8217;s homescreen. It should be a maximum of %2$d characters long.', 'pwa' ),
'<code>short_name</code>',
MAX_LENGTH
)
);
?>
</p>
</td>
</tr>
</table>
<script>
( ( table ) => {
const blogNameField = document.getElementById( 'blogname' );
if ( ! blogNameField ) {
return;
}
const blogNameRow = blogNameField.closest( 'tr' );
blogNameRow.parentNode.insertBefore( table.querySelector( 'tr' ), blogNameRow.nextSibling );
table.parentNode.removeChild( table );
} )( document.getElementById( 'short_name_table' ) );
</script>
<?php
}
@westonruter

This comment has been minimized.

Copy link
Owner Author

@westonruter westonruter commented Apr 10, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment