Change activation toggle to native WP UI (#327)

* remove activation toggle, use quick action links instead with a simple blue line for active rows * simplified deactivation links to have 'lazyblocks_activate_block' or 'lazyblocks_deactivate_block' get * build * display Inactive post state only when status if draft * changed active block row border color * simplified code that shows block status * Update class-blocks.php --------- Co-authored-by: Fellan-91 <[email protected]>
nk-crew · Nov 21, 2024 · e78cd33 · e78cd33
1 parent 47bfbbf
commit e78cd33
Show file tree

Hide file tree

Showing 5 changed files with 55 additions and 74 deletions.
diff --git a/assets/admin/index.scss b/assets/admin/index.scss
@@ -30,10 +30,6 @@
 			width: 200px;
 		}
 
-		tbody .check-column input {
-			margin-top: 9px !important;
-		}
-
 		@media screen and (max-width: 782px) {
 			/* Hide column on mobile device */
 			th.column-lazyblocks_post_icon {
@@ -59,52 +55,16 @@
 		}
 	}
 
-	/**
-	* Toggle switch.
-	*/
-	$toggle_width: 28px;
-	$toggle_circle_size: 13px;
-	$toggle_margin: 2px;
-
-	.column-lazyblocks_post_activate {
-		width: 35px;
+	.lazyblocks-activate-block {
+		color: #139a35;
 	}
-
-	.lazyblocks-block-activation-switch {
-		position: relative;
-		display: block;
-		background-color: #d9d9d9;
-		border-radius: 17px;
-		height: 17px;
-		margin-top: 12.5px;
-		width: $toggle_width;
-	}
-
-	.lazyblocks-block-activation-switch::before {
-		background-color: #fff;
-		border-radius: 50%;
-		content: "";
-		display: inline-block;
-		height: $toggle_circle_size;
-		margin: $toggle_margin;
-		transition: transform 0.2s;
-		width: $toggle_circle_size;
-	}
-
-	.lazyblocks-active-block {
-		background-color: #007cba;
-	}
-
-	.lazyblocks-active-block.lazyblocks-block-activation-switch::before {
-		transform: translateX($toggle_width - $toggle_circle_size - $toggle_margin * 2);
-	}
-
-	.lazyblocks-active-block.lazyblocks-block-activation-switch:hover::before {
-		transform: translateX($toggle_width - $toggle_circle_size - $toggle_margin * 2 - 1px);
+	.lazyblocks-deactivate-block {
+		color: #c17d39;
 	}
 
-	.lazyblocks-block-activation-switch:hover::before {
-		transform: translateX(1px);
+	.lazyblocks-row-active th.check-column {
+		border-left: 1px solid #007cba;
+		box-shadow: -1px 0 0 #007cba;
 	}
 }
 

diff --git a/build/admin-style-rtl.css b/build/admin-style-rtl.css
diff --git a/build/admin-style.css b/build/admin-style.css
diff --git a/classes/class-blocks.php b/classes/class-blocks.php
@@ -62,7 +62,9 @@ public function __construct() {
 		add_action( 'admin_init', array( $this, 'add_role_caps' ) );
 
 		// Additional elements in blocks list table.
+		add_filter( 'display_post_states', array( $this, 'display_post_states' ), 10, 2 );
 		add_filter( 'disable_months_dropdown', array( $this, 'disable_months_dropdown' ), 10, 2 );
+		add_filter( 'post_class', array( $this, 'post_class' ), 10, 3 );
 		add_filter( 'post_row_actions', array( $this, 'post_row_actions' ), 10, 2 );
 		add_filter( 'manage_lazyblocks_posts_columns', array( $this, 'manage_posts_columns' ) );
 		add_filter( 'manage_lazyblocks_posts_custom_column', array( $this, 'manage_posts_custom_column' ), 10, 2 );
@@ -78,7 +80,6 @@ public function __construct() {
 		add_action( 'save_post', array( $this, 'normalize_lazyblocks_post_status' ), 20, 2 );
 
 		// Disabled the display of statuses in the list of blocks and replaced the Draft title in the submenu to Inactive.
-		add_action( 'display_post_states', array( $this, 'disable_post_states' ), 20, 2 );
 		add_filter( 'views_edit-lazyblocks', array( $this, 'change_activation_views_labels' ) );
 
 		// add gutenberg blocks assets.
@@ -94,15 +95,19 @@ public function __construct() {
 	}
 
 	/**
-	 * Disabled display of post statuses in the list of all blocks.
+	 * Display inactive state and disable other post statuses in the list of all blocks.
 	 *
 	 * @param array   $post_states - Block States.
 	 * @param WP_Post $post - Post Object with all post parameters.
 	 * @return array
 	 */
-	public function disable_post_states( $post_states, $post ) {
+	public function display_post_states( $post_states, $post ) {
 		if ( 'lazyblocks' === $post->post_type ) {
 			$post_states = array();
+
+			if ( 'draft' === $post->post_status ) {
+				$post_states['lazyblocks-inactive'] = __( 'Inactive', 'lazy-blocks' );
+			}
 		}
 
 		return $post_states;
@@ -285,6 +290,26 @@ public function disable_months_dropdown( $return, $post_type ) {
 		return 'lazyblocks' === $post_type ? true : $return;
 	}
 
+	/**
+	 * Add active/inactive class to row
+	 *
+	 * @param array $classes Array of post classes.
+	 * @param array $class Additional classes added to the post.
+	 * @param int   $post_id The post ID.
+	 * @return array
+	 */
+	public function post_class( $classes, $class, $post_id ) {
+		if ( ! is_admin() ) {
+			return $classes;
+		}
+
+		if ( get_post_type( $post_id ) === 'lazyblocks' ) {
+			$classes[] = get_post_status( $post_id ) === 'publish' ? 'lazyblocks-row-active' : 'lazyblocks-row-inactive';
+		}
+
+		return $classes;
+	}
+
 	/**
 	 * Add featured image in lazyblocks list
 	 *
@@ -336,6 +361,22 @@ public function post_row_actions( $actions = array(), $post = null ) {
 					),
 					esc_html__( 'Export', 'lazy-blocks' )
 				),
+				'activate' => sprintf(
+					'<a href="%1$s" aria-label="%2$s" class="%3$s">%4$s</a>',
+					add_query_arg(
+						array(
+							( 'publish' === $post->post_status ? 'lazyblocks_deactivate_block' : 'lazyblocks_activate_block' ) => $post->ID,
+							'lazyblocks_activate_block_nonce' => wp_create_nonce( 'lzb-activate-block-nonce' ),
+						)
+					),
+					sprintf(
+						// translators: %1$ - post title.
+						'publish' === $post->post_status ? esc_html__( 'Deactivate “%1$s”', 'lazy-blocks' ) : esc_html__( 'Activate “%1$s”', 'lazy-blocks' ),
+						get_the_title( $post->ID )
+					),
+					'publish' === $post->post_status ? 'lazyblocks-deactivate-block' : 'lazyblocks-activate-block',
+					'publish' === $post->post_status ? esc_html__( 'Deactivate', 'lazy-blocks' ) : esc_html__( 'Activate', 'lazy-blocks' )
+				),
 			),
 			array_slice( $actions, 1 )
 		);
@@ -397,7 +438,6 @@ public function handle_bulk_actions_edit( $redirect, $action, $post_ids ) {
 	public function manage_posts_columns( $columns = array() ) {
 		$columns = array(
 			'cb'                          => $columns['cb'],
-			'lazyblocks_post_activate'    => '',
 			'lazyblocks_post_icon'        => esc_html__( 'Icon', 'lazy-blocks' ),
 			'title'                       => $columns['title'],
 			'lazyblocks_post_category'    => esc_html__( 'Category', 'lazy-blocks' ),
@@ -415,25 +455,6 @@ public function manage_posts_columns( $columns = array() ) {
 	public function manage_posts_custom_column( $column_name = false ) {
 		global $post;
 
-		// Displaying buttons for block activation and deactivation.
-		if ( 'lazyblocks_post_activate' === $column_name ) {
-			$classes = 'lazyblocks-block-activation-switch';
-
-			if ( 'publish' === $post->post_status ) {
-				$classes .= ' lazyblocks-active-block';
-			}
-
-			$link = add_query_arg(
-				array(
-					'lazyblocks_activate_block'        => $post->ID,
-					'lazyblocks_activate_block_action' => 'publish' === $post->post_status ? 'deactivate' : 'activate',
-					'lazyblocks_activate_block_nonce'  => wp_create_nonce( 'lzb-activate-block-nonce' ),
-				)
-			);
-
-			echo '<a class="' . esc_attr( $classes ) . '" href="' . esc_url( $link ) . '">&nbsp;</a>';
-		}
-
 		if ( 'lazyblocks_post_icon' === $column_name ) {
 			$icon      = $this->prepare_block_icon( $this->get_meta_value_by_id( 'lazyblocks_icon' ) );
 			$admin_url = get_edit_post_link( $post->ID );

diff --git a/classes/class-tools.php b/classes/class-tools.php
@@ -343,8 +343,8 @@ public function maybe_activate_block() {
 			return;
 		}
 
-		$post_id = filter_input( INPUT_GET, 'lazyblocks_activate_block', FILTER_SANITIZE_NUMBER_INT );
-		$action  = isset( $_GET['lazyblocks_activate_block_action'] ) ? sanitize_text_field( wp_unslash( $_GET['lazyblocks_activate_block_action'] ) ) : false;
+		$action  = isset( $_GET['lazyblocks_activate_block'] ) ? 'activate' : ( isset( $_GET['lazyblocks_deactivate_block'] ) ? 'deactivate' : false );
+		$post_id = filter_input( INPUT_GET, 'activate' === $action ? 'lazyblocks_activate_block' : 'lazyblocks_deactivate_block', FILTER_SANITIZE_NUMBER_INT );
 
 		if ( $post_id && $action && current_user_can( 'edit_lazyblock', $post_id ) ) {
 			if ( 'activate' === $action ) {