Reusable blocks: Add UI for bulk deleting blocks (#9588)

* Reusable blocks: Add UI for bulk deleting blocks

First pass at allowing reusable blocks to be edited via
the edit.php?post_type=wp_block page.

* Add border radius and clarify help text.

gutenberg.php

@@ -257,6 +257,12 @@ function gutenberg_add_edit_link_filters() {
  * @return array Updated post actions.
  */
 function gutenberg_add_edit_link( $actions, $post ) {
+ if ( 'wp_block' === $post->post_type ) {
+ unset( $actions['edit'] );
+ unset( $actions['inline hide-if-no-js'] );
+ return $actions;
+ }
+
  if ( ! gutenberg_can_edit_post( $post ) ) {
  return $actions;
  }
@@ -292,16 +298,43 @@ function gutenberg_add_edit_link( $actions, $post ) {
  return $actions;
 }
 
+/**
+ * Removes the Edit action from the reusable block list's Bulk Actions dropdown.
+ *
+ * @since 3.8.0
+ *
+ * @param array $actions Bulk actions.
+ *
+ * @return array Updated bulk actions.
+ */
+function gutenberg_block_bulk_actions( $actions ) {
+ unset( $actions['edit'] );
+ return $actions;
+}
+add_filter( 'bulk_actions-edit-wp_block', 'gutenberg_block_bulk_actions' );
+
 /**
  * Prints the JavaScript to replace the default "Add New" button.$_COOKIE
  *
  * @since 1.5.0
  */
 function gutenberg_replace_default_add_new_button() {
  global $typenow;
+
+ if ( 'wp_block' === $typenow ) {
+ ?>
+ <style type="text/css">
+ .page-title-action {
+ display: none;
+ }
+ </style>
+ <?php
+ }
+
  if ( ! gutenberg_can_edit_post_type( $typenow ) ) {
  return;
  }
+
  ?>
  <style type="text/css">
  .split-page-title-action {

lib/register.php

@@ -462,10 +462,13 @@ function gutenberg_register_post_types() {
  'wp_block',
  array(
  'labels' => array(
- 'name' => 'Blocks',
- 'singular_name' => 'Block',
+ 'name' => __( 'Blocks', 'gutenberg' ),
+ 'singular_name' => __( 'Block', 'gutenberg' ),
+ 'search_items' => __( 'Search Blocks', 'gutenberg' ),
  ),
  'public' => false,
+ 'show_ui' => true,
+ 'show_in_menu' => false,
  'rewrite' => false,
  'show_in_rest' => true,
  'rest_base' => 'blocks',
@@ -476,6 +479,7 @@ function gutenberg_register_post_types() {
  'create_posts' => 'create_blocks',
  ),
  'map_meta_cap' => true,
+ 'supports' => false,
  )
  );
 

packages/components/src/icon-button/style.scss

@@ -9,13 +9,14 @@
  position: relative;
  overflow: hidden;
  text-indent: 4px;
+ border-radius: $radius-round-rectangle;
 
  .dashicon {
  display: inline-block;
  flex: 0 0 auto;
  }
 
- // Ensure that even SVG icons that don't include the .dashicon class are colored
+ // Ensure that even SVG icons that don't include the .dashicon class are colored.
  svg {
  fill: currentColor;
  outline: none;
@@ -33,5 +34,4 @@
  &:disabled:focus {
  box-shadow: none;
  }
-
 }

packages/editor/src/components/inserter/menu.js

@@ -22,10 +22,7 @@ import scrollIntoView from 'dom-scroll-into-view';
  */
 import { __ } from '@wordpress/i18n';
 import { Component, findDOMNode, createRef } from '@wordpress/element';
-import {
- withSpokenMessages,
- PanelBody,
-} from '@wordpress/components';
+import { withSpokenMessages, PanelBody, IconButton } from '@wordpress/components';
 import { getCategories, isReusableBlock } from '@wordpress/blocks';
 import { withDispatch, withSelect } from '@wordpress/data';
 import { withInstanceId, compose, withSafeTimeout } from '@wordpress/compose';
@@ -281,13 +278,20 @@ export class InserterMenu extends Component {
 
  { !! reusableItems.length && (
  <PanelBody
+ className="editor-inserter__reusable-blocks-panel"
  title={ __( 'Reusable' ) }
  opened={ isPanelOpen( 'reusable' ) }
  onToggle={ this.onTogglePanel( 'reusable' ) }
  icon="controls-repeat"
  ref={ this.bindPanel( 'reusable' ) }
  >
  <BlockTypesList items={ reusableItems } onSelect={ onSelect } onHover={ this.onHover } />
+ <IconButton
+ className="editor-inserter__manage-reusable-blocks"
+ icon="admin-generic"
+ label={ __( 'Manage All Reusable Blocks' ) }
+ href="edit.php?post_type=wp_block"
+ />
  </PanelBody>
  ) }
  { isEmpty( suggestedItems ) && isEmpty( reusableItems ) && isEmpty( itemsPerCategory ) && (

packages/editor/src/components/inserter/style.scss

@@ -108,6 +108,16 @@ $block-inserter-search-height: 38px;
  margin: 0 -8px;
 }
 
+.editor-inserter__reusable-blocks-panel {
+ position: relative;
+
+ .editor-inserter__manage-reusable-blocks {
+ bottom: 5px;
+ position: absolute;
+ right: 0;
+ }
+}
+
 .editor-inserter__no-results {
  font-style: italic;
  padding: 24px;