Skip to content
This repository was archived by the owner on Feb 21, 2024. It is now read-only.

Add new image blocks that contain the updated markup from core #9

Open
skorasaurus wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add new image blocks that contain the updated markup from core #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
79936e5
update composer dependencies/packages for php 7 compatibility
skorasaurus Sep 27, 2021
fee185f
update block attributes used on pull quote block
skorasaurus Sep 27, 2021
4e0d0b7
Merge branch 'pullquotes' into cpl
skorasaurus Sep 27, 2021
46819ca
Merge branch '2021-composer-updates' into cpl
skorasaurus Sep 27, 2021
5b5e884
add additional examples, updated markup for image blocks
skorasaurus Sep 28, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
56 changes: 35 additions & 21 deletions class-block-unit-test.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -581,13 +581,16 @@ public function content() {
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Here is an example of the core pull quote block, set to display centered. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<p>Here is an example of the core pull quote block; displays in the center by default. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"center"} -->
<blockquote class="wp-block-pullquote aligncenter">
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere est at lobortis.</p><cite>Rich Tabor, ThemeBeans.com</cite></blockquote>
<!-- wp:pullquote -->
<figure class="wp-block-pullquote"><blockquote><p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere est at lobortis.</p><cite>Rich Tabor, ThemeBeans.com/cite&gt;</cite></blockquote></figure>
<!-- /wp:pullquote -->
';

if ( get_theme_support( 'align-wide' ) ) {
$content .= '

<!-- wp:heading {"level":3} -->
<h3>' . esc_html__( 'Wide aligned', '@@textdomain' ) . '</h3>
Expand All @@ -596,14 +599,10 @@ public function content() {
<!-- wp:paragraph -->
<p>Here is an example of the core pull quote block, set to display with the wide-aligned attribute, if the theme allows it. Nulla vitae elit libero, a pharetra augue. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
<!-- /wp:paragraph -->
';

if ( get_theme_support( 'align-wide' ) ) {
$content .= '
<!-- wp:pullquote {"align":"wide"} -->
<blockquote class="wp-block-pullquote alignwide">
<p>Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed ibendum nulla sed consectetur. </p><cite>Rich Tabor, Founder at ThemeBeans.com</cite></blockquote>
<!-- /wp:pullquote -->
<!-- wp:pullquote {"align":"wide"} -->
<figure class="wp-block-pullquote alignwide"><blockquote><p>Nulla vitae elit libero, a pharetra augue. Vestibulum id ligula porta felis euismod semper. Aenean lacinia bibendum nulla sed ibendum nulla sed consectetur.</p><cite>Rich Tabor</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:heading {"level":3} -->
<h3>' . esc_html__( 'Full width', '@@textdomain' ) . '</h3>
Expand All @@ -614,8 +613,7 @@ public function content() {
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"full"} -->
<blockquote class="wp-block-pullquote alignfull">
<p>Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. </p><cite>Rich Tabor, Founder at ThemeBeans.com</cite></blockquote>
<figure class="wp-block-pullquote alignfull"><blockquote><p>Etiam porta sem malesuada magna mollis euismod. Sed posuere consectetur est at lobortis. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus</p><cite>Rich Tabor, founder at Themebeans.com</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
Expand All @@ -626,17 +624,16 @@ public function content() {

$content .= '
<!-- wp:pullquote {"align":"left"} -->
<blockquote class="wp-block-pullquote alignleft">
<p>Here we have a left-aligned pullquote.</p><cite>Rich Tabor</cite></blockquote>
<figure class="wp-block-pullquote alignleft"><blockquote><p>Here is a pull quote whose container is left-aligned. </p><cite>Rich Tabor</cite></blockquote></figure>
<!-- /wp:pullquote -->


<!-- wp:paragraph -->
<p>Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras mattis consectetur purus sit amet fermentum. Vestibulum id ligula porta felis euismod semper.</p>
<!-- /wp:paragraph -->

<!-- wp:pullquote {"align":"right"} -->
<blockquote class="wp-block-pullquote alignright">
<p>Here we have a right-aligned pullquote.</p><cite>Rich Tabor</cite></blockquote>
<figure class="wp-block-pullquote alignright"><blockquote><p>Here\'s a pull quote whose container is right-aligned. I\'m adding another line of text for effect.</p><cite>Will Skora</cite></blockquote></figure>
<!-- /wp:pullquote -->

<!-- wp:paragraph -->
Expand All @@ -648,7 +645,7 @@ public function content() {
<!-- /wp:separator -->

<!-- wp:heading {"level":2} -->
<h2>Image Block</h2>
<h2>Image Blocks</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
Expand All @@ -661,9 +658,13 @@ public function content() {

<!-- wp:image {"id":2117,"align":"center"} -->
<figure class="wp-block-image aligncenter"><img src="' . esc_url( $this->url . '/placeholder.jpg' ) . '" alt="" class="wp-image-2117" />
<figcaption>And an image with a caption</figcaption>
<figcaption>A caption, features older block markup circa 2019.</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:image {"align":"center","id":13,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="aligncenter size-full"><img src="' . esc_url( $this->url . '/placeholder.jpg' ) . '" alt="" class="wp-image-13"/><figcaption>Center aligned; image block markup from Gutenberg 11.5</figcaption></figure></div>
<!-- /wp:image -->
';

if ( get_theme_support( 'align-wide' ) ) {
Expand Down Expand Up @@ -698,15 +699,28 @@ public function content() {
<!-- /wp:image -->

<!-- wp:paragraph -->
<p><strong>Left aligned:</strong> dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
<p>Image block with left alignment and markup as of Gutenberg 11.5 (Mid 2021) immediately follows this paragraph block.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"left","id":13,"sizeSlug":"medium","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="alignleft size-medium"><img src="' . esc_url( $this->url . '/placeholder.jpg' ) . '" alt="" class="wp-image-13"/></figure></div>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>dimentum nibh, ut fermentum massa justo sit amet risus. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2117,"align":"right","width":281,"height":200} -->
<figure class="wp-block-image alignright is-resized"><img src="' . esc_url( $this->url . '/placeholder.jpg' ) . '" alt="" class="wp-image-2117" width="281" height="200" />
<figcaption>This one is captioned</figcaption>
<figcaption>Image block, right aligned, block markup circa 2019.</figcaption>
</figure>
<!-- /wp:image -->

<!-- wp:image {"align":"right","id":15,"sizeSlug":"full","linkDestination":"none"} -->
<div class="wp-block-image"><figure class="alignright size-full"><img src="' . esc_url( $this->url . '/placeholder.jpg' ) . '"alt="" class="wp-image-15"/><figcaption>Image block, right aligned with block markup as of Gutenberg 11.5</figcaption></figure></div>
<!-- /wp:image -->


<!-- wp:paragraph -->
<p>Nullam quis risus eget urna mollis ornare vel eu leo. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Maecenas faucibus mollis interdum. Vestibulum id ligula porta felis euismod semper. Nullam quis risus.</p>
<!-- /wp:paragraph -->
Expand Down
10 changes: 5 additions & 5 deletions composer.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,20 +2,20 @@
"name": "godaddy-wordpress/block-unit-test",
"license": "GPL-2.0-only",
"require": {
"php": ">=5.6"
"php": ">=7.2"
},
"config": {
"platform": {
"php": "5.6"
"php": "7.3"
}
},
"scripts": {
"lint": "@php ./vendor/bin/phpcs"
},
"require-dev": {
"squizlabs/php_codesniffer": "^3.5",
"dealerdirect/phpcodesniffer-composer-installer": "^0.5.0",
"phpcompatibility/phpcompatibility-wp": "^2.1",
"wp-coding-standards/wpcs": "^2.1"
"dealerdirect/phpcodesniffer-composer-installer": "^0.7",
"phpcompatibility/phpcompatibility-wp": "^2.1.2",
"wp-coding-standards/wpcs": "^2.3"
}
}
99 changes: 63 additions & 36 deletions composer.lock
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.