WordPress / wporg-main-2022

A block-based child theme for WordPress.org, plus local environment
72 stars 26 forks source link

Blocks landing page: Code contains highlight #310

Closed alexstine closed 1 year ago

alexstine commented 1 year ago

From: #245

It can be extremely verbose for screen reader users to hear highlighting marks in code samples/snippets. Possible fixes:

  1. Remove the marks.
  2. Add some type of raw view.
  3. Add a copy button.

Page: https://wordpress.org/blocks/ Heading 2: Complete creative control

ndiego commented 1 year ago

Remove the marks.

We have a planned update to the example code cc @annezazu. This will be updated next week and will resolve this. The code will be updated to this:

registerBlockType( 'your-first-block/hello-world', {
    edit: function () {
        return <p>Hello world (from the editor)</p>;
    },
    save: function () {
        return <p>Hello world (from the frontend)</p>;
    },
} );

Add a copy button.

This page was built in the Editor so this is just the Code block, but more improvements could be tackled in future iterations.

ndiego commented 1 year ago

@ryelle this issue can be closed now that the updated code example has been added to the page.