Settings: Use permalink settings design for actor mode (#1472)

* Settings: Use permalink settings design for actor mode

* Add fieldset element for parity

* Add changelog

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: obenland

.github/changelog/1472-from-description

@@ -0,0 +1,4 @@
+Significance: minor
+Type: changed
+
+Improved readability for actor mode setting.

assets/css/activitypub-admin.css

@@ -65,6 +65,20 @@
 	transition: box-shadow .5s ease-in-out;
 }
 
+.activitypub-settings .row {
+	margin-bottom: 16px;
+}
+
+.activitypub-settings .row > div {
+	max-width: calc(100% - 24px);
+	display: inline-flex;
+	flex-direction: column;
+}
+
+.activitypub-settings .row .description {
+	margin-top: 0;
+}
+
 .wp-header-end {
 	visibility: hidden;
 	margin: -2px 0 0;
@@ -179,8 +193,7 @@ input.blog-user-identifier {
 	background-size: cover;
 }
 
-.activitypub-settings
-.logo {
+.activitypub-settings .logo {
 	height: 80px;
 	width: 80px;
 	position: relative;

includes/wp-admin/class-settings-fields.php

@@ -225,46 +225,49 @@ public static function render_notifications_section() {
 	public static function render_actor_mode_field() {
 		$value = get_option( 'activitypub_actor_mode', ACTIVITYPUB_ACTOR_MODE );
 		?>
-		<p>
-			<label>
-				<input type="radio" name="activitypub_actor_mode" value="<?php echo esc_attr( ACTIVITYPUB_ACTOR_MODE ); ?>" <?php checked( ACTIVITYPUB_ACTOR_MODE, $value ); ?> />
-				<strong><?php esc_html_e( 'Author Profiles Only', 'activitypub' ); ?></strong>
-			</label>
-		</p>
-		<p class="description">
-			<?php echo wp_kses( __( 'Every author on this blog (with the <code>activitypub</code> capability) gets their own ActivityPub profile.', 'activitypub' ), array( 'code' => array() ) ); ?>
-			<strong>
-			<?php
-			echo wp_kses(
-				sprintf(
-					// translators: %s is a URL.
-					__( 'You can add/remove the capability in the <a href="%s">user settings.</a>', 'activitypub' ),
-					admin_url( '/users.php' )
-				),
-				array( 'a' => array( 'href' => array() ) )
-			);
-			?>
-			</strong>
-			<?php echo wp_kses( __( 'Select all the users you want to update, choose the method from the drop-down list and click on the "Apply" button.', 'activitypub' ), array( 'code' => array() ) ); ?>
-		</p>
-		<p>
-			<label>
-				<input type="radio" name="activitypub_actor_mode" value="<?php echo esc_attr( ACTIVITYPUB_BLOG_MODE ); ?>" <?php checked( ACTIVITYPUB_BLOG_MODE, $value ); ?> />
-				<strong><?php esc_html_e( 'Blog profile only', 'activitypub' ); ?></strong>
-			</label>
-		</p>
-		<p class="description">
-			<?php esc_html_e( 'Your blog becomes a single ActivityPub profile and every post will be published under this profile instead of the individual author profiles.', 'activitypub' ); ?>
-		</p>
-		<p>
-			<label>
-				<input type="radio" name="activitypub_actor_mode" value="<?php echo esc_attr( ACTIVITYPUB_ACTOR_AND_BLOG_MODE ); ?>" <?php checked( ACTIVITYPUB_ACTOR_AND_BLOG_MODE, $value ); ?> />
-				<strong><?php esc_html_e( 'Both author and blog profiles', 'activitypub' ); ?></strong>
-			</label>
-		</p>
-		<p class="description">
-			<?php esc_html_e( "This combines both modes. Users can be followed individually, while following the blog will show boosts of individual user's posts.", 'activitypub' ); ?>
-		</p>
+			<fieldset class="actor-mode-selection">
+				<div class="row">
+					<input type="radio" id="actor-mode" name="activitypub_actor_mode" value="<?php echo esc_attr( ACTIVITYPUB_ACTOR_MODE ); ?>" <?php checked( ACTIVITYPUB_ACTOR_MODE, $value ); ?> />
+					<div>
+						<label for="actor-mode"><strong><?php esc_html_e( 'Author Profiles Only', 'activitypub' ); ?></strong></label>
+						<p class="description">
+							<?php echo wp_kses( __( 'Every author on this blog (with the <code>activitypub</code> capability) gets their own ActivityPub profile.', 'activitypub' ), array( 'code' => array() ) ); ?>
+							<strong>
+								<?php
+								echo wp_kses(
+									sprintf(
+									// translators: %s is a URL.
+										__( 'You can add/remove the capability in the <a href="%s">user settings.</a>', 'activitypub' ),
+										admin_url( '/users.php' )
+									),
+									array( 'a' => array( 'href' => array() ) )
+								);
+								?>
+							</strong>
+							<?php echo wp_kses( __( 'Select all the users you want to update, choose the method from the drop-down list and click on the "Apply" button.', 'activitypub' ), array( 'code' => array() ) ); ?>
+						</p>
+					</div>
+				</div>
+				<div class="row">
+					<input type="radio" id="blog-mode" name="activitypub_actor_mode" value="<?php echo esc_attr( ACTIVITYPUB_BLOG_MODE ); ?>" <?php checked( ACTIVITYPUB_BLOG_MODE, $value ); ?> />
+					<div>
+						<label for="blog-mode"><strong><?php esc_html_e( 'Blog profile only', 'activitypub' ); ?></strong></label>
+						<p class="description">
+							<?php esc_html_e( 'Your blog becomes a single ActivityPub profile and every post will be published under this profile instead of the individual author profiles.', 'activitypub' ); ?>
+						</p>
+					</div>
+				</div>
+				<div class="row">
+					<input type="radio" id="actor-blog-mode" name="activitypub_actor_mode" value="<?php echo esc_attr( ACTIVITYPUB_ACTOR_AND_BLOG_MODE ); ?>" <?php checked( ACTIVITYPUB_ACTOR_AND_BLOG_MODE, $value ); ?> />
+					<div>
+						<label for="actor-blog-mode"><strong><?php esc_html_e( 'Both author and blog profiles', 'activitypub' ); ?></strong></label>
+						<p class="description">
+							<?php esc_html_e( "This combines both modes. Users can be followed individually, while following the blog will show boosts of individual user's posts.", 'activitypub' ); ?>
+						</p>
+					</div>
+				</div>
+			</fieldset>
+
 		<?php
 	}