Mini Cart Title block: add support for color and typography styles

[Aljullu]

In https://github.com/woocommerce/woocommerce-blocks/pull/8905 we made the Mini Cart title customizable. That included breaking the title into two inner blocks: Mini Cart Title Label and Mini Cart Title Items Counter. All styling options were added to the inner blocks, but we should allow merchants to customize the styles of the parent Mini Cart Title block as well.

User story

As a merchant, I want to customize the styles of the Mini Cart drawer title. I would like to do so modifying the styles of one single block, instead of having to modify the styles of two inner blocks (Mini Cart Title Label and Mini Cart Title Items Counter).

proposal initially made by @nielslange

[daniloparrajr]

Hi @Aljullu, I would like to work on this issue

[nielslange]

Hi @Aljullu, I would like to work on this issue

Go for it, @daniloparrajr! I just assigned the issue to you. 😀

If you have any questions or need any assistance, just reach out. I've also added this pattern to SMNTCS Converter Block, which is one of my personal plugins. That plugin allows to convert values between different usings. On https://github.com/nielslange/smntcs-converter-block/tree/trunk/src, you can find the main components:

• x-block: This is the parent component of the corresponding block.
• x-form: This is the inner block that shows the form of the corresponding block.
• output-block: This is the inner block that shows the result of the corresponding block.

Let's take the Area Converter Block for demonstrating purposes. The following files show how I implemented that pattern, @Aljullu was refering to, in my personal plugin:

• https://github.com/nielslange/smntcs-converter-block/blob/c9fe1b77dd3401175b553779c7b7e381e3b11f9e/src/area-block/block.json#L11-L14
• https://github.com/nielslange/smntcs-converter-block/blob/c9fe1b77dd3401175b553779c7b7e381e3b11f9e/src/area-form/block.json#L11-L14
• https://github.com/nielslange/smntcs-converter-block/blob/c9fe1b77dd3401175b553779c7b7e381e3b11f9e/src/output-block/block.json#L10-L13

Implementing this issue should be rather straight forward. That said, if you have any questions, just ask. With that in mind, happy coding! 🙌

[daniloparrajr]

Thank you @nielslange! Just curious why you have to define the background property as true even if it's the default value. Is this for readability purposes? https://developer.wordpress.org/block-editor/reference-guides/block-api/block-supports/#color

[nielslange]

Thanks for asking, @daniloparrajr. In my case, I defined the background property indeed for readability purposes.

[daniloparrajr]

Thank you @nielslange! Just for reference for my future contributions, is there any convention for naming a branch and constructing commit messages I should follow? or are those irrelevant?

[Aljullu]

Thank you @nielslange! Just for reference for my future contributions, is there any convention for naming a branch and constructing commit messages I should follow? or are those irrelevant?

We don't have any strict rules regarding branch names, and I don't think we have documented anywhere. However, we usually follow this pattern: [type]/[issue_number]-[description]. The type is usually fix, update, remove, release, etc. Then you add the issue number if there is an issue associated with that PR and a short description. Some examples: fix/9185-mini-cart-badge-count-only-when-filled or remove/products-on-sale-products-variation.

[daniloparrajr]

Thank you @Aljullu! This is very helpful. It seems pretty much the same from this source Conventional Commits so I'll review this again.