Create a Block list block

bobbingwide commented 5 years ago

Following on from https://github.com/bobbingwide/oik-blocks/issues/24#issuecomment-463124778 I now have requirements for a Block list block.

This block will be used on the home page for a component which delivers blocks.

Requirements

Create a list of grid of the blocks associated with a particular block type name namespace prefix.
Display the icon and block name
Optionally, link to the block post where the block is documented

Proposed solution

[x] Use existing logic for Block icon and Block info to populate the List
[x] Construct the link using the same logic as that used by core to create permalinks.
[ ] Layouts to be List, Table and Grid

Block type name: oik-block/blocklist Title: Block list Icon: block-default

bobbingwide commented 5 years ago

Even with the batch routine for creating block posts, it’s still too slow populating blocks.wp-a2z.org with all the blocks delivered by a plugin.

Pragmatic solution

Use the Block list block to generate the oik batch commands to run.
Display in code or pre
Run locally for a locally installed version of the plugin

bobbingwide commented 5 years ago

Now I’ve created quite a few blocks automatically I see the need for a Keyword taxonomy - flat to store the (up to 3) keywords for each block. A new command is required to update the blocks to set the keywords. See https://github.com/bobbingwide/oik-shortcodes/issues/64

bobbingwide commented 5 years ago

The Keyword taxonomy is no longer limited to 3 keywords.

bobbingwide commented 5 years ago

I now want to be able to create links from the Block List to the actual definition of the block. Initially the link will assume that the block content exists.

e.g. https://s.b/wordpress/block/block-title-block-name where s.b is my local installation, wordpress is the subdirectory in which WordPress is installed ... i.e. siteurl and homeurl are https://s.b/wordpress. How do I get siteurl in Gutenberg's Javascript world?

Chris O'Dell suggested using localise script to add siteurl and homeurl. That would work but it's no good for a JavaScript only block.

Using

var siteurl = wp.data.select('core/editor').getPermalinkParts();
        console.log(siteurl);

When editing the oik-plugins post that lists the blocks, I can see

postName: "oik-blocks"
prefix: "https://s.b/wordpress/oik-plugins"
suffix: "/"

This is nearly OK. We need to replace the oik-plugins ( post type ) with block.

bobbingwide commented 5 years ago

Even though I have a couple of problems with the select API, I'm going to check in my hacked about version because it does seem to work. The problems I've had are that if I do something like this:

const { getCurrentPostType, getPermalinkParts } = select('core/editor' );
var siteurl = getPermalinkParts();

then sometimes siteurl is null. Ditto if I call getCurrentPostType();

The workaround is to check the value of siteurl and hope that the value's not null a bit later on when the block is rendered again.

chris-odell-focs commented 5 years ago

So the following is a withSelect example which I think 'solves' the issue above. The boilerplate was created using create-guten-block and esnext.


/**
 * BLOCK: with-select-test
 *
 * Registering a basic block with Gutenberg.
 * Simple block, renders and saves the same content without any interactivity.
 */

//  Import CSS.
import './style.scss';
import './editor.scss';

const { __ } = wp.i18n; // Import __() from wp.i18n
const { registerBlockType } = wp.blocks; // Import registerBlockType() from wp.blocks

const { withSelect } = wp.data;

const TwsRenderAuthors = function (props) {

    console.log(props);

    let authorName = 'not found';
    if (props.authors && props.authors.length > 0) {

        //this doesn't 'set' the attribute per se, however it does
        //allow for a cleaner implementation and doesn't trigger
        //a re-render/re-call of the function.
        //then on refresh(ctrl-f5) or when viewing on the front end the
        //attribute is picked up correctly
        props.attributes.authorName = props.authors[0].name;        
    }

    authorName = props.attributes.authorName;

    return (
        <div className="tws-author" data-name={ authorName }><h4>20</h4>First author is:- {authorName }</div>
    );
};

const TwsGetAuthors = withSelect((select, ownProps) => {

    const { getAuthors } = select('core');

    return {
        authors: getAuthors()
    };
})(TwsRenderAuthors);

/**
 * Register: aa Gutenberg Block.
 *
 * Registers a new block provided a unique name and an object defining its
 * behavior. Once registered, the block is made editor as an option to any
 * editor interface where blocks are implemented.
 *
 * @link https://wordpress.org/gutenberg/handbook/block-api/
 * @param  {string}   name     Block name.
 * @param  {Object}   settings Block settings.
 * @return {?WPBlock}          The block, if it has been successfully
 *                             registered; otherwise `undefined`.
 */
registerBlockType( 'cgb/block-with-select-test', {
    // Block name. Block names must be string that contains a namespace prefix. Example: my-plugin/my-custom-block.
    title: __( 'with-select-test - CGB Block' ), // Block title.
    icon: 'shield', // Block icon from Dashicons → https://developer.wordpress.org/resource/dashicons/.
    category: 'common', // Block category — Group blocks together based on common traits E.g. common, formatting, layout widgets, embed.
    keywords: [
        __( 'with-select-test — CGB Block' ),
        __( 'CGB Example' ),
        __( 'create-guten-block' ),
    ],

    attributes: {

        authorName: {
            type: 'string',
            source: 'attribute',
            selector: '.tws-author',
            attribute: 'data-name'
        }
    },

    /**
     * The edit function describes the structure of your block in the context of the editor.
     * This represents what the editor will render when the block is used.
     *
     * The "edit" property must be a valid function.
     *
     * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
     */
    edit: function( props ) {
        // Creates a <p class='wp-block-cgb-block-with-select-test'></p>.
        console.log('call edit');

        return (
            <div className={ props.className }>
                <TwsGetAuthors {...props} />
            </div>
        );
    },

    /**
     * The save function defines the way in which the different attributes should be combined
     * into the final markup, which is then serialized by Gutenberg into post_content.
     *
     * The "save" property must be specified and must be a valid function.
     *
     * @link https://wordpress.org/gutenberg/handbook/block-api/block-edit-save/
     */
    save: function (props) {

        console.log('call save');

        /*

         When using the withSelect version of the component in the 'save' function I always get an error
         relating to 't.subscribe'. So call the component rather than the 'withSelect' version. 

        */

        return (
            <div>
                <TwsRenderAuthors {...props} />
            </div>
        );
    },
} );

bobbingwide commented 5 years ago

So the following is a withSelect example which I think 'solves' the issue above.

Thanks Chris. I'll try this logic in my Author Profile block.

Meanwhile, the solution I used in my block seems to work. Where before I had:

const { getCurrentPostType, getPermalinkParts } = select('core/editor' );
var siteurl = getPermalinkParts();

I changed it to not use const other than const { select } = wp.data; at the top of the file.

var siteurl = select('core/editor').getPermalinkParts();
var postType = select( 'core/editor').getCurrentPostType();

bobbingwide commented 5 years ago

The first pass logic to create/update Block CPTs directly from a Block List block has been checked in already.

When the Show batch commands toggle is on the list displays the commands to create the blocks using oik-batch.
When the Show create/update block links toggle is also on the list contains AJAX request links.
Right click on a link and choose Open in new tab to invoke the request.
The AJAX request is satisfied by the oik-shortcodes plugin, when the user is logged in.

bobbingwide commented 5 years ago

There’s a problem in the function that creates the link to a block, getBlockLink. For some blocks only the first space in the block.name has been converted to a hyphen. Clicking on a link which contains blanks gives a 404 page. E.g. https://blocks.wp-a2z.org/block/AB-Advanced%20Column-atomic-blocks-ab-column

Explanation

It turns out that the replace function needs to be told to perform a replace all, using a global replace regular expression.

Solution

Change to use str.replace(/ /g, ‘-‘ ); Apply this to all the fields used to create the URL.

bobbingwide commented 5 years ago

With Gutenberg 5.8.0 and 5.9.0 the block list for the core blocks had some very large SVGs for Image and Video. Turns out that I needed to add some CSS to style the SVGs - they'd lost their width=20 and height=20 parameters. Probably something to do with this... https://github.com/WordPress/gutenberg/pull/15863

bobbingwide commented 5 years ago

The links to the block’s definition needs to be all lower case. Even though WordPress finds the post, oik-loader-mu.php doesn’t find the page when performing an index lookup. Therefore it doesn’t load the dependent plugins for the post.

bobbingwide commented 5 years ago

I used the Block list block in a Block News post to say I'd catalogued the blocks for the Editor-Blocks plugin. Unfortunately the links are no good. e.g.

https://blocks.wp.a2z/?p=2548author-profile-(eb)-editor-blocks-author-profile

The ?p=2548 is unwanted!

It should be

https://blocks.wp.a2z/block/author-profile-eb-editor-blocks-author-profile/

Pragmatic workaround. Don't include links to each block but a link to the plugin.

bobbingwide commented 5 years ago

The AJAX request to create/update a block can be too long for the server.

The requested URL's length exceeds the capacity limit for this server.

This occurred for uagb/team. The icon for this block is rather long. The request was over 18,000 bytes.

https://blocks.wp.a2z/wp-admin/admin-ajax.php?action=oiksc_create_or_update_block&title=Team&name=uagb%2Fteam&description=This%20block%20allows%20you%20to%20display%20your%20team.%20Add%20their%20picture%2C%20name%2C%20what%20they%20do%20and%20links%20to%20their%20social%20profiles.&component=ultimate-addons-for-gutenberg&keywords=team%2Cmembers%2Cuag&category=uagb&icon=%3Cspan%20class%3D%22editor-block-icon%20block-editor-block-icon%22%3E%3Csvg%20width%3D%2220%22%20height%3D%2220%22%20role%3D%22img%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20fill%3D%22%234a00e0%22%20d%3D%22M20%2014.124c0-1.17-0.35-2.3-1.013-3.268-0.477-0.696-1.091-1.274-1.803-1.703%200.838-0.794%201.362-1.915%201.362-3.158%200-2.399-1.952-4.351-4.351-4.351-1.423%200-2.755%200.704-3.565%201.859-0.206-0.030-0.416-0.046-0.63-0.046s-0.424%200.016-0.63%200.046c-0.81-1.155-2.142-1.859-3.565-1.859-2.399%200-4.351%201.952-4.351%204.351%200%201.242%200.524%202.364%201.362%203.158-0.712%200.429-1.326%201.008-1.803%201.703-0.663%200.968-1.014%202.098-1.014%203.268v2.42h4.195v1.813h11.611v-1.813h4.194v-2.42h-0zM14.195%202.717c1.807%200%203.277%201.47%203.277%203.278s-1.47%203.277-3.277%203.277c-0.032%200-0.065-0-0.097-0.001%200.002-0.007%200.005-0.014%200.007-0.021%200.056-0.159%200.102-0.322%200.14-0.488%200.003-0.012%200.006-0.024%200.008-0.035%200.010-0.045%200.018-0.090%200.027-0.136%200.004-0.021%200.008-0.043%200.012-0.064%200.007-0.041%200.013-0.081%200.018-0.122%200.004-0.029%200.008-0.057%200.011-0.085%200.004-0.036%200.009-0.072%200.012-0.109s0.006-0.074%200.008-0.111c0.002-0.029%200.004-0.059%200.006-0.088%200.003-0.063%200.004-0.127%200.005-0.19%200-0.004%200-0.009%200-0.014%200-0.002-0-0.005-0-0.007%200-0.065-0.002-0.129-0.005-0.193-0.001-0.019-0.002-0.037-0.003-0.056-0.003-0.054-0.007-0.109-0.012-0.163-0.001-0.012-0.002-0.024-0.004-0.037-0.162-1.568-1.153-2.911-2.582-3.531%200.616-0.692%201.507-1.103%202.45-1.103v0zM8.866%204.732c0.010-0.004%200.021-0.008%200.031-0.011%200.033-0.012%200.066-0.023%200.099-0.033%200.025-0.008%200.050-0.016%200.075-0.023%200.018-0.005%200.037-0.011%200.055-0.016%200.033-0.009%200.066-0.018%200.1-0.026%200.248-0.060%200.507-0.093%200.773-0.093s0.525%200.033%200.773%200.094c0.033%200.008%200.066%200.017%200.099%200.026%200.019%200.005%200.038%200.010%200.056%200.016%200.025%200.007%200.050%200.015%200.075%200.023%200.033%200.011%200.066%200.022%200.1%200.034%200.010%200.004%200.020%200.007%200.030%200.011%201.096%200.405%201.918%201.381%202.104%202.565%200.002%200.009%200.003%200.019%200.004%200.028%200.006%200.040%200.011%200.080%200.015%200.121%200.002%200.015%200.003%200.030%200.005%200.045%200.004%200.037%200.006%200.074%200.009%200.112%200.001%200.016%200.002%200.032%200.003%200.048%200.002%200.048%200.003%200.096%200.004%200.144%200%200.004%200%200.008%200%200.012%200%200.002-0%200.004-0%200.006%200%200.047-0.002%200.093-0.003%200.139-0.001%200.015-0.001%200.029-0.002%200.044-0.002%200.045-0.006%200.089-0.010%200.133-0.002%200.017-0.004%200.034-0.006%200.051-0.003%200.029-0.007%200.057-0.011%200.085-0.003%200.022-0.006%200.044-0.010%200.066-0.005%200.033-0.011%200.066-0.018%200.1-0.006%200.029-0.012%200.059-0.019%200.088-0.004%200.018-0.008%200.035-0.012%200.053-0.010%200.044-0.022%200.087-0.034%200.13-0.005%200.017-0.010%200.034-0.014%200.051-0.008%200.025-0.016%200.049-0.024%200.074-0.006%200.020-0.013%200.039-0.020%200.058-0.007%200.022-0.015%200.044-0.023%200.066-0.014%200.037-0.029%200.074-0.044%200.111-0.007%200.016-0.014%200.032-0.021%200.049-0.013%200.031-0.027%200.061-0.041%200.091l-0.005%200.011c-0.005%200.011-0.010%200.021-0.015%200.032-0.016%200.032-0.032%200.064-0.049%200.096-0.007%200.012-0.013%200.025-0.020%200.037-0%200.001-0.001%200.002-0.001%200.002-0.019%200.034-0.038%200.067-0.058%200.1-0.008%200.013-0.016%200.026-0.024%200.039-0.021%200.035-0.044%200.070-0.066%200.103-0.014%200.021-0.029%200.042-0.043%200.063-0.013%200.018-0.025%200.035-0.038%200.052-0.017%200.023-0.033%200.045-0.050%200.067-0.012%200.015-0.023%200.030-0.035%200.045-0.018%200.022-0.036%200.045-0.055%200.067-0.012%200.014-0.023%200.027-0.035%200.041-0.020%200.022-0.039%200.044-0.059%200.066-0.012%200.013-0.024%200.025-0.036%200.038-0.032%200.034-0.065%200.067-0.099%200.1-0.020%200.019-0.040%200.039-0.061%200.058-0.014%200.013-0.029%200.026-0.043%200.038-0.024%200.021-0.047%200.041-0.071%200.062-0.012%200.011-0.025%200.021-0.037%200.031-0.029%200.024-0.059%200.047-0.089%200.070-0.008%200.006-0.016%200.012-0.025%200.019-0.545%200.405-1.221%200.646-1.951%200.646s-1.406-0.24-1.951-0.646c-0.008-0.006-0.016-0.012-0.024-0.018-0.030-0.023-0.060-0.046-0.089-0.070-0.012-0.010-0.025-0.020-0.037-0.030-0.024-0.021-0.048-0.041-0.072-0.062-0.014-0.013-0.029-0.025-0.043-0.038-0.021-0.019-0.041-0.038-0.061-0.058-0.034-0.033-0.067-0.066-0.1-0.101-0.012-0.012-0.024-0.025-0.036-0.037-0.020-0.022-0.039-0.044-0.058-0.066-0.012-0.013-0.024-0.027-0.035-0.040-0.019-0.022-0.037-0.045-0.055-0.067-0.012-0.015-0.024-0.030-0.035-0.045-0.017-0.022-0.034-0.044-0.050-0.067-0.013-0.017-0.025-0.035-0.037-0.053-0.015-0.021-0.029-0.041-0.044-0.062-0.023-0.034-0.045-0.069-0.066-0.104-0.008-0.013-0.016-0.026-0.023-0.039-0.020-0.034-0.040-0.067-0.058-0.102-0.007-0.013-0.013-0.025-0.020-0.038-0.017-0.032-0.034-0.064-0.050-0.096-0.006-0.012-0.011-0.023-0.017-0.035-0.001-0.002-0.002-0.003-0.003-0.005-0.015-0.031-0.029-0.063-0.043-0.095-0.007-0.015-0.013-0.030-0.020-0.046-0.015-0.038-0.030-0.075-0.045-0.113-0.008-0.021-0.015-0.041-0.022-0.062s-0.015-0.043-0.022-0.064c-0.008-0.023-0.015-0.046-0.022-0.069-0.010-0.035-0.020-0.070-0.030-0.105-0.007-0.025-0.013-0.049-0.019-0.074-0.005-0.020-0.009-0.039-0.014-0.059-0.005-0.024-0.011-0.048-0.016-0.073-0.007-0.038-0.014-0.076-0.020-0.114-0.003-0.020-0.006-0.041-0.009-0.062-0.004-0.030-0.008-0.061-0.012-0.092-0.002-0.015-0.004-0.030-0.005-0.046-0.004-0.046-0.008-0.091-0.010-0.137-0.001-0.013-0.001-0.026-0.002-0.039-0.002-0.049-0.004-0.098-0.004-0.148%200-0.053%200.002-0.105%200.004-0.158%200-0.014%200.002-0.028%200.003-0.042%200.002-0.039%200.005-0.079%200.009-0.118%200.001-0.014%200.003-0.027%200.004-0.041%200.005-0.042%200.010-0.084%200.016-0.126%200.001-0.008%200.002-0.016%200.004-0.024%200.186-1.185%201.008-2.161%202.105-2.566v0zM2.528%205.995c0-1.807%201.47-3.278%203.277-3.278%200.943%200%201.834%200.411%202.45%201.103-1.43%200.621-2.421%201.964-2.582%203.533-0.001%200.011-0.002%200.021-0.003%200.032-0.005%200.056-0.009%200.112-0.013%200.168-0.001%200.017-0.002%200.034-0.003%200.052-0.003%200.067-0.005%200.135-0.005%200.202s0.002%200.137%200.005%200.205c0.001%200.027%200.003%200.055%200.005%200.082%200.003%200.039%200.005%200.079%200.009%200.118%200.003%200.035%200.007%200.070%200.011%200.104%200.004%200.030%200.007%200.060%200.012%200.090%200.005%200.040%200.011%200.079%200.018%200.118%200.004%200.023%200.008%200.046%200.013%200.070%200.008%200.044%200.016%200.088%200.025%200.131%200.003%200.014%200.007%200.028%200.010%200.043%200.036%200.161%200.082%200.319%200.136%200.473%200.003%200.010%200.007%200.020%200.010%200.030-0.032%200.001-0.065%200.001-0.097%200.001-1.807-0-3.277-1.47-3.277-3.277v0zM5.095%2012.841c-0.012%200.019-0.023%200.038-0.035%200.056-0.025%200.040-0.049%200.079-0.072%200.12-0.013%200.022-0.026%200.045-0.039%200.067-0.021%200.037-0.042%200.075-0.062%200.112-0.013%200.024-0.025%200.047-0.038%200.071-0.019%200.037-0.039%200.075-0.057%200.113-0.012%200.024-0.024%200.048-0.035%200.071-0.019%200.040-0.037%200.080-0.055%200.12-0.010%200.022-0.020%200.044-0.030%200.065-0.021%200.048-0.041%200.097-0.060%200.145-0.006%200.014-0.012%200.028-0.018%200.043-0.025%200.063-0.048%200.127-0.071%200.191-0.005%200.015-0.010%200.029-0.015%200.044-0.017%200.049-0.034%200.098-0.049%200.148-0.007%200.023-0.014%200.046-0.021%200.069-0.013%200.042-0.025%200.084-0.037%200.127-0.007%200.025-0.014%200.051-0.020%200.076-0.010%200.041-0.021%200.082-0.030%200.122-0.006%200.026-0.012%200.052-0.018%200.078-0.009%200.041-0.018%200.083-0.026%200.125-0.005%200.025-0.010%200.050-0.015%200.075-0.008%200.046-0.016%200.091-0.023%200.137-0.003%200.021-0.007%200.043-0.011%200.064-0.010%200.067-0.019%200.134-0.027%200.202%200%200.001-0%200.002-0%200.002-0.007%200.062-0.013%200.123-0.018%200.185h-3.139v-1.346c0-1.839%201.057-3.491%202.714-4.276%200.604%200.317%201.29%200.498%202.017%200.498%200.211%200%200.422-0.015%200.631-0.046%200.033%200.047%200.066%200.093%200.1%200.138%200.012%200.015%200.024%200.030%200.036%200.045%200.034%200.043%200.068%200.086%200.104%200.128%200.014%200.017%200.029%200.034%200.044%200.051%200.033%200.038%200.067%200.076%200.102%200.113%200.018%200.020%200.036%200.039%200.055%200.058%200.031%200.032%200.064%200.065%200.096%200.096%200.012%200.012%200.024%200.024%200.036%200.036-0.047%200.028-0.093%200.057-0.139%200.087-0.008%200.005-0.015%200.010-0.022%200.015-0.046%200.030-0.091%200.060-0.136%200.091-0.016%200.011-0.031%200.021-0.046%200.032-0.040%200.028-0.079%200.057-0.119%200.086-0.012%200.009-0.025%200.018-0.037%200.028-0.050%200.038-0.099%200.076-0.148%200.116-0.011%200.008-0.021%200.017-0.032%200.026-0.039%200.032-0.077%200.064-0.115%200.097-0.015%200.013-0.029%200.025-0.044%200.038-0.038%200.034-0.075%200.067-0.113%200.102-0.010%200.009-0.020%200.018-0.029%200.027-0.046%200.043-0.091%200.087-0.135%200.131-0.012%200.012-0.023%200.023-0.034%200.035-0.034%200.035-0.067%200.070-0.1%200.105-0.013%200.014-0.026%200.028-0.039%200.043-0.037%200.041-0.074%200.081-0.11%200.123-0.006%200.006-0.012%200.013-0.017%200.019-0.041%200.048-0.081%200.097-0.121%200.146-0.011%200.014-0.022%200.028-0.033%200.042-0.029%200.038-0.059%200.076-0.088%200.115-0.011%200.015-0.023%200.030-0.034%200.045-0.038%200.052-0.075%200.104-0.111%200.157-0.039%200.057-0.076%200.114-0.113%200.172v0zM5.268%2017.283v-1.346c0-0.060%200.001-0.119%200.003-0.178%200.001-0.020%200.002-0.039%200.003-0.058%200.002-0.039%200.004-0.079%200.007-0.118%200.002-0.024%200.004-0.048%200.007-0.071%200.003-0.035%200.006-0.070%200.010-0.104%200.003-0.025%200.007-0.050%200.010-0.076%200.004-0.033%200.008-0.065%200.013-0.098%200.004-0.026%200.009-0.052%200.013-0.078%200.005-0.031%200.010-0.063%200.016-0.094%200.005-0.027%200.011-0.053%200.016-0.079%200.006-0.030%200.012-0.061%200.019-0.091%200.006-0.027%200.013-0.053%200.019-0.079%200.007-0.030%200.014-0.059%200.022-0.089%200.007-0.027%200.015-0.053%200.023-0.080%200.008-0.029%200.016-0.058%200.025-0.086%200.008-0.027%200.017-0.053%200.026-0.079%200.009-0.028%200.018-0.056%200.028-0.084%200.009-0.026%200.019-0.053%200.029-0.079%200.010-0.028%200.020-0.055%200.030-0.082s0.021-0.052%200.031-0.078c0.011-0.027%200.022-0.054%200.033-0.081s0.023-0.051%200.034-0.077c0.012-0.026%200.024-0.053%200.036-0.079s0.025-0.051%200.037-0.076c0.013-0.026%200.025-0.051%200.039-0.077s0.026-0.050%200.040-0.075c0.014-0.025%200.027-0.050%200.041-0.075s0.028-0.049%200.043-0.073c0.014-0.025%200.029-0.049%200.044-0.074s0.030-0.048%200.046-0.072c0.015-0.024%200.031-0.048%200.046-0.072s0.032-0.047%200.048-0.071c0.016-0.024%200.032-0.047%200.049-0.070s0.034-0.046%200.051-0.069c0.017-0.023%200.034-0.046%200.051-0.068s0.036-0.045%200.054-0.067c0.018-0.022%200.036-0.044%200.054-0.066s0.037-0.044%200.056-0.065%200.038-0.043%200.056-0.064%200.039-0.042%200.058-0.063c0.019-0.021%200.039-0.042%200.058-0.062s0.040-0.041%200.061-0.061c0.020-0.020%200.041-0.040%200.061-0.060s0.041-0.039%200.063-0.059c0.021-0.020%200.042-0.039%200.063-0.058s0.043-0.038%200.065-0.057c0.022-0.019%200.044-0.038%200.066-0.056s0.045-0.036%200.067-0.054c0.023-0.018%200.045-0.036%200.068-0.054s0.046-0.035%200.069-0.052c0.023-0.017%200.047-0.035%200.071-0.052s0.047-0.033%200.071-0.050c0.024-0.016%200.049-0.033%200.073-0.049s0.048-0.031%200.072-0.047c0.025-0.016%200.050-0.032%200.075-0.047s0.049-0.029%200.074-0.044c0.026-0.015%200.052-0.030%200.078-0.045%200.025-0.014%200.050-0.028%200.075-0.041%200.027-0.014%200.054-0.028%200.080-0.042%200.025-0.013%200.051-0.026%200.077-0.039%200.020-0.010%200.041-0.020%200.061-0.029%200.603%200.317%201.289%200.498%202.017%200.498s1.414-0.18%202.017-0.498c0.021%200.010%200.041%200.019%200.061%200.029%200.026%200.013%200.052%200.026%200.078%200.039s0.053%200.028%200.079%200.042c0.026%200.014%200.051%200.028%200.077%200.042s0.052%200.029%200.077%200.044c0.025%200.015%200.050%200.030%200.075%200.045s0.050%200.031%200.075%200.047c0.025%200.015%200.049%200.031%200.073%200.047s0.048%200.032%200.072%200.049c0.024%200.017%200.048%200.033%200.071%200.050s0.047%200.034%200.070%200.051c0.023%200.017%200.047%200.035%200.069%200.053s0.046%200.035%200.068%200.053c0.022%200.018%200.045%200.036%200.067%200.055s0.044%200.037%200.066%200.055c0.022%200.019%200.043%200.038%200.065%200.057s0.042%200.039%200.063%200.058c0.021%200.020%200.042%200.039%200.063%200.059s0.041%200.040%200.061%200.060c0.020%200.021%200.041%200.041%200.061%200.062s0.039%200.041%200.058%200.062c0.020%200.021%200.039%200.043%200.058%200.064s0.038%200.043%200.056%200.064c0.019%200.022%200.038%200.043%200.056%200.066s0.036%200.043%200.054%200.065c0.018%200.022%200.036%200.045%200.054%200.068s0.034%200.045%200.051%200.067c0.017%200.023%200.034%200.046%200.051%200.070s0.032%200.046%200.049%200.070c0.016%200.023%200.033%200.047%200.048%200.071s0.031%200.047%200.046%200.071c0.015%200.024%200.031%200.048%200.046%200.072s0.029%200.049%200.044%200.073c0.014%200.024%200.029%200.049%200.043%200.074s0.027%200.050%200.041%200.075c0.013%200.025%200.027%200.050%200.040%200.075s0.026%200.051%200.038%200.077c0.013%200.025%200.025%200.050%200.037%200.076s0.024%200.052%200.036%200.079c0.012%200.026%200.023%200.051%200.034%200.077s0.022%200.054%200.033%200.080c0.011%200.026%200.021%200.052%200.032%200.079s0.020%200.055%200.030%200.082c0.010%200.026%200.020%200.052%200.029%200.079%200.010%200.028%200.019%200.056%200.028%200.084%200.009%200.027%200.017%200.053%200.026%200.079%200.009%200.029%200.017%200.058%200.025%200.087%200.008%200.026%200.015%200.053%200.022%200.079%200.008%200.029%200.015%200.059%200.022%200.089%200.006%200.027%200.013%200.053%200.019%200.079%200.007%200.030%200.013%200.061%200.019%200.091%200.005%200.026%200.011%200.053%200.016%200.079%200.006%200.031%200.011%200.062%200.016%200.094%200.004%200.026%200.009%200.052%200.013%200.079%200.005%200.032%200.009%200.065%200.013%200.097%200.003%200.025%200.007%200.051%200.010%200.076%200.004%200.034%200.007%200.069%200.010%200.104%200.002%200.024%200.005%200.047%200.007%200.071%200.003%200.040%200.005%200.079%200.006%200.119%200.001%200.019%200.003%200.039%200.003%200.058%200.002%200.059%200.003%200.119%200.003%200.178v1.346h-9.463zM15.787%2015.47c-0.010-0.13-0.026-0.261-0.045-0.39-0.003-0.021-0.007-0.041-0.010-0.061-0.008-0.047-0.015-0.094-0.024-0.14-0.005-0.024-0.010-0.049-0.014-0.074-0.008-0.042-0.017-0.085-0.027-0.127-0.006-0.025-0.012-0.051-0.018-0.076-0.010-0.041-0.020-0.083-0.031-0.124-0.007-0.025-0.013-0.050-0.020-0.075-0.012-0.043-0.024-0.086-0.037-0.128-0.007-0.023-0.013-0.045-0.020-0.067-0.016-0.050-0.033-0.101-0.050-0.151-0.005-0.014-0.009-0.028-0.014-0.042-0.023-0.064-0.047-0.128-0.072-0.191-0.005-0.013-0.011-0.027-0.017-0.041-0.020-0.049-0.040-0.098-0.061-0.147-0.009-0.021-0.019-0.043-0.029-0.064-0.018-0.041-0.037-0.081-0.056-0.121-0.011-0.024-0.023-0.047-0.034-0.070-0.019-0.038-0.038-0.076-0.058-0.114-0.012-0.023-0.025-0.047-0.038-0.071-0.021-0.038-0.041-0.075-0.063-0.113-0.013-0.022-0.025-0.045-0.038-0.067-0.023-0.040-0.048-0.080-0.073-0.12-0.012-0.019-0.022-0.038-0.034-0.056-0.037-0.058-0.074-0.115-0.113-0.172-0.037-0.053-0.074-0.105-0.111-0.157-0.011-0.015-0.022-0.029-0.033-0.045-0.029-0.039-0.058-0.077-0.088-0.115-0.011-0.014-0.021-0.028-0.032-0.041-0.040-0.049-0.080-0.098-0.121-0.146-0.005-0.006-0.011-0.012-0.016-0.018-0.036-0.042-0.073-0.084-0.111-0.125-0.013-0.014-0.026-0.028-0.039-0.042-0.033-0.036-0.067-0.071-0.101-0.105-0.011-0.012-0.022-0.023-0.034-0.034-0.044-0.044-0.089-0.088-0.135-0.131-0.010-0.009-0.019-0.018-0.029-0.027-0.037-0.035-0.075-0.069-0.113-0.102-0.015-0.013-0.029-0.025-0.044-0.038-0.038-0.033-0.076-0.065-0.115-0.097-0.011-0.009-0.021-0.018-0.032-0.026-0.048-0.039-0.098-0.078-0.148-0.116-0.012-0.009-0.025-0.018-0.037-0.028-0.039-0.029-0.079-0.057-0.119-0.085-0.015-0.011-0.031-0.022-0.047-0.033-0.044-0.031-0.089-0.061-0.134-0.090-0.008-0.005-0.016-0.011-0.024-0.016-0.046-0.029-0.092-0.058-0.138-0.086%200.012-0.012%200.023-0.024%200.035-0.035%200.033-0.032%200.066-0.065%200.098-0.098%200.018-0.019%200.036-0.037%200.054-0.056%200.035-0.038%200.070-0.076%200.103-0.115%200.014-0.017%200.029-0.033%200.043-0.050%200.036-0.043%200.071-0.086%200.105-0.13%200.011-0.014%200.023-0.029%200.034-0.043%200.034-0.046%200.068-0.092%200.101-0.138%200.21%200.031%200.421%200.046%200.631%200.046%200.728%200%201.414-0.18%202.017-0.498%201.657%200.785%202.714%202.436%202.714%204.276v1.346h-3.139z%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E%3C%2Fspan%3E

Workaround

Edit the URL. Reduce the icon to very little. Correct the icon when editing the created post.

bobbingwide commented 4 years ago

I added the example: logic for most of the blocks in oik-blocks. For the Block list block the default example is currently larger than allowed for. A vertical scroll bar appears. But I can't actually scroll the data as any attempt to switch focus causes the example to disappear. What are the options? Should core logic hide the overflow? Block example has scroll bars

bobbingwide commented 4 years ago

The CollegeHumor block was deprecated in WordPress 5.4. In the Gutenberg source the block is still registered but with the supports.inserter value set to false.

// Deprecated since CollegeHumor content is now powered by YouTube
        name: 'core-embed/collegehumor',
        settings: {
            title: 'CollegeHumor',
            icon: embedVideoIcon,
            description: __( 'Embed CollegeHumor content.' ),
            supports: {
                inserter: false,
            },
        },

How should we cater for blocks that are not insertable? The Reusable block is another example.

bobbingwide commented 4 years ago

Well the first thing to do in the block list is to show if the block is insertable or not. When insertable we won't show anything. When not insertable ( supports.inserter = false ) then append (Not insertable) after the block name.

bobbingwide commented 4 years ago

I've decided to extend the logic so that (Not insertable) is also displayed in the blockinfo block, between the icon and the name. Like this

This means that we'll see the words in the excerpt on the Blocks tab for the plugin. As this is static information it'll only appear for updated blocks.

Never mind, there are some deprecation messages we have to deal with anyway.

bobbingwide commented 3 years ago

Well, this is still open so I may as well piggy back.

For a long time now, each time there's a new version of Gutenberg I spent an absolute age comparing the block list with one version to the block list of the next. It would be so much easier if I could do this using a tool such as BeyondCompare.

Proposed solution

When the Show block link toggle is Off and the Show batch commands toggle is On then just display a simple list of blocks with no markup apart from <br /> tags. I can then:

View source on the before and after versions of the plugin
Copy and paste the output from the block list block into two text files
Run BeyondCompare to visualise the differences.

This should make it a lot easier to identify the block changes. Note: For Gutenberg 10.6.0-rc.1 I took me a very long time to understand the differences between 10.4.1 and 10.6. One reason was that I'm missed a new block in 10.5, the other was that a couple of Template part variations have apparently gone missing in my version, copied from the .zip file for 10.6.0-rc.1

bobbingwide commented 2 years ago

While it's still open.... I have a need to compare the block list for one version of a plugin with another. In order to do this I need a new format, sorted by blockname.

When the toggles are: Show block link: false Show block variations: true / false Show batch commands: true

The output would be like this>

rem Block 69
rem Variations 102

core/archives,Archives
core/audioAudio
core/button,Button
core/buttons,Buttons
...
core/columns one-column-full,Columns 100
core/columns two-columns-equal,Columns 50 / 50
core/columns two-columns-one-third-two-thirds,Columns 30 / 70
core/columns two-columns-two-thirds-one-third,Columns 70 / 30
core/columns three-columns-equal,Columns 33 / 33 / 33

The rem Block record shows the count of normal blocks.
The rem Variations record shows the count of the variations.
When Show block variations is true then the list of blocks is followed by the list of variations.

The general format for each block / variation record would be

block name and variation name
comma
block title and variation title

bobbingwide commented 2 years ago

Layouts to be List, Table and Grid

I've only addressed the List layout so far. For the next layout format I think Grid would be preferable to Table

bobbingwide commented 2 years ago

I've found a problem with the block link when the block title contains a /. It should be converted to a -. Troublesome block is core/login-out The link is https://blocks.wp.a2z/block/login/out-core-loginout It's OK for variation titles with slashes.

bobbingwide commented 2 years ago

While this issue's still open, I don't want to display all the variations of the Post Terms block (core/post-terms) that are created for my custom taxonomies; 9 in blocks.wp-a2z.org.

I expect the solution to be similar to that developed for #54. That is, to filter out the unwanted variations.

bobbingwide commented 2 years ago

Layouts to be List, Table and Grid

I'm going to drop this requirement from this issue.

The List layout, which is implemented as a definition list, is good enough.
If a multi column list is required this can be implemented using CSS.
If Grid layout is required a new issue can be raised.

bobbingwide / oik-blocks