youknowriad / blockbook Goto Github PK
View Code? Open in Web Editor NEWBuild and Share WordPress Blocks in Isolation.
Home Page: http://youknowriad.github.io/blockbook/
License: GNU General Public License v3.0
Build and Share WordPress Blocks in Isolation.
Home Page: http://youknowriad.github.io/blockbook/
License: GNU General Public License v3.0
It would be awesome to also see the supports settings in the Card
tab of the block.
I tried importing a custom block into blockbook and it shows this error in the console:
TypeError: undefined is not an object (evaluating 'wp.i18n.__')
it was imported using the deconstruction syntax const { __ } = wp.i18n;
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:
This was referenced in #9 and I think since it is a larger feature it would be good to have its own issue to keep track of it.
Most tabs are broken, reporting SyntaxError: nothing to repeat
in the dev console. This is happening currently on the demonstration site at https://youknowriad.github.io/blockbook/
This would allow the theme developers to quickly test their theme stylesheets
Some blocks depend on the WP API, it would be great to be able to mock the API to preview these blocks in isolation.
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.
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.
adding the tab to the url as either hashes or fully adding them to the router is probably the way to go here.
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.
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 ) );
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?
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.
Propose adding "descriptions" for attributes to the Block API.
I got this error when installing Blockbook for the first time and running the start
script:
> 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
.
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.
When clicking on any block, it refreshes the browser URL, such as https://youknowriad.github.io/blockbook/block/core---buttons. But then, refreshing on that page produces a 404
Add a collapsible menu and adapts some styles.
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.
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 ) );
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 ]
> 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
}
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:
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.
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!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.