bobbingwide/sb-children-block

List children of the current content as links.

SB Children block

• Contributors: bobbingwide
• Tags: block, children, links, offspring, descendents, descendants
• Requires at least: 5.4.2
• Tested up to: 6.4-RC1
• Stable tag: 1.2.3
• Requires PHP: 7.2.0
• License: GPL-2.0-or-later
• License URI: https://www.gnu.org/licenses/gpl-2.0.html

List children of the current content as links.

Description

Use the Children block ( oik-sb/children ) to list children of the current content as links. Works for any hierarchical post type which supports page-attributes, such as page.

Installation

1. Upload the plugin files to the /wp-content/plugins/sb-children-block directory, or install the plugin through the WordPress plugins screen directly.
2. Activate the plugin through the 'Plugins' screen in WordPress

OR

With the authority to install plugins:

1. In the block editor, open the block inserter.
2. Search for the block by typing 'Children'.
3. Click on the 'Add block' button for the SB Children block.
4. The SB Children block plugin will be installed and activated.
5. And the block will be inserted into your content.

Frequently Asked Questions

What are the values for the depth parameter?

• Value - Meaning
• 0 - Display all descendents in a tree
• 1 - Display Children only
• 2 - Display Children and Grandchildren
• n - Display n levels of descendents
• -1 - Display all descendents in a single list

What do I need to search for to find the block?

• You can try typing the following strings to find the block: c, ch, chi, chil, child, childr, childre and children.
• You may also get results by typing the keywords: Child list, Descendents and Tree.

What if my first language is not English?

If your first language is not English then you could try:

• French - enfants
• German - Kinder
• Dutch - Kinderen
• Italian - la prole
• Spanish - niñas or niños

Do I need to build this block?

No. The plugin is delivered with the production version of the block. If you do wish to modify the code then you can find instructions in the src folder.

Screenshots

1. Children block depth=0
2. Children block depth=1
3. Children block depth=2
4. Children block depth=-1

Upgrade Notice

1.2.3

Upgrade for support for PHP 8.1 and PHP 8.2. Tested with WordPress 6.4-RC1 and Gutenberg 16.8.1

Changelog

1.2.3

• Changed: Support PHP 8.1 and PHP 8.2 #23
• Tested: With WordPress 6.4-RC1 and WordPress Multisite
• Tested: With Gutenberg 16.8.1
• Tested: With PHP 8.0, PHP 8.1 and PHP 8.2
• Tested: With PHPUnit 9.6

sb-children-block's Issues

Pressing delete key in text fields in the settings bar sometimes deletes the block

I've noticed this a couple of time in my blocks. Most recently it was when I was playing with the Additional CSS class(es) field for the sb-children-block. Previously it was for other blocks - from oik/oik-blocks.

Steps to reproduce

1. Enter something into the Additional CSS class(es) field. e.g. fred
2. Navigate away from the block and back again
3. Select the current value of the Additional CSS class(es) text field
4. Press the delete key
5. Sometime the block is deleted.

It's not easy to reproduce at will.
Chances are that the entry field is losing focus and the selection goes back to the block in the editor area.

parent block - Add a block called parent block

Where the children-block shows the children of the current page the parent block will create a link to the parent of the current page. It's a one level breadcrumb.

Block name: oik/parent-block
Source: src/parent-block

Creation method:

• Copy and cobble the children-block having completed #2.
• Change the server side rendering logic.
• See what happens with index.asset.php.

Update to the latest wp-scripts package

There are several outstanding PR's. I imagine that updating wp-scripts from 23.7.1 to the latest version will negate the need for merging these PRs.

Add Page list keyword and ability to select parent page

Requirement

User may be searching for a Page list block rather than a Children block

Proposed solution

We should also consider adding an ID attribute so that we can produce a page list starting from a specified ID, not just the current page

sb-children-block built with npm run build doesn't work

I packaged up my 3 new plugins sb-children-block, sb-parent-block and sb-breadcumbs-block with each of them having been built with npm run build and loaded them to oik-plugins.

The trouble is, that the sb/children-block ( which was the first block I built ) does not work in the editor.
It produces

This block has encountered an error and cannot be previewed.

There's a message in the console

react.js?ver=16.9.0:260 Warning: React.createElement: type is invalid -- 
expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 
You likely forgot to export your component from the file it's defined in, 
or you might have mixed up default and named imports.

Check the render method of `edit`.

then a massive stack starting

in edit
    in Unknown (created by WithToolbarControls(Component))
    in WithToolbarControls(Component) (created by WithInspectorControl(WithToolbarControls(Component)))

Additionally, the sb/parent-block stops working. I get

Your site doesn't include support for the "sb/parent-block" block. 
You can leave this block intact or remove it entirely.

Children block not rendering in the editor

Since Gutenberg 10.4.0 the Children block doesn't produce any results in the block editor.

Also, it seems that the Parent block and the Fields block no longer displays anything.
The post ID of the current post is not being passed to the server side rendering.

Improve documentation / format of the Depth attribute

In #1 I produced a table documenting the possible values for the Depth attribute.

depth=	Meaning
0	Any depth
1	Children
2	Children and grandchildren
n>2	More descendants
-1	Don't show the nesting

Now I need to find a way of providing this as help to the block user.

My first pass is to add a help= parameter to the <TextControl>. See https://developer.wordpress.org/block-editor/components/text-control/#development-guidelines

A future version may make use of the <RangeControl>. See https://developer.wordpress.org/block-editor/components/range-control/

Improve ability to style the block in the editor and front end

The className attribute is currently not used in the server side rendering code so any CSS defined for the editor and front end is not being used.

Requirement

• Ensure that any className attribute passed to the block is used.
• Check this works for additional CSS classes.

Note: Extract from the documentation for block registration

className (default true): By default, the class .wp-block-your-block-name is added to the root element of your saved markup. This helps having a consistent mechanism for styling blocks that themes and plugins can rely on. If for whatever reason a class is not desired on the markup, this functionality can be disabled.

customClassName (default true): This property adds a field to define a custom className for the block’s wrapper.

Prepare for multiple blocks

I want to extend the plugin to deliver additional blocks.

In my oik-blocks plugin each block is in its own subdirectory of the src folder and there's an index.js file that imports these directories. I assume that we can do the same using the wp-scripts solution.

The first stage is to move the files in the src directory into src\children-blocks and create a new src\index.js

import './children-block';

and rebuild and retest.

Children block only works for the 'page' hierarchical post type

When I tried to use the sb-children-block to list the variations of my block CPT nothing was returned.
I'd assumed that the logic using child_of would not require the post_type parameter.
But that assumption was wrong.
The logic needs to find the post_type of the selected parent post ( $post ) and pass that on the call to wp_list_pages.

Improve readme files for users and developers

@AndrewMLeonard made some comments about the readme.txt file

1. How do I install the block?
2. Why do I need to know about build routines?

Good questions.

1. How do I install the block?

We had a look at the Block Directory Search and came across a few failings in the search.
I demonstrated what happens when you search for the block, typing in the letters of the block title one by one: c-h-i-l-d-r-e-n
I documented them in my blog.
See "Finding and installing the Children block" in https://herbmiller.me/sb-children-block-my-first-single-block-plugin/

Some failings have already been documented as Gutenberg issues.
I'm going to try to take advantage of the others by improving the readme.

2. Why do I need to know about the build routines?

You don't unless you want to build the code yourself.
So, I'll move this documentation to a readme.md file in the src folder.

Update to the latest @wordpress/scripts package and rework as required

Having run npm run update-scripts I then tried to build sb-children-block but it failed with

> [email protected] dev C:\apache\htdocs\wordpress\wp-content\plugins\sb-children-block
> wp-scripts start

[webpack-cli] Invalid configuration object. Webpack has been initialized using a configuration object that does not match the API schema.
 - configuration.output has an unknown property 'jsonpFunction'. These properties are valid:
   object { assetModuleFilename?, asyncChunks?, auxiliaryComment?, charset?, chunkFilename?, chunkFormat?, chunkLoadTimeout?, chunkLoading?, chunkLoadingGlobal?, clean?, compareBeforeEmit?, crossOriginLoading?, cssChunkFilename?, cssFilename?, devtoolFallbackModuleFilenameTemplate?, devtoolModuleFilenameTemplate?, devtoolNamespace?, enabledChunkLoadingTypes?, enabledLibraryTypes?, enabledWasmLoadingTypes?, environment?, filename?, globalObject?, hashDigest?, hashDigestLength?, hashFunction?, hashSalt?, hotUpdateChunkFilename?, hotUpdateGlobal?, hotUpdateMainFilename?, iife?, importFunctionName?, importMetaName?, library?, libraryExport?, libraryTarget?, module?, path?, pathinfo?, publicPath?, scriptType?, sourceMapFilename?, sourcePrefix?, strictModuleErrorHandling?, strictModuleExceptionHandling?, trustedTypes?, umdNamedDefine?, uniqueName?, wasmLoading?, webassemblyModuleFilename?, workerChunkLoading?, workerWasmLoading? }
   -> Options affecting the output of the compilation. `output` options tell webpack how to write the compiled files to disk.
   Did you mean output.chunkLoadingGlobal (BREAKING CHANGE since webpack 5)?
npm ERR! code ELIFECYCLE
npm ERR! errno 2
npm ERR! [email protected] dev: `wp-scripts start`
npm ERR! Exit status 2

Looks like I need to follow a similar process to update this plugin as used for oik and other block plugins.

The block is currently delivered with one entry point /build/index.js.
wp-scripts has been improved considerably. It now supports multiple blocks per plugin.

Requirement

• Update to benefit from improvements to wp-scripts from the @wordpress/scripts package
• Simplify / reduce the code needed to support internationalization
• Register each block so that only the required code is loaded for the blocks that are used.
• Understand what's needed to enqueue the required CSS in the block editor and on the front end.

Process

• Update wp-scripts using npm run packages-update

• Remove webpack.config.js

• Change each block's block.json file to refer to the appropriate entry-points and CSS

• Mark src/index.js as superceded

• Update server logic

• Call wp_set_script_translations() for each block's editor-script

• Build using npm run dev

• Test

For plugins which have already been changed refer to the code changes in bobbingwide/sb-starting-block#3 and bobbingwide/oik-bob-bing-wide#42

Rename to sb-children-block

Requirements

• Make the children-block available on wordpress.org as a single block plugin.

Suggested implementation

• Rename children-block to sb-children-block
• Rename plugin file to sb-children-block
• Use sb for the prefix instead of oik.
• Use sb-children-block for the text-domain
• Extract the parent-block to a separate plugin - sb-parent-block - see https://github.com/bobbingwide/sb-parent-block
• Delete the parent-block code
• make the plugin available from oik-plugins.com
• submit the plugin to wordpress.org.

Once accepted:

• create the SVN version
• update the entry on oik-plugins.com
• test the plugin installation from wordpress.org
• test plugin installation and immediate use from wordpress.org

Add depth attribute to children-block

I'm trying out different scaffold tools for developing Gutenberg blocks.
This plugin ( children-block ) was generated using wp-create-block. https://github.com/WordPress/gutenberg/tree/master/packages/create-block

I now want to extend the block to actually do what I want it to do - display Child content as a list.

The first change, which wasn't done using an issue or PR, was to add ServerSideRendering, using wp_list_pages().

Now I want to start making use of some of the parameters. e.g. depth= which is used to control the levels of descendents displayed.

depth=	Meaning
0	Any depth
1	Children
2	Children and grandchildren
n>2	More descendants
-1	Don't show the nesting

Example depth=0

• Child 1
  • Grandchild 1
• Child 2
  • Grandchild 2
    • Great grandchild 2
      • Great great grandchild 2

Example depth=1

• Child 1
• Child 2

Example depth=2

• Child 1
  • Grandchild 1
• Child 2
  • Grandchild 2

Example depth=3

• Child 1
  • Grandchild 1
• Child 2
  • Grandchild 2
    • Great grandchild 2

Example depth=-1

• Child 1
• Grandchild 1
• Child 2
• Grandchild 2
• Great grandchild 2
• Great great grandchild 2

The test data is being constructed in my local development environment: see s.b/wp54/children-block-versions/

Support PHP 8.1 and PHP 8.2

Update code to run without problems in PHP 8.1 and 8.2

See bobbingwide/bobbingwide#103

Rename the block to 'oik-sb/children' and the title to 'Children'

I've just submitted the sb-children-block plugin to WordPress.org and received this standard email response.

Thank you for uploading SB Children block to the WordPress Plugin Directory. We will review your submission as soon as possible and send you a follow up email with the results.

Your plugin has been given the initial permalink (aka slug) of sb-children-block based on your display name of SB Children block. This is subject to change based on the results of your review.

If you need to change the plugin permalink, please reply to this email immediately and let us know what the correct slug should be. We will be unable to change your plugin slug once your review is completed.

If there are any other problems with your submission, please reply to this email and let us know right away. In most cases, we can correct errors as long as the plugin has not yet been approved.

I'm now questioning the names I used. Should I rename things, and if so, what to?

Name for	Current name	Alternatives
plugin name	SB Children block	Children
plugin slug	sb-children-block	children
text-domain	sb-children-block	children
block prefix	sb	oik-sb
block name	children-block	children
full block name	sb/children-block	oik-sb/children
function prefix	sb_children_block	oik_sb_children

Pro/Con	Regarding	Argument
Con	SB	SB is the ISO 3166 code‎: ‎for the Solomon Islands
Con	SB	SB has been trademarked - quite a few times according to zaubacorp.com
Con	SB	SB has already been used as a prefix for plugins on wordpress.org e.g. SB Child List - a very similar name
Pro	SB	SB is an abbreviation for Single Block(s)
Pro	SB	SB is an abbreviation for Seriously Bonkers - see https://seriouslybonkers.com
Con	SB	SB - Seriously Bonkers - may be a bit off-putting.... but most people won't make the connection
Con	block	the block suffix is not necessary in a block name
Pro	oik	is my brand prefix for oik-plugins
Con	oik	is already used as the prefix for blocks in the oik base plugin
Pro	oik-xxx	where oik-xxx is already the plugin slug is alreadt used as a prefix
Pro	oik-sb	could be the prefix for oik's Single Block plugins
Pro	oik-sb	Shouldn't be a problem for cataloguing in blocks.wp-a2z.org

Internationalize and localize the sb/children-block

Do for sb/children-block what I did for sb/breadcrumbs-block - internationalize it and create localized versions for UK English ( en_GB ) and bbboing ( bb_BB ).

Proposed solution

• Update package.json to add makepot and makejson
• Add logic to set script translations for translation of JavaScript strings
• Add logic to load plugin textdomain for translation of PHP strings
• Internationalize strings in the source files
• Localize
• Test in bb_BB language
• While we're at it check that none of the sb/parent-block stuff remains

$ok = wp_set_script_translations( 'sb-children-block-block-editor', 'sb-children-block' , $dir .'/languages'  );
load_plugin_textdomain( 'sb-children-block', false, 'sb-children-block/languages' );