Create an sb/prevnext block to display Previous and Next links

bobbingwide commented 4 years ago

Requirements

To create a single block plugin that provides a block to display Previous and Next links.

[x] For hierarchical post types ( e.g. Page ) the previous link will show the previous sibling and the next link will show the next sibling where the posts are ordered by menu_order then title ASC.
[ ] For chronological post types ( e.g. Post ) the posts will be ordered by date DESC. Previous and Next will therefore be similar to the links seen on a single post template.

Secondary requirements

This issue has been hijacked to provide a sample plugin to easily demonstrate Gutenberg issue 24321 In the future, when the issue's been resolved, this secondary requirement can be removed.

bobbingwide commented 4 years ago

The first version of this plugin will be the default block generated by npx @wordpress/create-block. I want to do this to perform further analysis of the problem where the block built using npm run build doesn't work, but the block built using npm run start does. Reported here: https://github.com/bobbingwide/sb-children-block/issues/6

C:\apache\htdocs\wordpress\wp-content\plugins>npx @wordpress/create-block
npx: installed 204 in 16.064s
(node:48148) ExperimentalWarning: The fs.promises API is experimental
? The block slug used for identification (also the plugin and output folder name): sb-prevnext-block
? The internal namespace for the block name (something unique for your products): sb
? The display title for your block: PrevNext block
? The short description for your block (optional): Display Previous and Next links.
? The dashicon to make it easier to identify your block (optional): leftright
? The category name to help users browse and discover your block: widgets
? The name of the plugin author (optional). Multiple authors may be listed using commas: bobbingwide
? The short name of the plugin’s license (optional): GPL-2.0-or-later
? A link to the full text of the license (optional): https://www.gnu.org/licenses/gpl-2.0.html
? The current version number of the plugin: 0.1.0

Creating a new WordPress block in "sb-prevnext-block" folder.

Creating a "block.json" file.

Creating a "package.json" file.

Installing packages. It might take a couple of minutes.
Formatting JavaScript files.

Compiling block.

Done: block "PrevNext block" bootstrapped in the "sb-prevnext-block" folder.

Inside that directory, you can run several commands:

  $ npm start
    Starts the build for development.

  $ npm run build
    Builds the code for production.

  $ npm run format:js
    Formats JavaScript files.

  $ npm run lint:css
    Lints CSS files.

  $ npm run lint:js
    Lints JavaScript files.

  $ npm run packages-update
    Updates WordPress packages to the latest version.

You can start by typing:

  $ cd sb-prevnext-block
  $ npm start

Code is Poetry

bobbingwide commented 4 years ago

The initial block built using npx @wordpress/create-block is the build version. This block works fine when the sb-breadcrumbs-block plugin is activated.

bobbingwide commented 4 years ago

When I replaced the Edit function with

export default function Edit( { className } ) {
    return (
        <InspectorControls></InspectorControls>

    );
}

the result was

Uncaught ReferenceError: InspectorControls is not defined
    at Edit (edit.js:31)
    at renderWithHooks (react-dom.js?ver=16.9.0:15246)
    at mountIndeterminateComponent (react-dom.js?ver=16.9.0:17480)
    at beginWork$1 (react-dom.js?ver=16.9.0:18624)
    at HTMLUnknownElement.callCallback (react-dom.js?ver=16.9.0:341)
    at Object.invokeGuardedCallbackDev (react-dom.js?ver=16.9.0:391)
    at invokeGuardedCallback (react-dom.js?ver=16.9.0:448)
    at beginWork$$1 (react-dom.js?ver=16.9.0:23355)
    at performUnitOfWork (react-dom.js?ver=16.9.0:22346)
    at workLoopSync (react-dom.js?ver=16.9.0:22323)

when I added the same line as I used in the other plugins

import { InspectorControls} from '@wordpress/block-editor';

the block failed with the same message as I was getting with sb-children-block.

changing it to

import { InspectorControls} from '@wordpress/editor';

appeared to resolve the problem for sb/prevnext-block.

I then rebuilt the other blocks with npm run build and broke the system again.

Conclusion

In order to use <InspectorControls> it needs to be imported from @wordpress/editor not @wordpress/block-editor. How you find out where to import it from is a bit of a mystery.

In previous blocks I'd used

const {
    InspectorControls,
    PlainText,
} = wp.blockEditor;

I'd made an invalid guess of the package name from which to import the component. Am I the only person to have done this?

bobbingwide commented 4 years ago

OK, so I changed the other SB plugins to import InspectorControls from @wordpress/editor but it still doesn't work if all the blocks are built using npm run build.

Perhaps the Conclusion was also wrong.

bobbingwide commented 4 years ago

This single block plugin can be used to help to reproduce the problem reported in https://github.com/WordPress/gutenberg/issues/24321

The Steps to reproduce should be a lot simpler since they don't require any building. To reproduce

Steps to reproduce the behavior:

Clone the esnext-example and sb-prevnext-block plugins to your plugins folder.
Activate both plugins.
Deactivate the sb-children-block plugin, if present - see below.
Create a new page, using WordPress 5.4.2, with TwentyTwenty (optional).
Add the sb/sb-prevnext-block.
The sb/sb-prevnext-block will fail.
Deactivate esnext-example
Save and refresh
The sb/sb-prevnext-block will now work.

You don't actually need to do step 5.

Steps 1 & 2. Command line clone and activation

cd C:\apache\htdocs\wp54\wp-content\plugins
git clone https://github.com/bobbingwide/esnext-example.git
git clone https://github.com/bobbingwide/sb-prevnext-block.git
wp plugin activate esnext-example
wp plugin activate sb-prevnext-block

Unexpected output

Deactivate the sb-children-block plugin

If the latest version of the sb-children-block is activated then the results are wrong, but different.

I believe this is because the sb-children-block goes wrong first, even though it's not actually being used in the content. Note: This screen capture was taken before I simplified the steps even further. It's not necessary to add the `create-block/esnext-example' block.

bobbingwide commented 4 years ago

This single block plugin can be used to help to reproduce the problem reported in WordPress/gutenberg#24321

This repository has now been further developed. In order to use it to reproduce the problem you’ll either need to checkout a particular version, that was committed before further development or rebuild the block without the custom jsonpFunction.

Make this Step 1b. of https://github.com/bobbingwide/sb-prevnext-block/issues/1#issuecomment-667730057

checkout version 09adfce of sb-prevnext-block, which I've tagged as v0.1.0-alpha-24321

cd sb-prevnext-block
git checkout v0.1.0-alpha-24321

OR

cd sb-prevnext-block
edit the webpack.config.js file
comment out the config.output.jsonpFunction assignment
rebuild using npm run build

bobbingwide commented 3 years ago

The current version doesn't work for top level pages. But that's what I need to do, since Gutenberg's previous and next blocks don't do what I want them to do.

bobbingwide commented 3 years ago

This issue has been hijacked to provide a sample plugin to easily demonstrate Gutenberg issue 24321 In the future, when the issue's been resolved, this secondary requirement can be removed.

If you want to reproduce the issue checkout the version tagged v0.1.0-alpha-24321

bobbingwide commented 11 months ago

For chronological post types ( e.g. Post ) the posts will be ordered by date DESC. Previous and Next will therefore be similar to the links seen on a single post template.

It's no longer necessary to develop the block to support previous and next for posts. core/post-navigation-link does the job.

bobbingwide / sb-prevnext-block