Widget support please? [Request]

Hi Thorworx @thorworx-1,

Thank you for your feedback. Could you please provide more details about your test site, such as the WordPress version, what theme? If there is a live test page, it would be great.

Regarding feature requests, I’m not clear on what you mean by the “reset to default” settings. Please tell me a bit more about it.

As for the SVG styling issue, you could add padding to the SVG to prevent it from being cropped.

Phi.

• This reply was modified 6 months, 4 weeks ago by Phi Phan.

Thank you for your feedback. Could you please provide more details about your test site, such as the WordPress version, what theme? If there is a live test page, it would be great.

Latest version of WordPress… I tested with Twenty Twenty-One and Kadence… with no other plugins installed.

There is no test page, because you just can’t add an Icon Separator block to Appearance > Widgets. It crashes the block as soon as you add it.

Regarding feature requests, I’m not clear on what you mean by the “reset to default” settings. Please tell me a bit more about it.

In standard WordPress blocks, there are usually controls to reset.
Here is the WordPress paragraph block showing the Reset controls:

As for the SVG styling issue, you could add padding to the SVG to prevent it from being cropped.

Unfortunately, that doesn’t work. If you add padding to the svg, it shrinks the svg, and/or adds white padding which covers the svg.

Thank you for the insight, I will look into the issue. I will also add the reset settings to the todo list on the next version as well. As for the border issue, you can adjust the SVG markup or add CSS to it. Please provide me the test page, I may can help with styling.

@thorworx-1 I have just tested with Kadence and WP 6.4.3. It works well. Could you please provide me a test page? Maybe a test site on InstaWP – Build and Deploy WordPress Websites.

Phi Phan,

This is what I’m trying to create with your plugin (I want this in a widget):

If I try to add your block to a widget, this is what happens:

https://demo.thorworx.com

Please take a look at this test site https://celebratory-raccoon-9424ca.instawp.xyz/right-sidebar/. I can add the separator on the sidebar without issue. Can you send me the console log of the issue? If you don’t know what it is, please send me an account on your demo site. Here is my email hello(@)boldblocks.net

Log sent.

@thorworx-1 I’ve just seen the log. There is not much information for me to debuging. Could you please use this test site for testing https://celebratory-raccoon-9424ca.instawp.xyz/right-sidebar/

I have sent the login credential via email.

Phi Phan, Thanks for trying to help… but
1) I did not receive the e-mail w/credentials
2) Testing on your server is not going to help me.

Further testing on my server:
I WAS able to successfully add Icon Separator using the Customizer > Widgets > Sidebar 1

HOWEVER:
When adding the block, the screen briefly fades to black(!?) and the block gets added without crashing and no console errors… but there is no way to set any options.

If I publish from the customizer, I can verify that your code did get inserted (default unstyled separator).. but if I go back to Dashboard > Appearance > Widgets the crashed block errors are displayed.

Very strange.

@thorworx-1 I don’t know exactly what is on your server, so I am unable to debug the issue. And I couldn’t reproduce it on my local, so the best approach is for you to test it on the server I provided.

Maybe my email was sent to your spam folder. You can use your email along with the password is 1245888 for the test site.

Phi Phan,

No problems on your server.
Comparing server info, the only differences I’m seeing is you’re using PHP8 and a newer mysqli.

Turned on WP debug on my server, and it shows nothing and nothing is written to my server logs about the block crashes.

Tested in Firefox and Chrome (Opera).

Interestingly, Opera shows a different error -but still related to react-dom.js:

react-dom.min.js?ver=18.2.0:10 TypeError: Cannot destructure property '__experimentalGetPreviewDeviceType' of '(e(...) || e(...))' as it is undefined.
    at index.js?ver=5c3b4b6dba8322443e2e79cd0c0d0859:22:5208
    at data.min.js?ver=dc5f255634f3da29c8d5:9:1957
    at __unstableMarkListeningStores (data.min.js?ver=dc5f255634f3da29c8d5:2:22508)
    at Object.__unstableMarkListeningStores (data.min.js?ver=dc5f255634f3da29c8d5:2:22765)
    at l (data.min.js?ver=dc5f255634f3da29c8d5:9:1922)
    at data.min.js?ver=dc5f255634f3da29c8d5:9:2426
    at Je (data.min.js?ver=dc5f255634f3da29c8d5:9:2636)
    at Qe (data.min.js?ver=dc5f255634f3da29c8d5:9:2953)
    at gt (index.js?ver=5c3b4b6dba8322443e2e79cd0c0d0859:22:5161)
    at index.js?ver=5c3b4b6dba8322443e2e79cd0c0d0859:305:9707
ar @ react-dom.min.js?ver=18.2.0:10
a.componentDidCatch.t.callback @ react-dom.min.js?ver=18.2.0:10
tt @ react-dom.min.js?ver=18.2.0:10
Jr @ react-dom.min.js?ver=18.2.0:10
Zr @ react-dom.min.js?ver=18.2.0:10
Gr @ react-dom.min.js?ver=18.2.0:10
(anonymous) @ react-dom.min.js?ver=18.2.0:10
xl @ react-dom.min.js?ver=18.2.0:10
fl @ react-dom.min.js?ver=18.2.0:10
Nn @ react-dom.min.js?ver=18.2.0:10
(anonymous) @ react-dom.min.js?ver=18.2.0:10

EDIT: It looks like this block developer had the same problem but was able to fix it:
https://www.ads-software.com/support/topic/widget-area-blocks-no-longer-loading-3-1-0/

• This reply was modified 6 months, 3 weeks ago by Thorworx.

@thorworx-1 The log error is very helpful. I will look into it further and include a fix in the next version.

Phi.

@thorworx-1 I have fixed the bug when using the block in the sidebar. I also added the ‘reset’ option to all the settings. Thank you once again for your time on it.

Phi.

Phi Phan,
The update works flawlessly.

Thanx for your help!