SUGGESTION: Some ideas

  • Hi Munir,

    The plugin is really great – a perfect solution for enhancing Gutenberg!

    Using the plugin I’ve come across some additional possible improvements. Please consider these:

    1. Shape divider border radius:
      Shape divider should inherit border radius from the parent, so maybe apply a border-radius: inherit; styles on it if possible. (Or maybe just provide an option for shape divider to inherit the border radius as I can see there is an option to set up the width of the shape divider and inheriting border radius in that case might not be desirable?)

    2. Color palette:
      Would it be possible to pick up color palette predefined in the theme? Or at least edit it somewhere? I find myself constantly using “Custom color” to match my theme colors which require checking the color hex code all the time (or keep it noted).

    3. Combo input field UX:
      For combo input field such as padding/margin I can’t really see the values I’ve entered as the type="number" input field is too narrow. Could you please redesign this combo field? Maybe place the unit selector and lock switch above the numeric fields?

    4. Typography options:
      Could you add some typography options? Maybe not really the font family selector as I strongly believe, this should be inherited from the theme in all cases, but an option for text transform, letter spacing, maybe even font size, and similar, could be helpful.

    5. Sections order:
      Maybe order option sections by name? I find it a bit confusing and constantly search for the correct section. For example, “Border radius” section is way down, while “Border” section is the first one. Maybe the only exception from this ordering could be “Extra” and “Custom CSS” sections which could the be last ones as they are more advanced? Just an idea.

    Thank you for consideration!

    Best regards,

    Oliver

Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author Munir Kamal

    (@munirkamal)

    Hey @webmandesign

    Thank you so much for providing all this detailed feedback and suggestions. I can confirm that each of your points has been noted and I will working out to implement those.

    For the Typography, I have some plans. I will need to think about it.

    Regards,
    Munir

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    Thanks Munir! I’ve got some more:

    Typography:
    As for typography, another option that would cause no harm (meaning major conflict with theme) would be line height setup.

    Custom CSS:
    Is there some documentation about how to use block “Custom CSS” field? I can’t find out what selector do I need to use. Do I need to assign a specific custom class for the block and then use it in the “Custom CSS” field of the block? Or is there a placeholder for the selector the plugin creates for the block?
    I’ve noticed writing pure CSS styles without a selector does not work, it is not being applied on that specific block.

    Styles specificity in editor:
    Another thing I suggest is to prefix the CSS class generated by the plugin when editing a block with .editor-styles-wrapper (or even better with a div.editor-styles-wrapper). It’s OK to use pure generated CSS class on the front-end, but in editor some styles are not applied due to Gutenberg or theme overrides (as themes are supposed to target elements only in .editor-styles-wrapper div anyway) – but this is only in editor, in back-end. Then I find myself to apply/enable !important rule often when it is actually not really needed as the style is applied on the front-end even without it. It’s just the block editor (back-end) specificity issue.

    As an example, applying margins on paragraph block does not work in editor (back-end) as Gutenberg applies these styles in the editor:

    .editor-styles-wrapper p {
	font-size: inherit;
	line-height: inherit;
	margin-top: 28px;
	margin-bottom: 28px;
}

    But the actual tweaked margins using Editor Plus options work perfectly fine on front-end though even without !important style rule.

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    Regarding custom CSS, I can see now that the custom CSS class is actually displayed in the “Additional CSS class(es)” field under native “Advanced” section of the block. And so I can use that one in the “Custom CSS” field.
    Sorry for the hassle.

    Plugin Author Munir Kamal

    (@munirkamal)

    Hey @webmandesign

    That some really impressive and helpful feedback. Keep it coming. ??

    Typography:
    Yeah, I need to think properly and plan it out.

    Custom CSS:
    You got it. Yes, there is a CSS class added to each block and that you can use it to target and write your custom CSS. Additionally, you can also assign your own class to a block and target that to write custom CSS.

    Styles specificity in editor:
    That’s some very useful info, I will dig into this. I’ve also experienced the same as you described. I will put this on priority to check.

    Cheers

    Plugin Author Munir Kamal

    (@munirkamal)

    Hi @webmandesign

    Part of your suggestions is done in the latest update.

    * Typography Options are added.
    * Section Order – Done.
    * Styles Specificity applied as well as loaded the Styles in the footer on the front-end to make sure these styles take precedence as much possible.

    Please try and let me know your feedback.

    Regards,
    Munir

    Thread Starter WebMan Design | Oliver Juhas

    (@webmandesign)

    Hi Munir,

    Thanks for update! I’ll check it out ASAP and let you know.

    Regards,

    Oliver

Viewing 6 replies - 1 through 6 (of 6 total)
  • The topic ‘SUGGESTION: Some ideas’ is closed to new replies.