zackify / gutenblock Goto Github PK
View Code? Open in Web Editor NEWThe easiest way to develop and release Gutenberg blocks (components) for WordPress
Home Page: https://www.youtube.com/watch?v=apZwd0FqQu4
License: MIT License
The easiest way to develop and release Gutenberg blocks (components) for WordPress
Home Page: https://www.youtube.com/watch?v=apZwd0FqQu4
License: MIT License
Just getting back to updating some components I built on top of gutenblock controls. Looks like things break at the 4.x release of Gutenburg. I didn't dig very deep but looks like an issue with importing the Inspector Controls + the Richtext field. Have you run into this?
Repeat works great in the example file using the inspector panel but doesn't seem to work in the editor.
Am I missing something?
Block.js
const Block = {
title: 'Repeat1',
icon: 'shield-alt',
category: 'common',
attributes: {
notes: {
type: 'array',
default: [{ title: "one", sub: "two" }],
},
}
};
Edit.js
import { Input, Repeat } from 'gutenblock-controls';
const Edit = ({ attributes }) => {
return (<Repeat title="Notes" max="50" addNew="Add Field" attribute="notes">
{attributes.notes.map(tab => {
return <Input name="title" />
})}
</Repeat>)
};
Screen Capture
Hi Zack,
Looking at the examples in this repo I couldn't find any blocks with styles.
I would like to enqueue some structure styles to my block both on the editor and front-end, how is that be done?
Thanks in advance.
First, thanks for working on this. Looks like a great project that will be super useful!
Lately I've been using npx
to run scripts instead of installing globally. I tried with this (npx gutenblock init
), and it didn't work. I did install globally and run and it's working.
Not sure what it takes to work with npx
but would be cool if it worked.
I've read in the readme that you are working on an automated translation system with i18n but what about current situation? How can i manage I18n translation in gutenblock? Even a manual and slow way would be good to go
First off, thanks for gutenblock, it's great :)
webpack-serve has been deprecated; are there any plans to move to webpack-dev-server? I might be able to help with a PR if need be.
When running the docker watch, I am getting this error ERROR: for wordpress Cannot start service wordpress: driver failed programming external connectivity on endpoint blocks_wordpress_1 (92276f168396b71072f54fc7b359a72669273720199ba52e27ea71be1ac3cd1c): Error starting userland proxy: Bind for 0.0.0.0:80: unexpected error (Failure EADDRINUSE)
That would indicate that port 80 is in use, which is common. It would be great to have an environment variable for port or to automatically find an open one.
This is by far the best option or building blocks I have come across. I like the features but can't get it to work.
During watch I get the error
WARNING in ./src/notes/block.js 34:19
Module parse failed: Unexpected token (34:19)
You may need an appropriate loader to handle this file type.
| Block.edit = function (props) {
| return wp.element.createElement(_gutenblockControls.Import, _extends({}, props, { load: function load() {
> return import('./edit');
| } }));
| };
@ ./src sync block.js$ ./notes/block.js
@ ./index.js
@ multi ././index.js
I get the same when I build and I have not edited any files yet its a stock install.
I have run npm install so all dependencies are there.
Any ideas?
Would be nice to have a classname to hook onto so the Delete button can be styled
Example custom styled:
Delete Button in this src code:
https://github.com/crossfield/gutenblock/blob/master/controls/src/repeat/index.js
<div className="whatever-you-want-call-it" onClick={() => this.delete(index, onChange)}>Delete item</div>
Looks like InspectorControls is now under wp.editor . Not sure when that changed.
wp.editor.InspectorControls
Breaks:
const { InspectorControls } = wp.blocks;
Hey, I've not been able to get this up and running. With both the gutenblock watch
and gutenblock build
I get:
index.js:8 Uncaught Error: only one instance of @babel/polyfill is allowed
at Object.eval (index.js:8)
at eval (index.js:12)
at Object.../node_modules/@babel/polyfill/lib/index.js (main.js?ver=4.9.5:1253)
at __webpack_require__ (main.js?ver=4.9.5:753)
at fn (main.js?ver=4.9.5:122)
at eval (client:2)
at Object.1 (main.js?ver=4.9.5:5093)
at __webpack_require__ (main.js?ver=4.9.5:753)
at main.js?ver=4.9.5:873
at main.js?ver=4.9.5:876
Thoughts?
Steps:
The content of the blocks folder is deleted, and even when creating a new folder, WP is ignoring the plugin.
This is shown in console:
ERROR in ./index.js
Module build failed (from ./loader.js):
Error: ENOENT: no such file or directory, open '/private/var/www/temp/blocks/index.js'
@ multi ././index.js main[0]
ℹ 「wdm」: Failed to compile.
Left a hard coded project prefix when registering inside gutenberg. :P
When running gutenblock watch docker I get the following error and cant seem to find a solution.
wordpress_1 | Warning: mysqli::__construct(): The server requested authentication method unknown to the client [caching_sha2_password] in Standard input code on line 22 wordpress_1 | wordpress_1 | Warning: mysqli::__construct(): (HY000/2054): The server requested authentication method unknown to the client in Standard input code on line 22
I'm on osx High sierra. Any idea?
This would be a big deal if possible:
const CustomBlock = ({ title }) => <div>{title}</div>
edit.js
<Repeat>
<CustomBlock
title={<Input name="title" />}
/>
</Repeat>
save.js
attributes.thing.map(thing => <CustomBlock title={thing.title} />)
It would mean that you could have repeating custom components and edit them in place. The base component wouldn't need to have any knowledge of Wordpress.
This is MAJOR missing piece from Gutenberg and it should probably be in core, IMO.
Am I right in thinking this isn't possible with the current patterns you're using? None of the child iteration / cloning you're doing will work, unfortunately, unless the parent CustomBlock was modified.
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.