[WIP] chore: added sidebar notice in customizer

[UVLabs]

Summary

Adds content width notice to customizer

Will affect visual aspect of the product

NO

Screenshots

Test instructions

• Install this patch
• Go to Customizer->Layout->Content/Sidebar and scroll down to the single posts section and adjust the content width.
• At above 80% the notice will show

Closes #3475

[github-actions[bot]]

Plugin build for 277d15ee776768ca25753e5e846cb37dc8a6ee1d is ready :bellhop_bell:!

• Download build

[cristian-ungureanu]

Hey @UVLabs, thanks for submitting this. While this method of adding the notice is valid, a better way would be to implement this directly in react. What I would do here is to:

1. Pass the text of the notice via the control's options. Ex: after this parameter, we can add another one named "notice_text"
2. Modify the Range control class and add the new parameter into "json()" function so it will be available in react
3. Modify the RangeComponent.js file so it would show the notice directly from JS

[UVLabs]

@cristian-ungureanu If i add that property and add the text, it would pass the text to the component, but the text has certain conditions it should meet to show:

• The sidebar should not be full-width
• The custom width needs to be more than 80%
• The text needs to show only beneath the Single Post options in the customizer

Given the 3 conditions needed above, from within the component I can get the custom width value that is being set by the control.

But to get the sidebar type...I'd have to somehow pass that setting to the component...this seems like a specific use-case for a general component

I'd also need to check the sidebar type dynamically, I tested this out by changing the transport to refresh but it's not reactive...the notice would only show after saving the setting and refreshing the page, you can see how I tried to implement this here:

https://github.com/Codeinwp/neve/compare/development...customizer-content-width-notice-2?expand=1

Let me know what you suggest in this case