Add blog icon setting

includes/admin/settings.php

@@ -12,11 +12,19 @@ function register_settings_sections() {
         'description' => __( "The site's description in the Fediverse", 'pterotype' ),
         'show_in_rest' => true,
     ) );
+    \register_setting( 'pterotype_settings', 'pterotype_blog_icon', array(
+        'type' => 'string',
+        'description' => __( "The URL of the site's icon in the Fediverse", 'pterotype' ),
+        'show_in_rest' => true,
+    ) );
     \add_settings_section(
         'pterotype_identity',
-        'Fediverse Identity',
+        __( 'Fediverse Identity', 'pterotype' ),
         function() {
-        ?><p>These settings determine how your blog will look in other Fediverse apps</p><?php
+            echo '<p>' . __(
+                'These settings determine how your blog will look in other Fediverse apps',
+                'pterotype'
+            ) . '</p>';
         },
         'pterotype'
     );
@@ -25,9 +33,8 @@ function register_settings_sections() {
 function register_settings_fields() {
     \add_settings_field(
         'pterotype_blog_name',
-        'Site Name',
+        __( 'Site Name', 'pterotype' ),
         function() {
-            // TODO fill this with the existing option or the site default if not set
             ?>
             <input type="text"
                    name="pterotype_blog_name"
@@ -39,7 +46,7 @@ function register_settings_fields() {
     );
     \add_settings_field(
         'pterotype_blog_description',
-        'Site Description',
+        __( 'Site Description', 'pterotype' ),
         function() {
             \wp_editor( get_blog_description_value(), 'pterotype_blog_description', array(
                 'teeny' => true,
@@ -52,6 +59,36 @@ function register_settings_fields() {
         'pterotype',
         'pterotype_identity'
     );
+    \add_settings_field(
+        'pterotype_blog_icon',
+        __( 'Site Icon', 'pterotype' ),
+        function() {
+            \wp_enqueue_media();
+            \wp_enqueue_script(
+                'pterotype_media_script',
+                \plugin_dir_url( __FILE__ ) . '../../js/icon-upload.js'
+            );
+            ?>
+            <div class="image-preview-wrapper">
+                <img id="pterotype_blog_icon_image"
+                     src="<?php echo get_blog_icon_value(); ?>"
+                     width="100px"
+                     height="100px"
+                     style="width: 100px; max-height: 100px;">
+            </div>
+            <input type="hidden"
+                   name="pterotype_blog_icon"
+                   id="pterotype_blog_icon"
+                   value="<?php echo get_blog_icon_value(); ?>">
+            <input id="pterotype_blog_icon_button"
+                   type="button"
+                   class="button"
+                   value="<?php _e( 'Choose icon', 'pterotype' ) ?>">
+           <?php
+        },
+        'pterotype',
+        'pterotype_identity'
+    );
 }
 
 function get_blog_name_value() {
@@ -69,4 +106,15 @@ function get_blog_description_value() {
     }
     return \get_bloginfo( 'description' );
 }
+
+function get_blog_icon_value() {
+    $icon = \get_option( 'pterotype_blog_icon' );
+    if ( $icon && ! empty( $icon ) ) {
+        return $icon;
+    }
+    if ( \has_custom_logo() ) {
+        return \wp_get_attachment_image_src( \get_theme_mod( 'custom_logo' ) )[0];
+    }
+    return null;
+}
 ?>

includes/init.php

@@ -89,6 +89,10 @@ add_action( 'update_option_pterotype_blog_description', function() {
     \pterotype\identity\update_identity( PTEROTYPE_BLOG_ACTOR_SLUG );
 } );
 
+add_action( 'update_option_pterotype_blog_icon', function() {
+    \pterotype\identity\update_identity( PTEROTYPE_BLOG_ACTOR_SLUG );
+} );
+
 add_action( 'admin_menu', function() {
     \pterotype\admin\register_admin_page();
     \pterotype\settings\register_settings_sections();

includes/server/actors.php

@@ -169,10 +169,9 @@ function get_blog_actor() {
             'publicKeyPem' => \pterotype\pgp\get_public_key( $actor_id ),
         ),
     );
-    if ( has_custom_logo() ) {
-        $actor['icon'] = make_icon_array(
-            wp_get_attachment_image_src( get_theme_mod( 'custom_logo' ) )[0]
-        );
+    $icon = \pterotype\settings\get_blog_icon_value();
+    if ( $icon && ! empty( $icon ) ) {
+        $actor['icon'] = make_icon_array( $icon );
     }
     return $actor;
 }

js/icon-upload.js

@@ -0,0 +1,28 @@
+jQuery(document).ready(function($) {
+    var frame;
+
+    $('#pterotype_blog_icon_button').on('click', function(event) {
+	event.preventDefault();
+
+	if (frame) {
+	    frame.open();
+	    return;
+	}
+
+	frame = wp.media({
+	    title: 'Select an image',
+	    button: {
+		text: 'Use this image'
+	    },
+	    multiple: false
+	});
+
+	frame.on('select', function() {
+	    var attachment = frame.state().get('selection').first().toJSON();
+	    $('#pterotype_blog_icon_image').attr('src', attachment.url);
+	    $('#pterotype_blog_icon').attr('value', attachment.url);
+	});
+
+	frame.open();
+    });
+});