Create a FacebookTextContainer component

[andizer]

The FacebookTextContainer should contain the following components:

• FacebookSiteName (Create a FacebookSiteName component yoast-components#807) (and FacebookAuthorName (Create a FacebookAuthorName component #42))
• FacebookTitle (Create a FacebookTitle component #40)
• FacebookDescription (Create a FacebookDescription component #41)

Depending on the image type the container should have the following dimensions:

• Landscape:
  • width: 500px. Height depends on the title and description, this needs a decision. It is probably 46px.
• Square mode:
  • width: 318px and height: 136px
• Portait:
  • width: 318px and height: 215px

Styling

The component should have the following CSS props:

   background-color: #F2F3F5;
    border-bottom: 1px solid #dddfe2;
    margin: 0;
    padding: 10px 12px;
    position: relative;

The portrait/square modus will have the following rules:

    border-top: 1px solid #dddfe2;

Inner container

The component should have a 'inner container'.

When the Preview is in portrait or square mode the css the inner container has to following props:

    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 136px;
    font-size: 12px;
   margin: 0;

When its landscape the inner container has the following CSS props:

    max-height: 190px;

FacebookSiteName and the FacebookAuthorName

The FacebookSiteName and the FacebookAuthorName components must be wrapped in a div with the following CSS rules:

   color: #606770;
    flex-shrink: 0;
    font-size: 12px;
    line-height: 16px;
    overflow: hidden;
    padding: 0;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;

When the view is landscape it should have the following CSS specs:

    position: relative;

For the square/portrait it should have:

   position: static;

FacebookTitle and FacebookDescription

Sidenotes about the length of the title and description

There is something vague about the title. Facebook has no description about the max length. When the title is long it will be shown on multiple lines (mostly 2 lines). When this is the case the description will be (probably) shortened.

When the title is short (1 line) in most cases the description will be longer. There is no documentation about this behaviour (it's my own observation)

Wrapping in a div

The FacebookTitle and FacebookDescription components should be wrapped in a div. This div should have the following CSS specs when in portrait mode:

    max-height: 46px;
    overflow: hidden;

How its been build in Facebook:

<container>
     <subcontainer>
         <div>Sitenaam | author</div>
         <textcontainer>
             <title></title>
             <description></description>
         </textcontainer>
     </subcontainer>
<container>

The description is always rendered, but might become invisible because of an overflow:hidden

For the FacebookTitle and FacebookDescription we have to create a container that is placed in a 'textcontainer'

Examples:

Portrait modus. Container with text has a width of 318px. Blurred most of it because I used a random search result of a portrait image

Square mode. Container with text has a width of 318px and a height of 136px

With no image the description seems to be longer

Parent #47

Parent of Yoast/yoast-components#807
Parent of #42
Parent of #41
Parent of #40

To do

• Create the TextContainer
• Create the subcontainer, containing the TextContainer and the combined site name and author.
• If possible, combine the subcontainer with the outer container into one container.
• If you know better names, be my guest :)
• Write tests

[afercia]

Seems to me Facebook does truncate the title and shows just two lines:

I've only tested it editing the markup in the browser, so it should be tested better with a real post with a very long title. However, seems to me the ellipsis aren't added via CSS. I suspect there's some JavaScript involved.
Ahhh, they use the non-standard -webkit-line-clamp: 2; (not supported in all browsers and unlikely will be).

[GuidoOffermans]

There was some overlapping problems so they were handled and closed in #45 .