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 commented Apr 10, 2020

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.