From 5def941eebb7a92da1c447e12a8d876fbfc2b730 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 1 Aug 2022 19:49:41 +1000
Subject: [PATCH 1/5] Add border support to post featured image block
---
.../src/post-featured-image/block.json | 12 ++++
.../src/post-featured-image/edit.js | 10 ++-
.../src/post-featured-image/index.php | 61 +++++++++++++++++--
.../src/post-featured-image/style.scss | 1 +
4 files changed, 79 insertions(+), 5 deletions(-)
diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index a0ff90808c0e81..a1c3f75aab8a2c 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -42,6 +42,18 @@
"text": false,
"background": false
},
+ "__experimentalBorder": {
+ "color": true,
+ "radius": true,
+ "width": true,
+ "__experimentalSelector": "img",
+ "__experimentalSkipSerialization": true,
+ "__experimentalDefaultControls": {
+ "color": true,
+ "radius": true,
+ "width": true
+ }
+ },
"html": false,
"spacing": {
"margin": true,
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 6ef4d0ee0a4088..4f965f667afda9 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -18,6 +18,7 @@ import {
MediaReplaceFlow,
useBlockProps,
store as blockEditorStore,
+ __experimentalUseBorderProps as useBorderProps,
} from '@wordpress/block-editor';
import { __, sprintf } from '@wordpress/i18n';
import { upload } from '@wordpress/icons';
@@ -95,6 +96,7 @@ function PostFeaturedImageDisplay( {
const blockProps = useBlockProps( {
style: { width, height },
} );
+ const borderProps = useBorderProps( attributes );
const onSelectImage = ( value ) => {
if ( value?.id ) {
@@ -165,6 +167,11 @@ function PostFeaturedImageDisplay( {
}
const label = __( 'Add a featured image' );
+ const imageStyles = {
+ ...borderProps.style,
+ height,
+ objectFit: height && scale,
+ };
if ( ! featuredImage ) {
image = (
@@ -196,6 +203,7 @@ function PostFeaturedImageDisplay( {
placeholder()
) : (
);
}
diff --git a/packages/block-library/src/post-featured-image/index.php b/packages/block-library/src/post-featured-image/index.php
index a1206f29b61222..cd4f0b0a7f9ecd 100644
--- a/packages/block-library/src/post-featured-image/index.php
+++ b/packages/block-library/src/post-featured-image/index.php
@@ -19,10 +19,15 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
}
$post_ID = $block->context['postId'];
- $is_link = isset( $attributes['isLink'] ) && $attributes['isLink'];
- $size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
- $post_title = trim( strip_tags( get_the_title( $post_ID ) ) );
- $attr = $is_link ? array( 'alt' => $post_title ) : array();
+ $is_link = isset( $attributes['isLink'] ) && $attributes['isLink'];
+ $size_slug = isset( $attributes['sizeSlug'] ) ? $attributes['sizeSlug'] : 'post-thumbnail';
+ $post_title = trim( strip_tags( get_the_title( $post_ID ) ) );
+ $attr = get_block_core_post_featured_image_border_attributes( $attributes );
+
+ if ( $is_link ) {
+ $attr['alt'] = $post_title;
+ }
+
$featured_image = get_the_post_thumbnail( $post_ID, $size_slug, $attr );
if ( ! $featured_image ) {
return '';
@@ -55,6 +60,54 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
return "$featured_image";
}
+/**
+ * Generates class names and styles to apply the border support styles for
+ * the Post Featured Image block.
+ *
+ * @param array $attributes The block attributes.
+ * @return array The border-related classnames and styles for the block.
+ */
+function get_block_core_post_featured_image_border_attributes( $attributes ) {
+ $border_styles = array();
+ $sides = array( 'top', 'right', 'bottom', 'left' );
+
+ // Border radius.
+ if ( isset( $attributes['style']['border']['radius'] ) ) {
+ $border_styles['radius'] = $attributes['style']['border']['radius'];
+ }
+
+ // Border style.
+ if ( isset( $attributes['style']['border']['style'] ) ) {
+ $border_styles['style'] = $attributes['style']['border']['style'];
+ }
+
+ // Border width.
+ if ( isset( $attributes['style']['border']['width'] ) ) {
+ $border_styles['width'] = $attributes['style']['border']['width'];
+ }
+
+ // Border color.
+ $preset_color = array_key_exists( 'borderColor', $attributes ) ? "var:preset|color|{$attributes['borderColor']}" : null;
+ $custom_color = _wp_array_get( $attributes, array( 'style', 'border', 'color' ), null );
+ $border_styles['color'] = $preset_color ? $preset_color : $custom_color;
+
+ // Individual border styles e.g. top, left etc.
+ foreach ( $sides as $side ) {
+ $border = _wp_array_get( $attributes, array( 'style', 'border', $side ), null );
+ $border_styles[ $side ] = array(
+ 'color' => isset( $border['color'] ) ? $border['color'] : null,
+ 'style' => isset( $border['style'] ) ? $border['style'] : null,
+ 'width' => isset( $border['width'] ) ? $border['width'] : null,
+ );
+ }
+
+ $border_attributes = gutenberg_style_engine_get_styles( array( 'border' => $border_styles ) );
+ return array(
+ 'class' => $border_attributes['classnames'],
+ 'style' => $border_attributes['css'],
+ );
+}
+
/**
* Registers the `core/post-featured-image` block on the server.
*/
diff --git a/packages/block-library/src/post-featured-image/style.scss b/packages/block-library/src/post-featured-image/style.scss
index 85ca80b427e617..7af2f5331c82cd 100644
--- a/packages/block-library/src/post-featured-image/style.scss
+++ b/packages/block-library/src/post-featured-image/style.scss
@@ -9,6 +9,7 @@
width: 100%;
height: auto;
vertical-align: bottom;
+ box-sizing: border-box;
}
&.alignwide img,
From 621575b04ee25ded3535194f8bf6edb6a6692ac1 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Mon, 8 Aug 2022 15:01:14 +1000
Subject: [PATCH 2/5] Apply border to placeholder as well
---
.../src/post-featured-image/block.json | 2 +-
.../src/post-featured-image/edit.js | 46 ++++++++++++++-----
.../src/post-featured-image/editor.scss | 41 +++++++++++++++++
3 files changed, 76 insertions(+), 13 deletions(-)
diff --git a/packages/block-library/src/post-featured-image/block.json b/packages/block-library/src/post-featured-image/block.json
index a1c3f75aab8a2c..dd5956a4f9290a 100644
--- a/packages/block-library/src/post-featured-image/block.json
+++ b/packages/block-library/src/post-featured-image/block.json
@@ -46,7 +46,7 @@
"color": true,
"radius": true,
"width": true,
- "__experimentalSelector": "img",
+ "__experimentalSelector": "img, .block-editor-media-placeholder",
"__experimentalSkipSerialization": true,
"__experimentalDefaultControls": {
"color": true,
diff --git a/packages/block-library/src/post-featured-image/edit.js b/packages/block-library/src/post-featured-image/edit.js
index 4f965f667afda9..e95c8c2253dc4b 100644
--- a/packages/block-library/src/post-featured-image/edit.js
+++ b/packages/block-library/src/post-featured-image/edit.js
@@ -1,3 +1,8 @@
+/**
+ * External dependencies
+ */
+import classnames from 'classnames';
+
/**
* WordPress dependencies
*/
@@ -31,17 +36,6 @@ import DimensionControls from './dimension-controls';
const ALLOWED_MEDIA_TYPES = [ 'image' ];
-const placeholder = ( content ) => {
- return (
-
- { content }
-
- );
-};
-
function getMediaSourceUrlBySizeSlug( media, slug ) {
return (
media?.media_details?.sizes?.[ slug ]?.source_url || media?.source_url
@@ -98,6 +92,21 @@ function PostFeaturedImageDisplay( {
} );
const borderProps = useBorderProps( attributes );
+ const placeholder = ( content ) => {
+ return (
+
+ { content }
+
+ );
+ };
+
const onSelectImage = ( value ) => {
if ( value?.id ) {
setFeaturedImage( value.id );
@@ -245,8 +254,21 @@ function PostFeaturedImageDisplay( {
export default function PostFeaturedImageEdit( props ) {
const blockProps = useBlockProps();
+ const borderProps = useBorderProps( props.attributes );
+
if ( ! props.context?.postId ) {
- return { placeholder() }
;
+ return (
+
+ );
}
return ;
}
diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
index 40f9f6e47ce8d7..fd5f423ef8b9cb 100644
--- a/packages/block-library/src/post-featured-image/editor.scss
+++ b/packages/block-library/src/post-featured-image/editor.scss
@@ -35,6 +35,47 @@
// Show default placeholder height when not resized.
min-height: 200px;
+
+ // Compromise to allow the SVG to somewhat follow any border radius
+ // applied to the post featured image block and its placeholder.
+ > svg {
+ border-radius: inherit;
+ }
+
+ // The following override the default placeholder styles that remove
+ // its border so that a user selection for border color or width displays
+ // a visual border.
+ &:where(.has-border-color) {
+ border-style: solid;
+ }
+ &:where([style*="border-top-color"]) {
+ border-top-style: solid;
+ }
+ &:where([style*="border-right-color"]) {
+ border-right-style: solid;
+ }
+ &:where([style*="border-bottom-color"]) {
+ border-bottom-style: solid;
+ }
+ &:where([style*="border-left-color"]) {
+ border-left-style: solid;
+ }
+
+ &:where([style*="border-width"]) {
+ border-style: solid;
+ }
+ &:where([style*="border-top-width"]) {
+ border-top-style: solid;
+ }
+ &:where([style*="border-right-width"]) {
+ border-right-style: solid;
+ }
+ &:where([style*="border-bottom-width"]) {
+ border-bottom-style: solid;
+ }
+ &:where([style*="border-left-width"]) {
+ border-left-style: solid;
+ }
}
// Provide a minimum size for the placeholder when resized.
From 8c31798c192611ccfc5f139a6d4f6e08b28fd46d Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Thu, 18 Aug 2022 14:43:37 +1000
Subject: [PATCH 3/5] Remove obsolete border radius style for svg
---
packages/block-library/src/post-featured-image/editor.scss | 6 ------
1 file changed, 6 deletions(-)
diff --git a/packages/block-library/src/post-featured-image/editor.scss b/packages/block-library/src/post-featured-image/editor.scss
index fd5f423ef8b9cb..be7b9a9dafa53b 100644
--- a/packages/block-library/src/post-featured-image/editor.scss
+++ b/packages/block-library/src/post-featured-image/editor.scss
@@ -36,12 +36,6 @@
// Show default placeholder height when not resized.
min-height: 200px;
- // Compromise to allow the SVG to somewhat follow any border radius
- // applied to the post featured image block and its placeholder.
- > svg {
- border-radius: inherit;
- }
-
// The following override the default placeholder styles that remove
// its border so that a user selection for border color or width displays
// a visual border.
From 96798f978085e6fb68fcaf7325ff276597652fd8 Mon Sep 17 00:00:00 2001
From: jasmussen
Date: Thu, 18 Aug 2022 08:27:08 +0200
Subject: [PATCH 4/5] Fix black inner border color.
---
packages/components/src/placeholder/style.scss | 1 +
1 file changed, 1 insertion(+)
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index d742354ded43f7..245e4d97daa359 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -219,4 +219,5 @@
stroke-dasharray: 3;
border-width: inherit;
border-style: inherit;
+ border-color: transparent;
}
From 44a808b4b47eaa4e0df2a3473da242d79a3ea4e0 Mon Sep 17 00:00:00 2001
From: Aaron Robertshaw <60436221+aaronrobertshaw@users.noreply.github.com>
Date: Fri, 19 Aug 2022 16:21:55 +1000
Subject: [PATCH 5/5] Remove border styling on placeholder SVG
This makes the diagonal line appear more consistently.
---
packages/components/src/placeholder/style.scss | 3 ---
1 file changed, 3 deletions(-)
diff --git a/packages/components/src/placeholder/style.scss b/packages/components/src/placeholder/style.scss
index 245e4d97daa359..03c52a44e0aaf7 100644
--- a/packages/components/src/placeholder/style.scss
+++ b/packages/components/src/placeholder/style.scss
@@ -217,7 +217,4 @@
height: 100%;
stroke: currentColor;
stroke-dasharray: 3;
- border-width: inherit;
- border-style: inherit;
- border-color: transparent;
}