Background

In Fizzie, SB and ThisIs... I've used some custom HTML to add debug information to each template, and some template parts.
It appears at the top of each template enabling me to know which template I'm viewing.
eg In 404.html

<!-- wp:html -->
<div class="WP_DEBUG">404.html</div>
<!-- /wp:html -->

If I change the text in the .html file I can tell whether or not the template has been loaded from the file or the database.
It doesn't let me know which language version is being used though.

Similarly, it's nice to know where a template part starts, and possibly where it ends.
eg in the 404.html template part

<!-- wp:html -->
<div class="WP_DEBUG">404 template-part</div>
<!-- /wp:html -->

The first <div> with class WP_DEBUG is styled with CSS in the theme's style.css stylesheet to appear in the wp-admin top bar.
Others have a dotted red border and appear when hovered over.

In order to turn off debugging it's necessary to either remove the custom HTML or change the CSS.

Finally, the output-input.html template uses a template part called contents-shortcode.html which uses the [contents] shortcode to display the raw HTML of the post content - escaped to make it visible in the browser.
This can be used to check that what we see in the front end was produced from the blocks in the post's content

Requirements

• Use the sb-debug-block to implement a similar solution to the hardcoded solution above
• Dynamically adjust the output based on the value of certain constants
• Provide a simple block UI to enable the user to indicate what they want the block to do

Proposed solution

• Server Side Rendered block
• Automatically determines the template name / template part name and where it was sourced.
• If that's not possible display the value defined in the block's debug attribute
• Generates the required CSS based on WP_DEBUG and/or SCRIPT_DEBUG and/or a block setting -eg Additional CSS class(es)
• Displays the equivalent of the [contents] if the showContents block setting is toggled on. Default: false.
• Display the HTML source for a particular block or group of blocks - to assist documentation.

Update code to run without problems in PHP 8.1, PHP 8.2, and PHP 8.3 with WordPress 6.4.1

See bobbingwide/bobbingwide#103 and bobbingwide/bobbingwide#114

I want to be able to create single block plugins easily. It appears that a simple solution was to make the sb-starting-block repository a template and to generate a new repository from the template.
Then it just needs a little refactoring:

• rename a couple of files / folders
• Refactor: eg Change Starting to Block and starting to block across ALL files

And building

• Install npm
• npm run dev

Requirement

Test sb-debug-block with the changes developed to fix Gutenberg feature request 32309.

Proposed solution

• Develop the changes proposed in the issue
• Build the solution
• Test by using the block in the ThisIs and Fizzie themes.