Improve code block style

[SergioEstevao]

Fixes #368

This PR improves the style of the code block by:

• Change the font to Menlo size 14pt
• Add paddings has indicated in the ticket
• Adds a border like in the web block

Gutenberg PR: WordPress/gutenberg#18785

To test:

• Open the demo app
• Create a new code block
• Edit the block and see if all looks good

Update release notes:

• If there are user facing changes, I have added an item to RELEASE-NOTES.txt.

[iamthomasbishop]

👋 Nice work, @SergioEstevao, I have updated the block blueprint - here is the latest:

• For the body background, we can use the same as the pre block
• No border
• Not sure what you've got applied here, but padding within the content area can be set to: 12px on top/bottom, 16px on left/right

Looks good to me other than those things! 👍

[SergioEstevao]

@iamthomasbishop, thanks for the feedback, one question though, if I apply your suggestion what will make it different from the pre block visually?

After you write some text they will look exactly the same in the editor, no?

[iamthomasbishop]

if I apply your suggestion what will make it different from the pre block visually?

The main diff is the background fill color. In your example the background looks white, and the block content area should have a dim color fill (one of the light grays in light mode, a dark gray in dark mode) to match the pre block style.

After you write some text they will look exactly the same in the editor, no?

In terms of the contents of the block, static and selected states look the same, just like other text-based blocks.

[koke]

Code-wise this looks good, except for one comment I left in the other PR. From what I understand this still needs some design updates, let me know when those are ready and I'll do some final testing

[SergioEstevao]

@koke design is updated to follow @iamthomasbishop recomendations, can you please give it another look?

[koke]

This is looking good. The font looks slightly different on Android, but I'm not sure how to test if it's actually Menlo

[SergioEstevao]

@koke I didn't change the font in Android, that still specifies monospace, that I'm assuming defaults to Roboto Mono.

@iamthomasbishop do we want Menlo in Android to?

[iamthomasbishop]

@SergioEstevao I was assuming we'd use Menlo on iOS (considering it's either the default or at least an available font on iOS) and fall back to the default Roboto Mono on Android. Are we able to use Menlo on Android as well?

[SergioEstevao]

@iamthomasbishop just confirmed with @maxme that for Android there is only one mono font by default and it's Roboto Mono. So we will keep that in Android and use Menlo in iOS.

So all is ok with PR and I will merge it :).

[iamthomasbishop]

Sounds good!