Coder Social home page Coder Social logo

youknowriad / blockbook Goto Github PK

View Code? Open in Web Editor NEW
161.0 13.0 16.0 11.97 MB

Build and Share WordPress Blocks in Isolation.

Home Page: http://youknowriad.github.io/blockbook/

License: GNU General Public License v3.0

JavaScript 23.96% CSS 75.86% HTML 0.18%
blocks gutenberg wordpress

blockbook's People

Contributors

0xflotus avatar ajitbohra avatar dependabot[bot] avatar fabiankaegy avatar iandunn avatar kmonahan avatar richtabor avatar youknowriad avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

blockbook's Issues

To consider: Should integrate with components too? Or keep separate (through Storybook)?

Hi Riad, I pose an issue to have in consideration.

I could benefit from BlockBook to document my blocks, but I also have components, which live on a special package "components" in my plugin, and which are also published to npm, so they can be accessed by 3rd parties (such as extensions to my plugin). The structure of the plugin is this one:

my-plugin/
│
├──blocks/
│ ├──block1/
│ ├──block2/
│ └──block3/
│
├──packages/
│ ├──package1/
│ └──package2/
│
└── my-plugin.php

I wonder: would it make sense to have BlockBook not be limited to blocks, but be also able to document components? I know that Storybook fulfills that goal, but then:

  • Wouldn't it be better to have everything in a single place?
  • Components could be complex, composing other components, yet in Gutenberg's Storybook it seems to be documenting only atomic components. Hence, currently, complex components have nowhere to be documented...
  • Complex components can access the data store, so they could benefit from mocking (#3), and maybe other features that you're intending to add to BlockBook. If you implement these features for BlockBook, they won't be available in Storybook, right?

Support mocking the API

Some blocks depend on the WP API, it would be great to be able to mock the API to preview these blocks in isolation.

Automatically select block

Since there is only 1 block being shown in the BlickList at a time, it would save a click if the block was automatically selected, making the popover toolbar appear and all of those things.

Retain selected tab when a browser reload occurs

The issue:

While developing with Blockbook I would love to be able to have the Stories tab open on the side and just see the changes while working on it. But since there are full reloads happening the selected Tab is not retained between sessions.

Possible Solutions:

adding the tab to the url as either hashes or fully adding them to the router is probably the way to go here.

`Uncaught TypeError: Object(...) is not a function` when adding Core blocks

I'm trying to add some Core blocks, so that I can test a custom format I'm working on. I copied parts of the example, and it loads them. The Card tab has all the info, but I get an error when I click on the Example or Editor tabs.

Screen Shot 2021-02-11 at 7 49 20 AM

The only things in my .blockbook/index.js are:

import { registerBlockType } from 'blockbook-api';

// Register BlockBook blocks.
const coreBlocks = [
	'core/paragraph',
	'core/pullquote',
	'core/quote',
];
coreBlocks.forEach( ( block ) => registerBlockType( block ) );
Uncaught TypeError: Object(...) is not a function
    ParagraphBlock webpack:///./node_modules/@wordpress/block-library/build-module/paragraph/edit.js?:103
    React 11
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 4
    unstable_runWithPriority webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:653
    React 3
    workLoop webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:597
    flushWork webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:552
    performWorkUntilDeadline webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:164
    EventHandlerNonNull* webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:187
    <anonymous> webpack:///./node_modules/scheduler/cjs/scheduler.development.js?:857
    js http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:25837
    __webpack_require__ http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:20
    <anonymous> webpack:///./node_modules/scheduler/index.js?:4
    js http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:25849
    __webpack_require__ http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:20
    React 2
    js http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:23592
    __webpack_require__ http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:20
    <anonymous> React
    js http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:23604
    __webpack_require__ http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:20
    <anonymous> webpack:///./node_modules/@wordpress/element/build-module/react-platform.js?:2
    node_modules wordpress/element/build-module/react-platform.js@http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:13490
    __webpack_require__ http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:20
    <anonymous> webpack:///./node_modules/@wordpress/element/build-module/index.js?:56
    node_modules wordpress/element/build-module/index.js@http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:13454
    __webpack_require__ http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:20
    <anonymous> webpack:///./node_modules/blockbook-cli/src/app/index.js?:2
    js http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:19066
    __webpack_require__ http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:20
    <anonymous> webpack:///multi_(webpack)-dev-server/client?:2
    0 http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:26472
    __webpack_require__ http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:20
    <anonymous> http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:84
    <anonymous> http://localhost:8081/index.f2ef4b9c7fb7d1ec5b9e.js:87
index.f2ef4b9c7fb7d1ec5b9e.js line 6558 > eval:103:97

Am I doing something wrong?

Errors on fresh install with wordpress script

Hi there,

i tried to make it work with the wordpress script package, but it just gave me some errors:

In my blockbook index.js i got:

// It's important to import the JS code that registers your block in the @wordpress/blocks package
import './src/index.js';

// You should also import the stylesheets (editor and style) of your blocks.
// import './src/editor.scss';
// import './src/style.scss';

// Once your blocks are loaded, make sure to tell BlockBook to add them to the menu.
import { registerBlockType } from 'blockbook-api';

registerBlockType( 'create-block/todo-list' );

The error:

> blockbook start

Der Befehl "NODE_ENV" ist entweder falsch geschrieben oder
konnte nicht gefunden werden.
child_process.js:669
    throw err;
    ^

Error: Command failed: NODE_ENV=development C:\laragon\www\custom\wp-content\plugins\todo-list\node_modules\webpack-dev-server\bin\webpack-dev-server.js --open C:\laragon\www\custom\wp-content\plugins\todo-list\node_modules\blockbook-cli\src\app\index.js --config C:\laragon\www\custom\wp-content\plugins\todo-list\node_modules\blockbook-cli\src\cli\webpack.config.js
    at checkExecSyncError (child_process.js:630:11)
    at execSync (child_process.js:666:15)
    at Object.<anonymous> (C:\laragon\www\custom\wp-content\plugins\todo-list\node_modules\blockbook-cli\src\cli\index.js:36:1)
    at Module._compile (internal/modules/cjs/loader.js:1138:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1158:10)
    at Module.load (internal/modules/cjs/loader.js:986:32)
    at Function.Module._load (internal/modules/cjs/loader.js:879:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 5932,
  stdout: null,
  stderr: null
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] blockbook:start: `blockbook start`
npm ERR! Exit status 1


But maybe i just made a mistake somewhere.

ERROR in ./node_modules/array.prototype.flat/implementation.js Module not found: Error: Can't resolve 'es-abstract/2020/ArraySpeciesCreate'

I got this error when installing Blockbook for the first time and running the start script:

ERROR in ./node_modules/array.prototype.flat/implementation.js Module not found: Error: Can't resolve 'es-abstract/2020/ArraySpeciesCreate'
> blockbook start

Live Reload listening on port 35729

ℹ 「wds」: Project is running at http://localhost:8081/
ℹ 「wds」: webpack output is served from /
ℹ 「wds」: Content not from webpack is served from /Users/iandunn/vhosts/localhost/wp.test/public_html/content/plugins/inline-time-block/dist
ℹ 「wds」: 404s will fallback to /index.html
ℹ 「wdm」: wait until bundle finished: /
✖ 「wdm」:
ERROR in ./node_modules/array.prototype.flat/implementation.js
Module not found: Error: Can't resolve 'es-abstract/2020/ArraySpeciesCreate' in '/Users/iandunn/vhosts/localhost/wp.test/public_html/content/plugins/inline-time-block/node_modules/array.prototype.flat'
 @ ./node_modules/array.prototype.flat/implementation.js 3:25-71
 @ ./node_modules/array.prototype.flat/index.js
 @ ./node_modules/react-with-styles-interface-css/dist/index.js
 @ ./node_modules/react-with-styles-interface-css/index.js
 @ ./node_modules/react-dates/lib/utils/registerCSSInterfaceWithDefaultTheme.js
 @ ./node_modules/react-dates/lib/initialize.js
 @ ./node_modules/react-dates/initialize.js
 @ ./node_modules/@wordpress/components/build-module/date-time/index.js
 @ ./node_modules/@wordpress/components/build-module/index.js
 @ ./node_modules/@wordpress/block-library/build-module/post-hierarchical-terms/edit.js
 @ ./node_modules/@wordpress/block-library/build-module/post-hierarchical-terms/index.js
 @ ./node_modules/@wordpress/block-library/build-module/index.js
 @ ./node_modules/blockbook-cli/src/app/index.js

Looks like the 2020 folder is missing:

> ll node_modules/es-abstract/20*
2015/ 2016/ 2017/ 2018/ 2019/
> npm ls array.prototype.flat
/Users/iandunn/vhosts/localhost/wp.test/public_html/content/plugins/inline-time-block
└─┬ [email protected]
  └─┬ @wordpress/[email protected]
    └─┬ [email protected]
      └─┬ [email protected]
        └── [email protected]

Re-running npm install doesn't help.

It seems like it might be an issue with webpack resolve paths:

As a workaround, I cloned the main branch of es-abstract into node_modules/es-abstract.

Allow for Block stories to define "MobileLayout"

It would be cool to have an additional parameter when creating a BlockStory to allow to create stories for Mobile as well as Desktop.

I'm not sure wether we should just have a Boolean to toggle between mobile & Desktop, have an array of different possible screen sizes or just pass through the viewportWidth to the BlockPreview component.

Start and Build commands are failing on fresh install

I followed the instructions to include this in my plugin that I created using create-guten-block.

When I run either command from the readme, I am getting a fatal error.

.blockbook/index.js

import '../src/blocks/introduction/index.js'
import '../src/blocks/accordion/index.js'

import { registerBlockType } from 'blockbook-api';

// Register BlockBook blocks.
const blocks = [
	'contentpilot/accordion',
	'contentpilot/introduction',
];
blocks.forEach( ( block ) => registerBlockType( block ) );

From the log

0 info it worked if it ends with ok
1 verbose cli [
1 verbose cli   '/usr/local/Cellar/node/14.7.0/bin/node',
1 verbose cli   '/usr/local/bin/npm',
1 verbose cli   'run',
1 verbose cli   'blockbook:start'
1 verbose cli ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'preblockbook:start', 'blockbook:start', 'postblockbook:start' ]
5 info lifecycle [email protected]~preblockbook:start: [email protected]
6 info lifecycle [email protected]~blockbook:start: [email protected]
7 verbose lifecycle [email protected]~blockbook:start: unsafe-perm in lifecycle true
8 verbose lifecycle [email protected]~blockbook:start: PATH: /usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/node-gyp-bin:/Users/claytoncollie/Documents/wordpress/contentpilot/app/public/wp-content/plugins/content-pilot-blocks/node_modules/.bin:/Users/claytoncollie/.rvm/gems/ruby-head/bin:/Users/claytoncollie/.rvm/gems/ruby-head@global/bin:/Users/claytoncollie/.rvm/rubies/ruby-head/bin:/usr/local/bin:/usr/bin:/bin:/usr/sbin:/sbin:/Users/claytoncollie/.rvm/gems/ruby-head/bin:/Users/claytoncollie/.rvm/gems/ruby-head@global/bin:/Users/claytoncollie/.rvm/rubies/ruby-head/bin:/Users/claytoncollie/.rvm/bin
9 verbose lifecycle [email protected]~blockbook:start: CWD: /Users/claytoncollie/Documents/wordpress/contentpilot/app/public/wp-content/plugins/content-pilot-blocks
10 silly lifecycle [email protected]~blockbook:start: Args: [ '-c', 'blockbook start' ]
11 silly lifecycle [email protected]~blockbook:start: Returned: code: 1  signal: null
12 info lifecycle [email protected]~blockbook:start: Failed to exec blockbook:start script
13 verbose stack Error: [email protected] blockbook:start: `blockbook start`
13 verbose stack Exit status 1
13 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/index.js:332:16)
13 verbose stack     at EventEmitter.emit (events.js:314:20)
13 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/node_modules/npm-lifecycle/lib/spawn.js:55:14)
13 verbose stack     at ChildProcess.emit (events.js:314:20)
13 verbose stack     at maybeClose (internal/child_process.js:1051:16)
13 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:287:5)
14 verbose pkgid [email protected]
15 verbose cwd /Users/claytoncollie/Documents/wordpress/contentpilot/app/public/wp-content/plugins/content-pilot-blocks
16 verbose Darwin 19.5.0
17 verbose argv "/usr/local/Cellar/node/14.7.0/bin/node" "/usr/local/bin/npm" "run" "blockbook:start"
18 verbose node v14.7.0
19 verbose npm  v6.14.7
20 error code ELIFECYCLE
21 error errno 1
22 error [email protected] blockbook:start: `blockbook start`
22 error Exit status 1
23 error Failed at the [email protected] blockbook:start script.
23 error This is probably not a problem with npm. There is likely additional logging output above.
24 verbose exit [ 1, true ]

console errors

> blockbook start

✖ 「wds」: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
 - configuration has an unknown property 'mode'. These properties are valid:
   object { amd?, bail?, cache?, context?, dependencies?, devServer?, devtool?, entry, externals?, loader?, module?, name?, node?, output?, parallelism?, performance?, plugins?, profile?, recordsInputPath?, recordsOutputPath?, recordsPath?, resolve?, resolveLoader?, stats?, target?, watch?, watchOptions? }
   For typos: please correct them.
   For loader options: webpack 2 no longer allows custom properties in configuration.
     Loaders should be updated to allow passing options via loader options in module.rules.
     Until loaders are updated one can use the LoaderOptionsPlugin to pass these options to the loader:
     plugins: [
       new webpack.LoaderOptionsPlugin({
         // test: /\.xxx$/, // may apply this only for some modules
         options: {
           mode: ...
         }
       })
     ]
child_process.js:655
    throw err;
    ^

Error: Command failed: NODE_ENV=development /Users/claytoncollie/Documents/wordpress/contentpilot/app/public/wp-content/plugins/content-pilot-blocks/node_modules/webpack-dev-server/bin/webpack-dev-server.js --open /Users/claytoncollie/Documents/wordpress/contentpilot/app/public/wp-content/plugins/content-pilot-blocks/node_modules/blockbook-cli/src/app/index.js --config /Users/claytoncollie/Documents/wordpress/contentpilot/app/public/wp-content/plugins/content-pilot-blocks/node_modules/blockbook-cli/src/cli/webpack.config.js
    at checkExecSyncError (child_process.js:616:11)
    at execSync (child_process.js:652:15)
    at Object.<anonymous> (/Users/claytoncollie/Documents/wordpress/contentpilot/app/public/wp-content/plugins/content-pilot-blocks/node_modules/blockbook-cli/src/cli/index.js:36:1)
    at Module._compile (internal/modules/cjs/loader.js:1256:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1277:10)
    at Module.load (internal/modules/cjs/loader.js:1105:32)
    at Function.Module._load (internal/modules/cjs/loader.js:967:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:60:12)
    at internal/main/run_main_module.js:17:47 {
  status: 1,
  signal: null,
  output: [ null, null, null ],
  pid: 88814,
  stdout: null,
  stderr: null
}

Handle focusing outside the editor to unselect block

When you click on a block, there's no way to unselect it. So even if your focus moves to another part of the page, or you click outside the block that is currently selected, it remains selected.

You can see this in action by following these steps:

  1. Go here:
    https://youknowriad.github.io/blockbook/block/core---audio/editor
  2. Click on the block to select it, notice its toolbar pops up
  3. Click outside the block somewhere.
  4. Notice the block does not become unselected.

Sidenote: I am not totally sure if this is something to solve here in BlockBook, or if its a Gutenberg-specific issue. But since the actual Editor in Gutenberg/WordPress does unselect blocks when you click outside them, it would seem this might be an implementation detail of the project using the core-editor package.

Support for dynamic blocks

Let me start by saying this is amazing! Really digging this. 😄

Have you thought about support for dynamic blocks? I was thinking that if given the correct api endpoint you should be able to pull the markup for the block from the api?

Would love to know what you think! Thanks!

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.