@mentor-medier/article-body-block

@wpmedia/article-body-block

Fusion News Theme article-body block

// TODO: add badge for passing/failing tests

Acceptance Criteria

• Add AC relevant to the block

Props

Prop	Required	Type	Description
required prop	yes
optional prop	no

ANS Schema

ANS fields

• Add all ANS fields used in the block

Internationalization fields

• Add all internationalization fields used in the block

Phrase key	Default (English)
global.gallery-expand-button	Expand
global.gallery-autoplay-button	%{current} of %{total}
global.gallery-pause-autoplay-button	Autoplay
global.gallery-page-count-text	Pause autoplay

Events

Blocks can emit events. The following is a list of events that are emitted by this block.

Event Name	Description
eventName	Describe the event

Event Listening

Include block specific instructions for event listening.

OR

This block does not emit any events.

Additional Considerations

ANS fields

• content_elements
• content_elements[x].type Check how many paragraphs included
• content_elements[x].content Creates article body with included content

{

  content_elements: [
    {
      type: 'text',
      _id: "123",
      type: "text",
      content: "<h1>this is my first paragraph</h1>"
    },
    {
      type: 'not text'
    }
  ]
}

Example ANS Schema

{
  "_id": "unique ANS id",
  "type": "story",
  "version": "0.10.1",
  "created_date": "2015-06-24T09:50:50.52Z",
  "last_updated_date": "2015-06-24T09:50:50.52Z",
  "credits": {
    "by": [
      {
        "type": "reference",

        "referent": {
          "type": "author",
          "service": "http://www.credits.com/api",
          "provider": "http://www.credits.com/api",
          "id": "00001"
        }
      }
    ],
    "additional reporting by": [
      {
        "type": "author",
        "version": "0.10.1",
        "name": "Greg Engel",
        "byline": "Greggo"
      }
    ]
  },

  "language": "en",

  "location": "Washington, D.C.",

  "geo": {
    "latitude": 38.9047,
    "longitude": -77.0164
  },

  "address": {
    "street_address": "1600 Pennsylvania Ave",
    "extended_address": "West Wing",
    "locality": "Washington",
    "region": "D.C.",
    "postal_code": "20002",
    "country_name": "USA"
  },

  "copyright": "(c) 2015 The Washington Post, Inc.",

  "canonical_url": "http://www.washingtonpost.com/local/anesthesiologist-trashes-sedated-patient-jury-orders-her-to-pay-500000/2015/06/23/cae05c00-18f3-11e5-ab92-c75ae6ab94b5_story.html",

  "short_url": "http://wapo.st/1Crp6bY",

  "headlines": {
    "basic": "The basic headline for this story",
    "twitter": "Twitter headline!"
  },

  "description": {
    "basic": "A Vienna man went in for a colonoscopy and intended to record his doctor"
  },

  "related_content": {
    "basic": [
      {
        "_id": "some other unique ANS id",
        "type": "story",
        "version": "0.10.1"
      },
      {
        "type": "reference",
        "referent": {
          "id": "1",
          "type": "image",
          "service": "",
          "provider": ""
        }
      }
    ]
  },

  "promo_items": {
    "basic": {
      "_id": "unique ANS id",
      "type": "image",
      "version": "0.10.1",
      "created_date": "2015-06-25T09:50:50.52Z",
      "credits": {
        "by": [
          {
            "name": "Ansel Adams",
            "byline": "Ansel Adams",
            "type": "author",
            "version": "0.10.1"
          }
        ]
      },
      "url": "https://tinyurl.com/mqyonhb",
      "caption": "Never gonna give you up",
      "subtitle": "Never gonna let you down",
      "width": 800,
      "height": 640
    },
    "second": {
      "type": "reference",
      "referent": {
        "type": "image",
        "id": "1",
        "service": "",
        "provider": ""
      }
    }
  },

  "taxonomy": {
    "keywords": [
      {
        "keyword": "Anesthesiologist",
        "score": 0.77,
        "frequency": 2
      }
    ],
    "primary_site": {
      "type": "reference",
      "referent": {
        "id": "news",
        "provider": "https://sites.arcpublishing.com/api",
        "type": "site"
      }
    },
    "sites": [
      {
        "type": "site",
        "name": "Cool Site",
        "version": "0.10.1"
      },
      {
        "type": "reference",
        "referent": {
          "id": "78",
          "provider": "https://sites.arcpublishing.com/api",
          "type": "site"
        }
      }
    ]
  },

  "publish_date": "2015-06-24T09:49:00.10Z",

  "status": "published",

  "display_date": "2015-06-25T09:50:50.52Z",

  "editor_note": "This URL earlier linked to a post that we’ve unpublished due to its flawed premise.",
  
  "content_elements": [
    {
      "_id": "123",
      "type": "text",
      "content": "<h1>this is my first paragraph</h1>"

    },
    {
      "_id": "456",
      "type": "text",

      "content": "<h2>this is my second paragraph</h2>"
    },
    {
      "_id": "789",
      "type": "image",
      "version": "0.10.1",

      "created_date": "2015-06-25T09:50:50.52Z",
      "credits": {
        "by": [
          {
            "type": "author",
            "version": "0.10.1",
            "name": "Ansel Adams",
            "byline": "Ansel Adams"
          }
        ]
      },
      "url": "https://tinyurl.com/mqyonhb",
      "caption": "Never gonna give you up",
      "subtitle": "Never gonna let you down",
      "width": 800,
      "height": 640
    },
    {
      "_id": "49876543210",
      "type": "list",
      "list_type": "unordered",

      "items": [
        {
          "_id" : "t1",
          "type" : "text",
          "content" : "Foo"

        },
        {
          "_id" : "t2",
          "type": "text",

          "content" : "Bar"
        },
        {
          "_id" : "l2",
          "type": "list",

          "list_type": "ordered",
          "items" : [
            {
              "_id": "t4",
              "type": "text",

              "content" : "Hi"
            },
            {
              "_id": "t5",
              "type": "text",

              "content" : "Mom"
            }
          ]
        }
      ]
    },
    {
      "_id": "549876543210",
      "type": "blockquote",
      "content": "<i>Here's my html</i>"

    },
    {
      "_id": "649876543210",
      "type": "raw_html",
      "content": "<iframe src=\"http://www.google.com\"></iframe>",
      "channels": ["web"]
    },
    {
        "type": "reference",

        "referent": {
          "type": "oembed",
          "provider": "https://api.twitter.com/1.1/statuses/oembed.json",
          "id": "755767310309265408"
        }
      }


  ]
}

Event Listening

When the content of an article-body contains a gallery component, the Gallery will emit events for when the next or previous image is viewed. These events are named galleryImageNext and galleryImagePrevious respectively.


If you want to listen to these events, the first thing is to import the EventEmitter object into your code:

import { EventEmitter } from '@wpmedia/engine-theme-sdk'

Then create a callback function such as:

const myGalleryImageNext = (event) => {console.log('Here is the event: ', event);}
const myGalleryImagePrevious = (event) => {console.log('Here is the event: ', event);}

Then use you use your callback in subscribing to the event:

EventEmitter.subscribe('galleryImageNext', (event) => myGalleryImageNext(event)); EventEmitter.subscribe('galleryImagePrevious', (event) => myGalleryImagePrevious(event));

The event object for these events will contain the following information:

eventName (String): The event name fired. In this case could be either galleryImageNext or galleryImagePrevious.
ansGalleryId (String): The id of the gallery.
ansGalleryHeadline (String): The headline for the gallery.
ansImageId (String): The id for the current image.
caption (String): The caption for the current image.
orderPosition (Number): The position in the carousel for the current image.
totalImages (Number): Total number of images in the carousel.
autoplay (boolean): whether or not the event triggered during autoplay. Value is either true or false.