Block supports Pingrow editor

General Questions
1

Hi there,

Pinegrow is amazing! I would like to ask is there a way to extend pinegrow Wordpress block support options in “Block Supports? And if so is it where you would need your input or us or you have a snippet that would allow us to do it:

Pinegrow does support some “block support” options such as multiple false, alignment colour, background, and few more options, although there are much more support options available in core and they are out of the beta.

Whilst I understand some people tend to predefine block styles either with they own design system or a library, it would be great to know if we could add supports spacing:margin, padding, blockGap aria labels and etc. So it would be predefined experience via theme.json for spacing and etc.

When creating a block via pinegrow and manually overriding support option in php & js after block creation it does work and adds all required controlls & gets data from theme.json - although is there a native way in pinegrow to add those support options so on export those controllers would be available and we would not need to manually override those supports in js and php of a block.

I understand that some controlls/ block support might be still in beta, thus it would not be great adding those to pinegrow, although, perhaps it’s possible to have a way to add some type markup in pinegrow “block supports” that would convert it to the required markup in the php and js of a block:

Example would be

As we have an example for multiple=false

Spacing or other elements that do have array perhaps could follow similar structure

Spacing:margin=true or just margin=true , padding=true and etc

If someone already has achieved this and figured it out and willing to share - it would be great!

2

Thanks @Bear!

On our end, it is a manual process to add supports to Block action. So, at the moment, there is no way to make this dynamic. That said, just list the supports that your would like to see here (and are suitable for the use case of custom blocks) and I’ll add them.

1 Like
3

@matjaz hi there! Thanks so much for the reply!

I will go through the block supports and perhaps few git issues will provide a list hopefully that will be sustainable! Thank you so much!

Have a great day!

1 Like
4

@matjaz Thank you again so much for this opportunity! (P.S. updated card details in subscription to of course continuing using pinegrow!!! <3)

I am still writing it & hopefully to finalise it shortly!

5

Hi there again @matjaz !

I could make it short and ask “add it all” but I want to make sure others see it and if I say something that does not make sense - join the conversation!

As it seems, based on overview - all experimental options are no longer added to core & block supports page! https://make.wordpress.org/core/2022/08/10/proposal-stop-merging-experimental-apis-from-gutenberg-to-wordpress-core/

Everything below are purely my thoughts & research.

Summary:

Thanks Pinegrow team & Matiaz for this amazing product a true visual builder!

Is it possible to add support for(order is irrelevant as it is the same as on supports page, the ones I really fancy are marked in bold) I understand that this might be a whole “release worth” of work - thus I am I not expecting it:

alignWide - “alignWide=false”
dimensions - “minHeight=true” or “minHeightControl=true”
html - “html=false”
layout - yes please - notes are below
spacing - “padding=true”, “margin=true”, “blockGap=true” or “paddingControl=true”, “marginControl=true”, “blockGapControl=true”.
“lineHeight=true” or “fontLineHeight=True”

Current state of block support in Gutenberg & Pinegrow viewed:

/** Anchor Options - Perfect!

anchor - In Pinegrow - perfect! Not much to say here :slight_smile:

/** Block Align Options - polite request to add “alignWide=false”?

align - In Pinegrow - its perfect!
alignWide - “In Pinegrow” - one option could be provided is “alignWide=false” - as in certain cases block does not require to be aligned full width. This could be added as supported entry. As it allows creators to limit the block options when the block should not leave the specified contentWidth this would prevent of css requirements of “Max-width” and etc. This is supported and out of experimental long time ago.

Polite request: Is it possible to add “alignWide=false”?

/** Aria label Options - No change is required(personal opinion)

ariaLabel - Not in Pinegrow - and as of this moment - Personally(do not speak for all) should not be added - as according to w3 and others - its better to have no aria label than a bad aria label - Read Me First | APG | WAI | W3C - it would perhaps create more confusion and mess for the end user. Finally one who develops should carefully consider all aria labels & user interactions to build accessible structure that would be either accessible by default or would be further enhanced with interactivity & JS. (Thanks to Adam Lowe for constantly covering Pinegrow & accessibility challenges)

/** Class name Options - No change is required(personal opinion)

className - In Pinegrow and we have className=False - Perfect!
customClassName - Hugely debatable - and I would believe it would not be the best practice to set this as false - just in case - if a person needs to set a quick class for their block. Although if it would be applied it would be customClassName=false. In my personal opinion and instance - and hopefully many - I believe it would not be useful to add this. Furthermore it is hidden behind “Advanced settings”.

/** Color Options - Perfect - Nothing to add here!

color
color.background - In Pinegrow
color.gradients - In Pinegrow
color.link - In Pinegrow
color.text - In Pinegrow

/** Default Block style Options

defaultStylePicker - No change is required(personal opinion)

If we decide to add more style options via theme.json - it a great option to have - else wise we can always create custom attribute options to swap classes in css and create a custom Pinegrow dropdown.

/** Default Dimension Options - polite request to add “minHeight=true” or “minHeightControl=true” to be more specific?

dimensions - as of this moment the one option that is available & stable is minHeight - It would be great option to add - specifically if someone creates a slider block - or any other wrapper block that requires a min height. As it is not added to each block and for a reason - I do believe that intrinsic design should prevail.

/** Default filter Options - No change is required(personal opinion)

{ filter & filter.duotone } - Whilst its great what they are trying to add to the core - this is a questionable controller as of now - and I believe it should not be added as of now. Although if anyone believe its should be added duotone=true?

/** Default html - polite request to add “html=false”?

html - This one hopefully could be added as supported option to make sure that nosy person does not click on html option and edits something that was not intended. This setting is specifically for end user.

/** Inserter Options - No change is required(personal opinion)

inserter - we do have controls as inner blocks, parent and etc - thus I believe it should be sufficient.

/** Layout Options - polite request to add - these - I could go into each of these - although not sure how it should be added to Pinegrow - as this would potentially allow us to create so many different type of blocks, sliders carousels and some many more options. Although I would need more help on wrapping my head on how to label them in Pinegrow without cluttering it and potentially adding a docs page explaining how to use it. This would be powerfull settings for so many blocks - but again this is just my opintion. Why it would be so powerful? Well simple classes could be written to modify this blocks layout to anything you want.

layout
layout.default
layout.allowSwitching
layout.allowEditing
layout.allowInheriting
layout.allowSizingOnChildren
layout.allowVerticalAlignment
layout.allowJustification
layout.allowOrientation
layout.allowCustomContentAndWideSize

/** Multiple Options - its perfect!

multiple - In Pinegrow

/** Reusable Options - No change is required(personal opinion)

reusable - Not quite sure if block should not be converted to reusable - maybe someone can share why?

/** Lock Options - No change is required(personal opinion)

lock - I believe it should be left as default - user can lock it. Although we can always easily control via php if user can unlock something - it’s better to restrict in this situation than disallow to lock.

/** Position Options - No change is required(personal opinion)

position - I believe its still the best to leave positions to as they are - as currently there’s one position “sticy” - again - it would be potentially viable for dynamic block such as sticky table of contents with scrollspy or something. If it would be applied perhaps it would be “position=true” or “positionController=true”

/** Spacing Options - polite request to add “padding=true”, “margin=true”, “blockGap=true” or “paddingControl=true”, “marginControl=true”, “blockGapControl=true”.

spacing - spacing can be vital specifically when creating multiple synced patterns or just patterns - where same block could have multiple different looks - and it could be easily changed from within the blocks. In addition it would be great addition to the wrapper blocks(as currently if we want to have these controls we need to add inner group block initially adding Dom depth). Reason why initially I’ve mentioned spacing in my post is that spacing is one of the largest options for controlling the layout - https://every-layout.dev/

/** Typography Options - polite request to add “lineHeight=True” - a great addition for custom quote block & clamp sizing taken from the theme.json

typography
typography.fontSize
typography.lineHeight

1 Like
6

Thanks @Bear that is really detailed!

I’m trying to find an repeatable and maintainable process for keeping the list of options up to date. So, I asked Mr. Pine Cone to inspect the WP doc page and update the array of options.

The result is:

[
    {key: 'anchor', name: 'Anchor', html: 'Anchor - link directly to a block'},
    {key: 'align', name: 'Align', html: 'Align - change block’s alignment'},
    {key: 'alignWide=false', name: 'alignWide=false', html: 'alignWide=false - disable wide alignment'},
    {key: 'ariaLabel', name: 'ARIA label', html: 'ARIA label - define accessible label'},
    {key: 'className=false', name: 'className=false', html: 'className=false - disable auto class'},
    {key: 'color.background=false', name: 'Background color=false', html: 'Background color=false - disable background color'},
    {key: 'color.gradients', name: 'Gradients', html: 'Gradients - enable gradient background'},
    {key: 'color.link', name: 'Link color', html: 'Link color - enable link color'},
    {key: 'color.text=false', name: 'Text color=false', html: 'Text color=false - disable text color'},
    {key: 'customClassName=false', name: 'customClassName=false', html: 'customClassName=false - disable custom class name'},
    {key: 'defaultStylePicker=false', name: 'defaultStylePicker=false', html: 'defaultStylePicker=false - remove default style picker'},
    {key: 'dimensions.minHeight', name: 'Min height', html: 'Min height - enable min height control'},
    {key: 'filter.duotone', name: 'Duotone', html: 'Duotone - enable duotone filter'},
    {key: 'html=false', name: 'html=false', html: 'html=false - disable HTML editing'},
    {key: 'inserter=false', name: 'inserter=false', html: 'inserter=false - hide block from inserter'},
    {key: 'layout.allowSwitching', name: 'Allow layout switching', html: 'Allow layout switching - toggle between layout types'},
    {key: 'layout.allowEditing=false', name: 'layout.allowEditing=false', html: 'layout.allowEditing=false - hide layout controls'},
    {key: 'layout.allowInheriting=false', name: 'layout.allowInheriting=false', html: 'layout.allowInheriting=false - disable inheriting layout'},
    {key: 'layout.allowSizingOnChildren', name: 'Allow sizing on children', html: 'Allow sizing on children - enable sizing controls on child blocks'},
    {key: 'layout.allowVerticalAlignment=false', name: 'layout.allowVerticalAlignment=false', html: 'layout.allowVerticalAlignment=false - disable vertical alignment'},
    {key: 'layout.allowJustification=false', name: 'layout.allowJustification=false', html: 'layout.allowJustification=false - disable justification control'},
    {key: 'layout.allowOrientation=false', name: 'layout.allowOrientation=false', html: 'layout.allowOrientation=false - disable orientation control'},
    {key: 'layout.allowCustomContentAndWideSize=false', name: 'layout.allowCustomContentAndWideSize=false', html: 'layout.allowCustomContentAndWideSize=false - disable custom content and wide size'},
    {key: 'multiple=false', name: 'multiple=false', html: 'multiple=false - use block only once per post'},
    {key: 'reusable=false', name: 'reusable=false', html: 'reusable=false - prevent conversion to reusable block'},
    {key: 'lock=false', name: 'lock=false', html: 'lock=false - remove locking UI'},
    {key: 'position.sticky', name: 'Sticky', html: 'Sticky - enable sticky position control'},
    {key: 'spacing.margin', name: 'Margin', html: 'Margin - enable margin control'},
    {key: 'spacing.padding', name: 'Padding', html: 'Padding - enable padding control'},
    {key: 'spacing.blockGap', name: 'Block gap', html: 'Block gap - enable block gap control'},
    {key: 'typography.fontSize', name: 'Font size', html: 'Font size - enable font size control'},
    {key: 'typography.lineHeight', name: 'Line height', html: 'Line height - enable line height control'}
]

Most options are included. Not sure if we should go into moderating which options should be shown and which not - that should be up to the developer. Each options has a short description.

Would this work?

4 Likes
7

Hi there @matjaz It’s perfect - thank you so much!

I do agree 100% - that it should be up to developer - and it would always allow to have most up to date core support options!

Thank you so much again!

8

Thank you soo much for this amazing update coming tomorrow - cant wait!

9

Yes amazing @matjaz

I was running into the limitations recently. So would be great that all blocks have all options under “Support”.

Thanks!

1 Like