WordPress Gutenberg plugin to display the attributes for the currently selected block in the Document sidebar.

Overview

Block X-ray Attributes

Stable Tag: 1.2.0
Requires at least: 5.5
Tested up to: 5.9
Requires PHP: 7.2
License: GPL v2 or later
Tags: block attributes, gutenberg, editor, block, developer, attributes
Contributors: salcode

Description

This plugin adds a section called "Block X-ray" to the Document sidebar in the editor. This "Block X-ray" section displays the attributes for the currently selected block.

Screenshots

  1. The Block X-ray section in the document sidebar
    The Block X-ray section in the document sidebar

Frequently Asked Questions

Where is this plugin developed?

Development of this code happens at github.com/salcode/block-xray-attributes

Why Don't I See an Update from 1.1.0

When the initial version (1.1.0) was uploaded to the WordPress.org plugin repository, the Update URI plugin header was accidentally included. This plugin header prevents downloading updates from the WordPress.org API.

The Update URI header is very useful when your plugin is NOT hosted on the WordPress.org repository. However, now that the plugin is hosted on the WordPress.org repository, the Update URI plugin header should not be included.

If you are stuck on version 1.1.0 and want the latest version, you should Delete this plugin and reinstall it.

Once you move beyond version 1.1.0, you should no longer experience this problem.

Changelog

1.2.0

1.1.1

  • Remove "Update URI" from plugin headers

1.1.0

  • Change "Requires at least" to 5.5
  • Rename SelectedBlockAttributes component to BlockXray
  • Add Higher Order Component WithSelectedBlock

1.0.0

  • Initial release
Comments
  • Add button to copy data

    Add button to copy data

    This feedback seems like a good idea.

    One missing feature that I would like to see is a copy button. For nested blocks, the output can be lengthy to copy with a mouse, and having a quick way to grab and paste it in my code editor would save some effort on my part.

    from WPTavern's Look Under the Hood With the Block X-Ray WordPress Plugin

    opened by salcode 4
  • Move display to

    Move display to "Block" panel?

    Based on this feedback, perhaps we should move the location of the output?

    When I first installed the plugin, I expected the tab to be under the “Block” panel. Since the attributes are specific to the block, it made sense that it would be there. It is instead under the “Post” or “Page” panel, depending on what type of content you are editing.

    from WPTavern's Look Under the Hood With the Block X-Ray WordPress Plugin

    enhancement wontfix 
    opened by salcode 1
  • Refactor to decouple components

    Refactor to decouple components

    Based on this Twitter thread with @csalzano I've been thinking about how we could refactor these components so each component is more agnostic to the components it interacts with.

    opened by salcode 1
  • Add this plugin to the wordpress.org repository

    Add this plugin to the wordpress.org repository

    Is it worth adding this plugin to the wordpress.org repository?

    If we do decide to do this, we can add the necessary information to README.md (we don't need to add readme.txt) (see Using readme.md for a plugin on WordPress.org)

    enhancement 
    opened by salcode 1
  • Add WP styling class to Copy button

    Add WP styling class to Copy button

    In #22 we added a Copy Block Data button.

    Currently

    Currently, the button has no classes defined and renders without any styling.

    image

    If we add the classes components-button is-secondary (or components-button is-primary), the button will be styled more inline with the WordPress theme.

    With is-secondary

    image

    With is-primary

    image

    opened by salcode 0
  • Remove

    Remove "Update URI" from plugin headers

    The presence of the "Update URI" header in the main plugin file prevents updating the plugin from the wordpress.org plugin repository.

    We are removing this line so the updates work properly.

    Resolves #18

    opened by salcode 0
  • Remove

    Remove "Update URI" from plugin headers

    Remove Update URI from plugin headers.

    By having this header, we prevent receiving updates from the wordpress.org plugin repository - this is not what we want now that the plugin is hosted there.

    https://github.com/salcode/block-xray-attributes/blob/c2e5110642f45564c5dfd45c45b0a34a2ff10034/block-xray-attributes.php#L13

    bug 
    opened by salcode 0
  • Refactor components to decouple them

    Refactor components to decouple them

    The biggest change in this PR is moving the data lookup into a Higher Order Component (WithSelectedBlock), the rest of the changes are renaming and reorganizing based on this change.

    Resolves #11

    opened by salcode 0
  • Add HOC for selected block

    Add HOC for selected block

    Currently, the SelectedBlockAttributes component uses useSelect and displays the contents.

    We could move the useSelect into a separate Higher Order Component called something like WithSelectedBlock.

    opened by salcode 0
  • Update for wordpress.org repository

    Update for wordpress.org repository

    • [x] Update README.md as per https://developer.wordpress.org/plugins/wordpress-org/how-your-readme-txt-works/
    • [x] Move screenshot into the repo
    • [x] Move changelog into README.md

    Resolves #7

    opened by salcode 0
  • On button click store attributes into global JS variable

    On button click store attributes into global JS variable

    Along with displaying the attributes in the browser console on click (see #5), the click could set the attributes to a global variable.

    Similar to this built in browser functionality, which assigns the value to temp1

    image

    enhancement 
    opened by salcode 0
  • Add button to console.log() attributes

    Add button to console.log() attributes

    Sometimes it is helpful to have the attributes available in the console for expanding and collapsing sections.

    Perhaps, we want to add a button that sends the attributes to and browser console?

    enhancement 
    opened by salcode 0
  • Add option to display large window with block attributes

    Add option to display large window with block attributes

    opened by salcode 0
Releases(1.2.0)
Owner
Sal Ferrarello
Developer at @WebDevStudios
Sal Ferrarello
Storybook Addon Root Attributes to switch html, body or some element attributes (multiple) at runtime for you story

Storybook Addon Root Attributes What is this This project was inspired by le0pard/storybook-addon-root-attribute The existing library received only on

정현수 5 Sep 6, 2022
Deploy WordPress plugin and theme to the wordpress.org plugin directory.

wp-deployer Deploy WordPress plugin and theme to the wordpress.org plugin directory. Install npm install --save-dev wp-deployer Settings slug : Plugin

Nilambar Sharma 5 Sep 6, 2022
An experimental plugin to preview and insert block patterns in WordPress.

Block Pattern Explorer The Block Pattern Explorer is an experimental WordPress plugin based heavily on the work currently being done in Gutenberg. The

WP Engine 16 Oct 19, 2022
Integrate Tailwind with the @wordpress/create-block script.

Tailwind Blocks Example plugin demonstrating how to integrate Tailwind with the @wordpress/create-block script. The plugin was scaffolded using @wordp

David Gwyer 25 Nov 13, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Gutenberg + Rust + TypeScript

Gutenberg + Rust + TypeScript This is a minimum block plugin template to rapidly get started building WP blocks using Rust + TypeScript. Follow me on

Kevin Batdorf 29 Dec 23, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
A block preview that directly displays the block fields, including tabs.

Kirby Block Preview Fields This plugin for Kirby 3 displays the block fields directly in the block preview, including tabs. Inspired by the Kirby Fiel

JUNO 8 May 10, 2023
ParkyDB - block based, linkable and verifiable document database -- javascript reference implementation

Ancon ParkyDB A data mesh database using Web 3.0 technology Note: Requires Node v17.7.2 and up for development More about data mesh architecture Block

Ancon Protocol 6 Aug 16, 2022
The Bookstore is a website that allows the user to :display a list of books , Add a book and remove a selected book.

Book Store The Bookstore is a website that allows the user to : -Display a list of books. -Add a book. -Remove a selected book. Built With ?? Basic CS

Nedjwa Bouraiou 4 Sep 6, 2022
The Bookstore is a website where the user can display a list of books, add a book by providing a title, an author, and selecting from the categories, and remove a selected book.

Bookstore The Book Store is a website where the user can display a list of books, add a book and remove a selected book. Microverse's Bookstore API wa

Virag Kormoczy 9 Jan 1, 2023
Hashmat Noorani 4 Mar 21, 2023
A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes!

(jQuery) Uniform A jQuery plugin to make your form controls look how you want them to. Now with HTML-5 attributes! Works well with jQuery 1.6+, but we

Audith Softworks 2.2k Jan 2, 2023
this is a single-page web application. we built a book website where the user can add , remove and display books. we used modules to implement these functionalities. also, we used the Date class to display the date and time.

Awsome Books In this Project, we have built A Books websites. Built With ?? HTML CSS javascript Git & Github Live Demo Here you can find the live Demo

Nedjwa Bouraiou 10 Aug 3, 2022
A public board for all the Computer Society and Students to display their profile. An online year-book for you to display your profile in the most creative manner

Student's Yearbook by IEEE Computer Society Student's yearbook is an open-source project which intends to dispaly the students who will be graduating

IEEE Computer Society 11 Dec 18, 2022
A userscript to spice your GitHub sidebar with an easy-to-use Table of Contents!

GitHub Sidebar ToC "... finally using that wasted sidebar space" – radiantly Installation You will need a userscript manager like Violentmonkey. Insta

Joshua T. 3 Mar 12, 2022
A serendipity engine on the Twitter sidebar.

Threadhelper Get Threadhelper in the Chrome Webstore | Our Vision A serendipity engine on the Twitter sidebar. ThreadHelper is the Twitter extension t

Threadhelper 17 Nov 24, 2022
Execute obsidian commands with short key sequences. For example, 'tp' for 'Toggle Preview' and 'tb' for 'Toggle Sidebar'. Easier to remember.

Key Sequence Shortcut Key Sequence Shortcut is an obsidian plugin, allow binding key sequences to an obsidian command. For example If we assume "t" st

Yu Wang 26 Dec 26, 2022