summaryrefslogtreecommitdiffstats
path: root/wp-includes/blocks/post-featured-image
diff options
context:
space:
mode:
Diffstat (limited to '')
-rw-r--r--wp-includes/blocks/post-featured-image.php15
-rw-r--r--wp-includes/blocks/post-featured-image/block.json15
-rw-r--r--wp-includes/blocks/post-featured-image/editor-rtl.css13
-rw-r--r--wp-includes/blocks/post-featured-image/editor-rtl.min.css2
-rw-r--r--wp-includes/blocks/post-featured-image/editor.css13
-rw-r--r--wp-includes/blocks/post-featured-image/editor.min.css2
6 files changed, 56 insertions, 4 deletions
diff --git a/wp-includes/blocks/post-featured-image.php b/wp-includes/blocks/post-featured-image.php
index 9a1fd31..815da4e 100644
--- a/wp-includes/blocks/post-featured-image.php
+++ b/wp-includes/blocks/post-featured-image.php
@@ -8,6 +8,8 @@
/**
* Renders the `core/post-featured-image` block on the server.
*
+ * @since 5.8.0
+ *
* @param array $attributes Block attributes.
* @param string $content Block default content.
* @param WP_Block $block Block instance.
@@ -48,6 +50,13 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
if ( ! empty( $attributes['scale'] ) ) {
$extra_styles .= "object-fit:{$attributes['scale']};";
}
+ if ( ! empty( $attributes['style']['shadow'] ) ) {
+ $shadow_styles = wp_style_engine_get_styles( array( 'shadow' => $attributes['style']['shadow'] ) );
+
+ if ( ! empty( $shadow_styles['css'] ) ) {
+ $extra_styles .= $shadow_styles['css'];
+ }
+ }
if ( ! empty( $extra_styles ) ) {
$attr['style'] = empty( $attr['style'] ) ? $extra_styles : $attr['style'] . $extra_styles;
@@ -125,6 +134,8 @@ function render_block_core_post_featured_image( $attributes, $content, $block )
/**
* Generate markup for the HTML element that will be used for the overlay.
*
+ * @since 6.1.0
+ *
* @param array $attributes Block attributes.
*
* @return string HTML markup in string format.
@@ -191,6 +202,8 @@ function get_block_core_post_featured_image_overlay_element_markup( $attributes
* Generates class names and styles to apply the border support styles for
* the Post Featured Image block.
*
+ * @since 6.1.0
+ *
* @param array $attributes The block attributes.
* @return array The border-related classnames and styles for the block.
*/
@@ -241,6 +254,8 @@ function get_block_core_post_featured_image_border_attributes( $attributes ) {
/**
* Registers the `core/post-featured-image` block on the server.
+ *
+ * @since 5.8.0
*/
function register_block_core_post_featured_image() {
register_block_type_from_metadata(
diff --git a/wp-includes/blocks/post-featured-image/block.json b/wp-includes/blocks/post-featured-image/block.json
index 75f5bec..078b791 100644
--- a/wp-includes/blocks/post-featured-image/block.json
+++ b/wp-includes/blocks/post-featured-image/block.json
@@ -61,7 +61,6 @@
"supports": {
"align": [ "left", "right", "center", "wide", "full" ],
"color": {
- "__experimentalDuotone": "img, .wp-block-post-featured-image__placeholder, .components-placeholder__illustration, .components-placeholder::before",
"text": false,
"background": false
},
@@ -69,7 +68,6 @@
"color": true,
"radius": true,
"width": true,
- "__experimentalSelector": "img, .block-editor-media-placeholder, .wp-block-post-featured-image__overlay",
"__experimentalSkipSerialization": true,
"__experimentalDefaultControls": {
"color": true,
@@ -77,6 +75,12 @@
"width": true
}
},
+ "filter": {
+ "duotone": true
+ },
+ "shadow": {
+ "__experimentalSkipSerialization": true
+ },
"html": false,
"spacing": {
"margin": true,
@@ -86,6 +90,13 @@
"clientNavigation": true
}
},
+ "selectors": {
+ "border": ".wp-block-post-featured-image img, .wp-block-post-featured-image .block-editor-media-placeholder, .wp-block-post-featured-image .wp-block-post-featured-image__overlay",
+ "shadow": ".wp-block-post-featured-image img, .wp-block-post-featured-image .components-placeholder",
+ "filter": {
+ "duotone": ".wp-block-post-featured-image img, .wp-block-post-featured-image .wp-block-post-featured-image__placeholder, .wp-block-post-featured-image .components-placeholder__illustration, .wp-block-post-featured-image .components-placeholder::before"
+ }
+ },
"editorStyle": "wp-block-post-featured-image-editor",
"style": "wp-block-post-featured-image"
}
diff --git a/wp-includes/blocks/post-featured-image/editor-rtl.css b/wp-includes/blocks/post-featured-image/editor-rtl.css
index c6cd467..55fae71 100644
--- a/wp-includes/blocks/post-featured-image/editor-rtl.css
+++ b/wp-includes/blocks/post-featured-image/editor-rtl.css
@@ -23,6 +23,7 @@
display:flex;
height:48px;
justify-content:center;
+ margin:auto;
padding:0;
position:relative;
width:48px;
@@ -73,6 +74,18 @@
opacity:1;
pointer-events:auto;
}
+.wp-block-post-featured-image.is-transient{
+ position:relative;
+}
+.wp-block-post-featured-image.is-transient img{
+ opacity:.3;
+}
+.wp-block-post-featured-image.is-transient .components-spinner{
+ position:absolute;
+ right:50%;
+ top:50%;
+ transform:translate(50%, -50%);
+}
div[data-type="core/post-featured-image"] img{
display:block;
diff --git a/wp-includes/blocks/post-featured-image/editor-rtl.min.css b/wp-includes/blocks/post-featured-image/editor-rtl.min.css
index 0979445..9aa0d90 100644
--- a/wp-includes/blocks/post-featured-image/editor-rtl.min.css
+++ b/wp-includes/blocks/post-featured-image/editor-rtl.min.css
@@ -1 +1 @@
-.wp-block-post-featured-image .block-editor-media-placeholder{-webkit-backdrop-filter:none;backdrop-filter:none;z-index:1}.wp-block-post-featured-image .components-placeholder,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder{align-items:center;display:flex;justify-content:center;min-height:200px;padding:0}.wp-block-post-featured-image .components-placeholder .components-form-file-upload,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload{display:none}.wp-block-post-featured-image .components-placeholder .components-button,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button{align-items:center;background:var(--wp-admin-theme-color);border-color:var(--wp-admin-theme-color);border-radius:50%;border-style:solid;color:#fff;display:flex;height:48px;justify-content:center;padding:0;position:relative;width:48px}.wp-block-post-featured-image .components-placeholder .components-button>svg,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button>svg{color:inherit}.wp-block-post-featured-image .components-placeholder:where(.has-border-color),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),.wp-block-post-featured-image img:where(.has-border-color){border-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),.wp-block-post-featured-image img:where([style*=border-top-color]){border-top-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),.wp-block-post-featured-image img:where([style*=border-right-color]){border-left-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),.wp-block-post-featured-image img:where([style*=border-bottom-color]){border-bottom-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),.wp-block-post-featured-image img:where([style*=border-left-color]){border-right-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),.wp-block-post-featured-image img:where([style*=border-width]){border-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),.wp-block-post-featured-image img:where([style*=border-top-width]){border-top-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),.wp-block-post-featured-image img:where([style*=border-right-width]){border-left-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),.wp-block-post-featured-image img:where([style*=border-bottom-width]){border-bottom-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),.wp-block-post-featured-image img:where([style*=border-left-width]){border-right-style:solid}.wp-block-post-featured-image[style*=height] .components-placeholder{height:100%;min-height:48px;min-width:48px;width:100%}.wp-block-post-featured-image>a{cursor:default}.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label{opacity:1;pointer-events:auto}div[data-type="core/post-featured-image"] img{display:block;height:auto;max-width:100%} \ No newline at end of file
+.wp-block-post-featured-image .block-editor-media-placeholder{-webkit-backdrop-filter:none;backdrop-filter:none;z-index:1}.wp-block-post-featured-image .components-placeholder,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder{align-items:center;display:flex;justify-content:center;min-height:200px;padding:0}.wp-block-post-featured-image .components-placeholder .components-form-file-upload,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload{display:none}.wp-block-post-featured-image .components-placeholder .components-button,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button{align-items:center;background:var(--wp-admin-theme-color);border-color:var(--wp-admin-theme-color);border-radius:50%;border-style:solid;color:#fff;display:flex;height:48px;justify-content:center;margin:auto;padding:0;position:relative;width:48px}.wp-block-post-featured-image .components-placeholder .components-button>svg,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button>svg{color:inherit}.wp-block-post-featured-image .components-placeholder:where(.has-border-color),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),.wp-block-post-featured-image img:where(.has-border-color){border-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),.wp-block-post-featured-image img:where([style*=border-top-color]){border-top-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),.wp-block-post-featured-image img:where([style*=border-right-color]){border-left-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),.wp-block-post-featured-image img:where([style*=border-bottom-color]){border-bottom-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),.wp-block-post-featured-image img:where([style*=border-left-color]){border-right-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),.wp-block-post-featured-image img:where([style*=border-width]){border-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),.wp-block-post-featured-image img:where([style*=border-top-width]){border-top-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),.wp-block-post-featured-image img:where([style*=border-right-width]){border-left-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),.wp-block-post-featured-image img:where([style*=border-bottom-width]){border-bottom-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),.wp-block-post-featured-image img:where([style*=border-left-width]){border-right-style:solid}.wp-block-post-featured-image[style*=height] .components-placeholder{height:100%;min-height:48px;min-width:48px;width:100%}.wp-block-post-featured-image>a{cursor:default}.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label{opacity:1;pointer-events:auto}.wp-block-post-featured-image.is-transient{position:relative}.wp-block-post-featured-image.is-transient img{opacity:.3}.wp-block-post-featured-image.is-transient .components-spinner{position:absolute;right:50%;top:50%;transform:translate(50%,-50%)}div[data-type="core/post-featured-image"] img{display:block;height:auto;max-width:100%} \ No newline at end of file
diff --git a/wp-includes/blocks/post-featured-image/editor.css b/wp-includes/blocks/post-featured-image/editor.css
index 110aaa0..30f0bcf 100644
--- a/wp-includes/blocks/post-featured-image/editor.css
+++ b/wp-includes/blocks/post-featured-image/editor.css
@@ -23,6 +23,7 @@
display:flex;
height:48px;
justify-content:center;
+ margin:auto;
padding:0;
position:relative;
width:48px;
@@ -73,6 +74,18 @@
opacity:1;
pointer-events:auto;
}
+.wp-block-post-featured-image.is-transient{
+ position:relative;
+}
+.wp-block-post-featured-image.is-transient img{
+ opacity:.3;
+}
+.wp-block-post-featured-image.is-transient .components-spinner{
+ left:50%;
+ position:absolute;
+ top:50%;
+ transform:translate(-50%, -50%);
+}
div[data-type="core/post-featured-image"] img{
display:block;
diff --git a/wp-includes/blocks/post-featured-image/editor.min.css b/wp-includes/blocks/post-featured-image/editor.min.css
index 59f9786..93f8d21 100644
--- a/wp-includes/blocks/post-featured-image/editor.min.css
+++ b/wp-includes/blocks/post-featured-image/editor.min.css
@@ -1 +1 @@
-.wp-block-post-featured-image .block-editor-media-placeholder{-webkit-backdrop-filter:none;backdrop-filter:none;z-index:1}.wp-block-post-featured-image .components-placeholder,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder{align-items:center;display:flex;justify-content:center;min-height:200px;padding:0}.wp-block-post-featured-image .components-placeholder .components-form-file-upload,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload{display:none}.wp-block-post-featured-image .components-placeholder .components-button,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button{align-items:center;background:var(--wp-admin-theme-color);border-color:var(--wp-admin-theme-color);border-radius:50%;border-style:solid;color:#fff;display:flex;height:48px;justify-content:center;padding:0;position:relative;width:48px}.wp-block-post-featured-image .components-placeholder .components-button>svg,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button>svg{color:inherit}.wp-block-post-featured-image .components-placeholder:where(.has-border-color),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),.wp-block-post-featured-image img:where(.has-border-color){border-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),.wp-block-post-featured-image img:where([style*=border-top-color]){border-top-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),.wp-block-post-featured-image img:where([style*=border-right-color]){border-right-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),.wp-block-post-featured-image img:where([style*=border-bottom-color]){border-bottom-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),.wp-block-post-featured-image img:where([style*=border-left-color]){border-left-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),.wp-block-post-featured-image img:where([style*=border-width]){border-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),.wp-block-post-featured-image img:where([style*=border-top-width]){border-top-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),.wp-block-post-featured-image img:where([style*=border-right-width]){border-right-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),.wp-block-post-featured-image img:where([style*=border-bottom-width]){border-bottom-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),.wp-block-post-featured-image img:where([style*=border-left-width]){border-left-style:solid}.wp-block-post-featured-image[style*=height] .components-placeholder{height:100%;min-height:48px;min-width:48px;width:100%}.wp-block-post-featured-image>a{cursor:default}.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label{opacity:1;pointer-events:auto}div[data-type="core/post-featured-image"] img{display:block;height:auto;max-width:100%} \ No newline at end of file
+.wp-block-post-featured-image .block-editor-media-placeholder{-webkit-backdrop-filter:none;backdrop-filter:none;z-index:1}.wp-block-post-featured-image .components-placeholder,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder{align-items:center;display:flex;justify-content:center;min-height:200px;padding:0}.wp-block-post-featured-image .components-placeholder .components-form-file-upload,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-form-file-upload{display:none}.wp-block-post-featured-image .components-placeholder .components-button,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button{align-items:center;background:var(--wp-admin-theme-color);border-color:var(--wp-admin-theme-color);border-radius:50%;border-style:solid;color:#fff;display:flex;height:48px;justify-content:center;margin:auto;padding:0;position:relative;width:48px}.wp-block-post-featured-image .components-placeholder .components-button>svg,.wp-block-post-featured-image .wp-block-post-featured-image__placeholder .components-button>svg{color:inherit}.wp-block-post-featured-image .components-placeholder:where(.has-border-color),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where(.has-border-color),.wp-block-post-featured-image img:where(.has-border-color){border-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-top-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-color]),.wp-block-post-featured-image img:where([style*=border-top-color]){border-top-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-right-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-color]),.wp-block-post-featured-image img:where([style*=border-right-color]){border-right-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-color]),.wp-block-post-featured-image img:where([style*=border-bottom-color]){border-bottom-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-left-color]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-color]),.wp-block-post-featured-image img:where([style*=border-left-color]){border-left-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-width]),.wp-block-post-featured-image img:where([style*=border-width]){border-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-top-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-top-width]),.wp-block-post-featured-image img:where([style*=border-top-width]){border-top-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-right-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-right-width]),.wp-block-post-featured-image img:where([style*=border-right-width]){border-right-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-bottom-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-bottom-width]),.wp-block-post-featured-image img:where([style*=border-bottom-width]){border-bottom-style:solid}.wp-block-post-featured-image .components-placeholder:where([style*=border-left-width]),.wp-block-post-featured-image .wp-block-post-featured-image__placeholder:where([style*=border-left-width]),.wp-block-post-featured-image img:where([style*=border-left-width]){border-left-style:solid}.wp-block-post-featured-image[style*=height] .components-placeholder{height:100%;min-height:48px;min-width:48px;width:100%}.wp-block-post-featured-image>a{cursor:default}.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-button,.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__instructions,.wp-block-post-featured-image.is-selected .components-placeholder.has-illustration .components-placeholder__label{opacity:1;pointer-events:auto}.wp-block-post-featured-image.is-transient{position:relative}.wp-block-post-featured-image.is-transient img{opacity:.3}.wp-block-post-featured-image.is-transient .components-spinner{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}div[data-type="core/post-featured-image"] img{display:block;height:auto;max-width:100%} \ No newline at end of file