Add simple code block #826
Conversation
|
|
Any good demo content for a code block? |
|
I usually look for gems here: http://codecrap.com/content/best/ ;) |
|
Haha, that's good too :) Wasn't sure if we need anything that fits with the current content. Maybe even something about creating blocks... Anyway, that can be a separate PR. |
|
It could be the markup of the block itself. Wouldn't that be cool? |
|
Okay, white space is stripped because TinyMCE will not set the raw content on load, but parse it. Normally whitespace is preserved in PRE, but in this case it's the root element. A bug I guess. Not sure how to fix it other than the current fix. |
|
Really really cool, I dig it! Colors look good too. Like for the pre block, let's zero out the margin and use the intrinsic padding for spacing between blocks instead. Let's also use $editor-html-font for the font. It's a nice stack. Also looks like the padding optically appears taller above and below the content inside. I can make these changes in your branch if you like? Just let me know. |
|
@jasmussen Please do! :) |
|
Done! Spiffied it up a bit. |
blocks/library/code/index.js
Outdated
|
|
||
| edit( { attributes, setAttributes, focus, setFocus } ) { | ||
| return ( | ||
| <Editable |
There was a problem hiding this comment.
Does this need to be an Editable, or would a controlled textarea work just as well? Since we're not using any formatting features. Or at least we don't show the formatting toolbar, but Cmd-B still bolds text, which seems unexpected.
There was a problem hiding this comment.
That's a good point. I guess we do not. :)
There was a problem hiding this comment.
One annoying thing will be auto resizing it.
There was a problem hiding this comment.
We've pulled in react-autosize-textarea for the Text mode. We can probably use that here as well.
There was a problem hiding this comment.
I'm unsure how do handle focus without complicating it a lot.
There was a problem hiding this comment.
I'm unsure how do handle focus without complicating it a lot.
Can you explain the problem you're encountering?
There was a problem hiding this comment.
I guess we don't have to pass a focus object. Just noticing that the texture is not focussing immediately on click.
ellatrix
force-pushed
the
add/code-block
branch
2 times, most recently
from
3ae8ed0
to
9848bb0
Compare
|
Looks and works real well. Tiny niggle: looks like there's an extra linebreak in the post-content.js:
;) |
| edit( { attributes, setAttributes, setFocus } ) { | ||
| return ( | ||
| <TextareaAutosize | ||
| defaultValue={ attributes.content } |
There was a problem hiding this comment.
I think this could have been value= instead to treat the input as a controlled component, ensuring that if, for whatever reason, the value were assigned explicitly, the textarea would be updated to reflect it.
There was a problem hiding this comment.
Ah, I tried value but got some issues. Will try again.
|
What happens if we try to write |
|
@dmsnell It will be encoded? |
|
Would like to ask if you could add background-color for code block in backend ? And if you can style "pre" tag the same as "div[data-type="core/code"] textarea". For backward compability when people remove syntax plugins, or similar. |
|
@StaggerLeee that's a great point. May I kindly ask that you open this suggestion as a separate, new, ticket? |
|
Is it possible to take over old TinyMce blocks with Detect opening and closing tags and make one new Gutenberg (code) block of it ? Right now they are shown as simple text, not inside block(s). Making converting to Gutenberg almost impossible for any website dealing with code snippets for years. |
See #516.