Title: Create gutenberg widget
Last modified: March 15, 2023

---

# Create gutenberg widget

 *  [Robin W](https://wordpress.org/support/users/robin-w/)
 * (@robin-w)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/create-gutenberg-widget/)
 * I have several plugins that have legacy widgets, and about 11K sites using them.
 * I can create a php widget in a couple of hundred lines of php code which are 
   easy to understand and copy.
 * I have spent many many many many many hours trying to work out how to transition
   these to blocks, but as someone who knows php, css and a bit of js, the developer
   manuals are just totally confusing.
 * I know nothing of nvm, docker desktop, visual studio, babeljs.io Ubuntu, or the
   other many tools I seem to need to create something that surely is some files
   with links. I use Notepad++, and tortoise svn, and have little appetite at 65
   to start learning a whole new toolset.
 * None of the ‘examples’ I have found tells me what to actually do, they all just
   list lots of instructions with no ‘completed’ solution that I can use to create
   my own.
 * My widgets typically have settings which are checkboxes or text, and then use
   data from the database in a wp-loop to produce the output.
 * I fully understand that FSE is the way that WordPress wants to go, and would 
   dearly love to create blocks, given that WP won’t allow legacy widgets in FSE
   themes.
 * Someone somewhere must have a worked example of a plugin that creates a simple
   block that has some parameters, and runs some php code to do the output. That’s
   all I need, I can flex from that to create the blocks I need.
 * Please if you know of this, give me a link.
 * Otherwise my legacy widgets like I guess so many other plugin authors will remain
   of use only to those who stick with legacy themes, and that cannot be good for
   WordPress.

Viewing 6 replies - 1 through 6 (of 6 total)

 *  [thelmachido a11n](https://wordpress.org/support/users/thelmachido/)
 * (@thelmachido)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/create-gutenberg-widget/#post-16564902)
 * Hi, [@robin-w](https://wordpress.org/support/users/robin-w/) to convert your 
   classic widgets to blocks there is this developer handbook:
 * [https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/](https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/)
 * Is that the one you have tried to use?
 *  Thread Starter [Robin W](https://wordpress.org/support/users/robin-w/)
 * (@robin-w)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/create-gutenberg-widget/#post-16565049)
 * Thanks for your response – it is really appreciated. Yes I have read this bit.
 * I kinda understood step 1, but no idea where I put the code for step 2 ‘This 
   is done by adding JavaScript code to your block’s definition.’
 * I do not know what my ‘block’s definition is or where I put this code?
 * It also sems to say that I cannot have block options, indeed Justin Tadlock’s
   plugin **X3P0 – Legacy Widget**, says this is not possible – if his doesn’t do
   this, and if he can’t code it, I have no chance!!
 * This is the confusing part – and where a completed example would really help,
   one which needs some php code.
 * At the moment much of the developer manual is (and may well need to have) detailed
   steps, but they assume much pre-knowledge. I am just a guy trying to change a
   wheel on my car, but the developer handbook says things like ‘retrieve the wheel
   loosening device from the storage repository’ – I need a picture of the jack,
   and to know that it is in the trunk 🙂
 * I spent a coupe of hours working through the Gutenberg examples on github, but
   none seemed to do anything requiring database or php.
 * In essence I want to in the backend display some options – let say ‘title’ which
   the page author can change, and add a post_ID and say a tick box for ‘display
   post author’.
 * then on the front end, I want to display the title and let’s say the post content
   from the post_ID in the database and use the tick box to decide whether to display
   the author from the db. This is where I would expect some php code, with say 
   a hook from the js to return ob_clean from the php???
 * From that I can work out how to do more complex stuff.
 * I apologize that this sounds like a rant I really don’t want to sound like that,
   I am really keen to re-write my widgets properly as code blocks, but really really
   just need one complete example.
 *  [Justin Tadlock](https://wordpress.org/support/users/greenshady/)
 * (@greenshady)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/create-gutenberg-widget/#post-16566247)
 * I agree that the documentation is not quite where it needs to be (yet). It took
   me many hours of trial and error to really start getting up to speed on what 
   you’re attempting. I’m primarily a PHP developer who’s trying to navigate this
   new world of JavaScript.
 * Two sessions of Developer Hours [covering this specific topic](https://make.wordpress.org/core/2023/02/07/developer-hours-is-returning/)
   were held in February (they are recorded, so you can watch the older ones). There’s
   one more happening on March 27. I highly encourage joining that meeting and asking
   every question you can.
 * We’re also discussing bringing some of this content to the new WordPress Developer
   Blog. I just left a [response on a ticket](https://github.com/WordPress/developer-blog-content/discussions/42#discussioncomment-5334763)
   to make sure that we’re tracking this forum thread. Your topic is a good one,
   and I want us to cover a use case that’s similar enough to yours so that you 
   might be able to follow.
 * I know this doesn’t address your problems today, but I hope it helps in the coming
   weeks.
 * > I know nothing of nvm, docker desktop, visual studio, babeljs.io Ubuntu, or
   > the other many tools I seem to need to create something that surely is some
   > files with links. I use Notepad++, and tortoise svn, and have little appetite
   > at 65 to start learning a whole new toolset.
 * I totally understand this feeling. Some of those things you don’t have to worry
   about. I still develop with a XAMPP installation (instead of Docker), for example.
   I’ve created blocks on both Windows and only recently moved to a Mac, so it’s
   doable on whatever computer you’re on.
 * I’m an old-school Notepad++ user too. You can still use it, but I highly recommend
   Visual Studio Pro. It’s a much nicer code-editing experience (especially with
   JavaScript) once you get used to it. It’s really not much of a leap.
 * You do need to familiarize yourself enough with Node and NPM to get them installed
   and feel comfortable enough with your computer’s command line tool to enter a
   few `npm`/`npx` commands, but you don’t need to be an expert.
 * Then, I highly recommend reading [A PHP developer’s guide to getting started with block development](https://developer.wordpress.org/news/2022/11/a-php-developers-guide-to-getting-started-with-block-development/).
 * > It also seems to say that I cannot have block options, indeed Justin Tadlock’s
   > plugin X3P0 – Legacy Widget, says this is not possible – if his doesn’t do 
   > this, and if he can’t code it, I have no chance!!
 * I think there may be some miscommunication somewhere along the way. I believe
   you are referring to the note in my plugin’s description about widget options
   not working in the post editor when using the Legacy Widget block. That’s a specific
   limitation of classic widgets when being used as a block. It’s definitely possible
   to convert a widget into a standalone block with working options.
 *  Thread Starter [Robin W](https://wordpress.org/support/users/robin-w/)
 * (@robin-w)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/create-gutenberg-widget/#post-16566935)
 * Justin – Great to hear from you.
 * It was looking at good code from one of your plugins in 2014 that made me think
   that I could do this stuff, so I have you to thank (or maybe blame) for getting
   me into so many hours of combined fun and often much frustration over the years
   🙂
 * I’ll read the links, and have a further play. I hate giving up, so I will work
   it out.
 * On your plugin, in fact it was me badly phrasing – what I meant to say was for
   FSE themes – simply adding your plugin does not get a solution using legacy plugins
   that have settings, as it only takes the default, not that block widgets can’t
   take settings. But in any case I really want to write fully block compatible 
   widgets rather than try and use legacy ones in blocks. That way it works for 
   both FSE and non FSE themes, which must be the way forward.
 * Having worked out how to create a plugin from the dynamic links bit ([Creating dynamic blocks | Block Editor Handbook | WordPress Developer Resources](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/))
   I am working at trying to amend the code to have a setting.
 * But my overall feeling is that the developer code book is well written, all it
   needs is links to worked examples that are the finished bits of the snippets 
   used in the docs, say in github that let a person fill in gaps, and save the 
   dev’s writing endless repeat paras for newbie’s like me.
 * So for example, the two code snippets in [Creating dynamic blocks | Block Editor Handbook | WordPress Developer Resources](https://developer.wordpress.org/block-editor/how-to-guides/block-tutorial/creating-dynamic-blocks/)
   were great but it took me another 3/4 hour to build a plugin from this. This 
   consisted of looking through the code to find what directories I needed to create
   and what files went in where, deciding that the simple js version (since I know
   nothing of JSX) was easier to create, but also working out that the missing index.
   asset.php file which the plugin referred to but was not talked about or code 
   given in the tutorial could just be a renamed build.asset.php nicked from another
   Gutenberg example. So just having a link to the finished plugin code would have
   increased my speed of understanding as I read the dev guide, and my time to get
   to something to work on.
 * My final thought on blocks from the little knowledge I have so far is that there
   seem to be lots of very different ways to create these. So the example above 
   has a js version, and a jsx version, there is some stuff from a tutorial video
   I watched that uses react js scripts, where I took html code and put it through
   babeljs.io, and then there are json files. So many ways which seem to be used
   interchangeably even in the dev docs, that I’m not sure if there is a wordpress
   recommended way to do these? Perhaps like cars, trains and planes the best method
   varies according to what you are trying to do, or where you are trying to go.
 * Maybe after I’ve worked my way through the links, I’ll be better armed.
 *  [@thelmachido](https://wordpress.org/support/users/thelmachido/) and [@greenshady](https://wordpress.org/support/users/greenshady/)–
   again many thanks for responding – it really is appreciated.
 * now back to the code…
 *  [Justin Tadlock](https://wordpress.org/support/users/greenshady/)
 * (@greenshady)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/create-gutenberg-widget/#post-16567475)
 * I’ll accept either the thanks or the blame. 🙂
 * I also meant to link this [Learn WP course on building a block](https://learn.wordpress.org/course/introduction-to-block-development-build-your-first-custom-block/)
   earlier. It’s a good intro.
 * Thanks for further clarifying what you meant about settings. I do wonder about
   the following and want to make sure I’m understanding this bit correctly:
 * > But in any case I really want to write fully block compatible widgets rather
   > than try and use legacy ones in blocks. That way it works for both FSE and 
   > non FSE themes, which must be the way forward.
 * It sounds like you want to make a widget that works as a normal widget for classic
   themes and can be used, essentially, as a block for FSE themes. If that’s the
   case, I’m not really sure how feasible it’d be. This just may be a bit of getting
   our terminology mixed up too.
 * What I’d do is create a custom block type that mimics the features, settings,
   etc. of the original widget. So, in your plugin, you’d have both a widget and
   block (users would simply use either one).
 * And, if you wanted to go the extra mile, you’d use the link that [@thelmachido](https://wordpress.org/support/users/thelmachido/)
   mentioned earlier and automatically [migrate users to the block version](https://developer.wordpress.org/block-editor/how-to-guides/widgets/legacy-widget-block/#allowing-migration-to-a-block)(
   this is more of a nice-to-have bonus). I’ve never actually tried this, so it’d
   be a good experience for me too.
 * My primary focus would just be on creating a block that mimics the widget. Once
   that’s done, worry about any migration paths later.
 * Anyway, I cannot make any immediate promises, but I can tell you that there’s
   some work happening around documentation and outreach (feel free to DM me on 
   WordPress Slack if you want to chat more deeply) in this very specific area.
 *  Thread Starter [Robin W](https://wordpress.org/support/users/robin-w/)
 * (@robin-w)
 * [3 years, 2 months ago](https://wordpress.org/support/topic/create-gutenberg-widget/#post-16567653)
 * > My primary focus would just be on creating a block that mimics the widget.
 * yes I think I am just using bad terminology. My aim is that we just have a block
   that does what the widget did, so is usable in a FSE theme, but also in an ‘older’
   theme but one where users have gutenberg blocks- but not in a theme that is using
   the classic editor – if that is not just making myself even less clear.
 * I have played further with the dynamic block, and combined with some other video’s
   I think I have something approaching a solution, early days, but looking more
   hopeful.
 * If I get it working, I’ll come back.
 * Thanks again, your input and support has really helped me feel that I can get
   there – this is why I love the WP community 🙂

Viewing 6 replies - 1 through 6 (of 6 total)

The topic ‘Create gutenberg widget’ is closed to new replies.

 * ![](https://ps.w.org/gutenberg/assets/icon-256x256.jpg?rev=1776042)
 * [Gutenberg](https://wordpress.org/plugins/gutenberg/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/gutenberg/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/gutenberg/)
 * [Active Topics](https://wordpress.org/support/plugin/gutenberg/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/gutenberg/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/gutenberg/reviews/)

## Tags

 * [classic widgets](https://wordpress.org/support/topic-tag/classic-widgets/)

 * 6 replies
 * 3 participants
 * Last reply from: [Robin W](https://wordpress.org/support/users/robin-w/)
 * Last activity: [3 years, 2 months ago](https://wordpress.org/support/topic/create-gutenberg-widget/#post-16567653)
 * Status: not resolved