[Zac Gordon]

Howdy!

So, a few things here: first this is a pretty straightforward React question of where to put in an Ajax call to another site and grab the data. And can help with that if it’s something you’re not familiar with.

The complication is I am not sure, but it is possible withSelect may work with multisite. I don’t think it does but that would be a question to verify in the Core Editor WP Slack (happy to ask on your behalf if you’re not on the WP Slack, but if you are a good question for there).

The one thing tho I’m not completely sure is are you trying to pull in content from across multiple sites or just content from the site where the block is used?

[Zac Gordon]

Glad it’s up and running now!

Again, I do recommend using the other repo as a boilerplate rather than this one, but glad it’s all working for you now!

Ping me if any issues come up again!

[Zac Gordon]

Okay, just updated all the packages, let me know if it’s working for you now.

[Zac Gordon]

Okay, try it again now, should work 👍

Also, will throw out that I suggest using the other course repo as a boilerplate for creating your own plugins. This one was really just meant as a light intro to the basic parts of building a block.

Let me know though if it’s still not working.

[Zac Gordon]

Just wanted to follow up again, when you run npm outdated what packages are you seeing that are severely outdated? Everything should work as expected 👍

[Zac Gordon]

Okay, so at first pass, I ran npm install and then npm run dev and everything works fine.

Just to double check, you did try pulling down the repo as is and run npm install and npm run dev and got the issues?

Or did the issues just come when you tried to update everything?

Will continue to explore… let me know

[Zac Gordon]

Those examples are meant to show how you can use each of the form controls.

If you want to have the form controls do specific things it would just be a matter of writing the custom JavaScript to do that.

For instance, if you want to modify the font-size you would hav the control get the value and save it to attributes. Then you could code out inline styles that apply those attribute values where needed.

Or if you want to have a drop down with a few options of how to style a DIV, you would do that with the controls as demoed in the examples. Then you could apply different classes depending on what attribute value was selected.

So I don’t think you will find examples of every thing you want to do specifically, but all the building blocks are there 👍

If you get stuck or are not sure how to do something specific, code up what you can and then throw the link in here and I’ll try to help you get unstuck 🙂

[Zac Gordon]

Great! So I’ll trust you can find the example in the GB block course on MediaUpload component 👍

Here’s an example of how to code out a plugin sidebar – https://github.com/zgordon/advanced-gutenberg-course/tree/master/plugins/01-toc

NOTE: You may have to modify your webpack or enqueuing files to make sure your plugin files get enqueued 👍

[Zac Gordon]

Hi! What repo are you looking at? 🙂

[Zac Gordon]

There is an example of how to use the MediaUpload component in the blocks course I believe.

The advanced GB course covers the Sidebar Plugin API if you’re looking for an example of that and have the course I can point you to an example there too 👍

[Zac Gordon]

Hi Cena!

The Part 4 Projects were starting to become outdated so they have been archived. You can still find a few of them here – https://javascriptforwp.com/category/case-studies/

[Zac Gordon]

Apologies for not getting to this sooner, but everything should be fixed now in the repo! Thanks for pointing that out!!!

[Zac Gordon]

If I understand the issue correctly it sounds like you’re getting content and that content has filters applied that you don’t want correct? Specifically wpautop.

I guess so that I can better understand what it is that you are trying to do, why don’t you want the wpautop filter applied? If you really don’t want the filter my two first guesses are you can get the content pre being filtered with the REST API context “edit” and content.raw. However, not sure that’s what you want either.

The other option would be to just remove that filter in the one instance where you are calling it. I’m not sure exactly what conditional check would work here, but that would be the second approach.

Without seeing the code or understanding what you’re trying to do specifically, I’m just kind of guessing here. Sorry if I’m still not understanding the issue..

Let me know!

[Zac Gordon]

Yup, this makes sense to me that this would be happening anytime you went to get content where that filter gets applied.

[Zac Gordon]

Hi there! Not sure exactly where this is being called. In our example we return markup and nothing extra is added or filtered. If you just return something hardcoded in your function does the same thing happen? Trying to determine exactly where this behavior is triggered.

[Zac Gordon]

Does “number” work for you?

Attribute types are not exactly 1 to 1 mapping of native JavaScript types

[Zac Gordon]

Will also post back to this forum post from Juliette for further reference: https://javascriptforwp.com/forums/topic/unable-to-access-courses/

[Zac Gordon]

Hi Folks!

Quick little update here incase you have missed these updates via email over the last couple years.

Unfortunately the Master Course is no longer a product I am offering.

You should still have access to Part 1 JavaScript (now called Learn JavaScript Deeply), Part 2 (The WordPress REST API). Part 4 was taken down this year because the examples were becoming outdated, but you should have had access to them while they were current.

Part 3 on the JavaScript frameworks has changed a bit as the focus is primarily on React. I will have a course on React coming in 2019 that you should have access to, however, much of the new React content is in the Gutenberg Course.

I loved the Master Course plan, but after a few years of work and trying to sell it just was no longer viable to support.

If you feel jipped or jaded or like you should be getting more content for what you paid for, please let me know and we’ll work something out.

However, this should help explain what content you should have access to or expect still coming.

[Zac Gordon]

I took a quick look at the code, but on the event handler for handling the selection of checkboxes can you at least get something to trigger so you know that part is working. For example log out what the new request is along with the modified query results.

Also can you mock it up to give you a custom query from the start by hardcoding it like one of the custom taxonomies have been selected.

Just thinking of a few ways to begin troubleshooting.

[Zac Gordon]

Not really to the extend you’re talking about.

I believe the best approach you have is to build your own custom post (or see if another plugin developer has another option).

The columns block is still be developed, but in general the ability to extend or override core blocks is not really there and the recommended approach is to build your own custom block if a core one doesn’t work.

There is a styles API, but that is more CSS based than changing the markup.

[Zac Gordon]

Great question.

To give some context to how things are done in the React world of WordPress going forward, you would want to import your SVG images directly into your JS code (like we do with the SVG icons in the examples).

This article goes into more depth on the topic: https://medium.com/@kossnocorp/solving-the-unsolvable-svg-icons-with-react-preact-webpack-4185032f2601

But the short answer is, that is not the way you want to approach this problem. You want to add the SVG file to your plugin folder architecture then import the SVG file using a relative file path and JavaScript imports. This will also require an appropriate webpack loader for SVG files.

Hope that helps you get moving in the right direction!

[Zac Gordon]

Great question 🙂

Technically the metabox is still tied to post object. But if that block is not added, then correct there would not be a value.

It is possible to use block template to make certain blocks required.

That is covered in depth in the Gutenberg theme development course, but I have a quick tutorial on it here https://wp.zacgordon.com/2018/01/05/how-to-add-block-templates-to-your-wordpress-theme-or-plugin/

Hope I understood your question correctly and that helps!

[Zac Gordon]

Hi Phil!

Great question 🙂 I will be adding a short video on this in my next update (when GB get’s closer to an alpha release in Core).

This tutorial may help a bit too: https://atomicblocks.com/how-to-deprecate-gutenberg-editor-blocks/

The problem this solves is if you make a non-dynamic block and change anything in the save setting it will break the block. This is a huuuuge problem. So, the solution the Core team came up with is to provide old versions of your block that it can reference if anything changes. This prevents it from breaking.

It is a bit of a PITA and clunky I agree. However, one way to make it a bit nicer is to create a “versions” folder and save old versions in there as versions/block-name.X.X.js and then import and include reference to them in the deprecated setting. This will keep your code a little cleaner (like how we did with some of the icons and inspector settings in a few block examples).

Another approach is to make all your blocks dynamic and avoid this problem, but then you’re writing everything in PHP and JS and there is still a chance at some point you may make a change that breaks things.

Hope that helps explains things a bit?

Let me know if you hit any snags implementing or have any other high level questions about this 🙂

So glad you’re enjoying the course!

Cheers,
Zac

[Zac Gordon]

Glad you spotted the error! Thanks for sharing the solution, I know a few folks have got caught up on that!

[Zac Gordon]

Okay, having a little trouble following all of this, but hope I can help.

The first thing I’ll say that won’t be super helpful, but this model of AJAX is not really how Gutenberg wants you to be developing anymore. It would rather you build custom API endpoints that can handle these requests. That said we can probably hack this together.

In the JS for your block you will need to use the Editor Data Redux store to get the post ID https://wordpress.org/gutenberg/handbook/data/data-core-editor/#getcurrentpostid

You should be able to then pass that into your AJAX call.

Hope this helps, let me know how it goes..

[Author]

Posts