Skip to content

Update cover image markup and CSS#3444

Merged
jasmussen merged 6 commits intoWordPress:masterfrom
samikeijonen:update/cover-image
Mar 13, 2018
Merged

Update cover image markup and CSS#3444
jasmussen merged 6 commits intoWordPress:masterfrom
samikeijonen:update/cover-image

Conversation

@samikeijonen
Copy link
Copy Markdown
Contributor

@samikeijonen samikeijonen commented Nov 12, 2017

Description

Update cover image markup and CSS discussed in #2902.

How Has This Been Tested?

  • Tested with default themes and random .org themes.
  • Running npm test gives error. I can't seem to track down why? It's about "isValid": false,.
 File 'core__cover-image.json' does not match expected value:

    expect(received).toEqual(expected)

    Expected value to equal:
      [{"attributes": {"dimRatio": 50, "hasParallax": false, "title": ["Guten Berg!"], "url": "https://cldup.com/uuUqE_dXzy.jpg"}, "isValid": true, "name": "core/cover-image", "originalContent": "<div class=\"wp-block-cover-image has-background-dim-50 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">
        <p class=\"wp-block-cover-image-text\">Guten Berg!</p>
    </div>", "uid": "_uid_0"}]
    Received:
      [{"attributes": {"dimRatio": 50, "hasParallax": false, "title": ["Guten Berg!"], "url": "https://cldup.com/uuUqE_dXzy.jpg"}, "isValid": false, "name": "core/cover-image", "originalContent": "<div class=\"wp-block-cover-image has-background-dim-50 has-background-dim\" style=\"background-image:url(https://cldup.com/uuUqE_dXzy.jpg)\">
        <p class=\"wp-block-cover-image-text\">Guten Berg!</p>
    </div>", "uid": "_uid_0"}]

    Difference:

    - Expected
    + Received

    @@ -6,11 +6,11 @@
            "title": Array [
              "Guten Berg!",
            ],
            "url": "https://cldup.com/uuUqE_dXzy.jpg",
          },
    -     "isValid": true,
    +     "isValid": false,

Screenshots (jpeg or gifs if applicable):

Types of changes

  • Change <section> to <div>.
  • Change hardcoded <h2> to <p>.
  • Add class <p class="wp-block-cover-image-text">. This was mainly for easier styling in the editor.
  • Note that I don't how to correctly add class wp-block-cover-image-text. I have now added it like this: <p className={ classnames( 'wp-block-cover-image-text' ) }>

Checklist:

  • My code is tested.
  • My code follows the WordPress code style.
  • My code follows has proper inline documentation.

Loading
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants