How to assign iframe url query param value for React Gutenberg attribute

Question

I am developing a custom Gutenberg block. I take a few inputs (title, button text, etc) and an iframe gets displayed. The values of these attributes are query params in iframe's url. When I try to edit that block, I am trying to pull these values from that iframe, but I keep failing. My plan B is to save an invisible div with these values, or pass some data attributes to iframe and then get values back that way, because I don't know how to parse src for query params.

registerBlockType('box-card/conversion-boxes', {   
  title: 'Conversion boxes',
  icon: 'nametag',
  category: 'common',
  attributes: {
    title: {
      source: 'attribute',
      selector: 'iframe',
      attribute: 'src'
    },
    button: {
      source: 'attribute',
      selector: 'iframe',
      attribute: 'src'
    },
  }

What my src looks like is:

src="/modularconvbox/modularconvbox.php?type=newsletter&title=test-title&button=test-button"

How do I retrieve the correct values for title and button in React? Any ideas?

score 0 · Answer 1 · answered Jul 13 '18 at 10:13

I've actually found that it works this way:

registerBlockType('box-card/conversion-boxes', {   
  title: 'Conversion boxes',
  icon: 'nametag',
  category: 'common',
  attributes: {
    title: {
      type="text",
      selector: '.class1'
    },
    button: {
      type="text",
      selector: '.class2'
    },
  }

As long as you don't use selector, it works the same with saving an iframe as any other block.

And then you use this in edit function:

<PlainText
  onChange={ content => setAttributes({ title: content }) }
  value={ attributes.title }
  placeholder="Conversion box title"
  className="class1"
/>

<PlainText
  onChange={ content => setAttributes({ button: content }) }
  value={ attributes.button }
  placeholder="Conversion box button text"
  className="class2"
/>

How to assign iframe url query param value for React Gutenberg attribute

1 Answers1