Copy / Paste error core/paragraph using InnerBlocks

[fishstix81]

Describe the bug
Using InnerBlocks with a nested block template, you can not copy / paste inside of the core/paragraph block. It results in a console error and the text is not copied into the block

Uncaught TypeError: r is not a function
    at t.value (index.js?ver=1542840426:formatted:830)
    at t.value (index.js?ver=1542840430:formatted:11004)
    at Object.Fg (react-dom.min.713f0afa.js:formatted:4357)
    at Eg (react-dom.min.713f0afa.js:formatted:42)
    at Hg (react-dom.min.713f0afa.js:formatted:45)
    at ae (react-dom.min.713f0afa.js:formatted:96)
    at Ig (react-dom.min.713f0afa.js:formatted:4390)
    at Hc (react-dom.min.713f0afa.js:formatted:113)
    at Jc (react-dom.min.713f0afa.js:formatted:150)
    at gh (react-dom.min.713f0afa.js:formatted:872)

core/heading works fine. If I begin typing in the core/paragraph and then copy / paste, the new text is added without the console error.

To Reproduce
Add a custom block that uses InnerBlocks with a template that includes core/pargraph. Something like

[core/column, {}, [
  [core/paragraph, {}]
]]

Expected behavior
core/paragraph should not have issues with copy / paste when used inside of a nested block

Desktop (please complete the following information):

• OS: OsMojave
• Browser chrom

Additional context
Gutenberg version 4.5.0

[pokhiii]

This is exactly the issue I'm facing right now.

@squibbleFish Were you able to resolve this? Looks like this.props.onReplace is undefined when the string is empty.

[dannymcgee]

Having the same issue in WordPress 5.1.1. No resolution yet...

[pokhiii]

@youknowriad @aduth @ellatrix Could you guys please do something about this bug?

[dannymcgee]

In my case, it seems that removing templateLock="all" from the InnerBlocks component fixed the problem. I noticed that some other custom nested blocks I had didn't have this issue, so decided to give that a shot and it seems to be the culprit.

I've worked around the limitation by using CSS in the block's editor stylesheet to hide all of the controls that would allow the user to move blocks around or insert new ones. Not ideal, obviously, but works for me for now.

Edit for clarity:
In the return value of my script's edit function:

<div className="slide-content">
  <InnerBlocks
    template={[
      ['core/heading', { placeholder: 'Slide heading...', level: 2, className: 'slide-title' }],
      ['core/paragraph', { placeholder: 'Slide content...', className: 'slide-text' }],
      ['custom/button', { text: 'Read More', btnClass: 'btn-filled', className: 'btn-lg' }]
    ]}
    // templateLock="all"
  />
</div>

And in the SASS file that produces the editor CSS:

.slide-content {
  .editor-block-list__insertion-point,
  .editor-block-mover,
  .editor-default-block-appender {
    display: none !important;
  }
}

[aduth]

@jorgefilipecosta Given the relation to templateLock, do you have a sense whether #14003 might resolve this?

[jorgefilipecosta]

Hi @aduth,
I don't think #14003 will solve this problem right away.
#14003 ignores an action if it is not allowed. Here it looks like the bug is that when we have templateLock a block replacement function is not passed somewhere and that function is called anyway e.g: to perform a replace during a copy paste.
I think with #14003 in we can simply pass the function anyway knowing that even if dispatches an action, the action is ignored if not allowed. I will explore this option.