{"id":4581,"date":"2022-08-10T07:59:08","date_gmt":"2022-08-10T13:59:08","guid":{"rendered":"https:\/\/wpengine.com\/builders\/?p=4581"},"modified":"2023-04-14T09:57:39","modified_gmt":"2023-04-14T15:57:39","slug":"gradient-underline-block-style","status":"publish","type":"post","link":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/","title":{"rendered":"Create a Gradient Underline Block Style for Quotes"},"content":{"rendered":"\n

As WordPress continues to evolve and move toward a full site editing experience, builders have access to features such as custom block styles.<\/p>\n\n\n\n

Block styles can allow users to choose an alternative style for blocks such as images<\/a>, buttons, groups, etc. Usually, these styles are minor and add a subtle effect such as a border or a shadow.<\/p>\n\n\n\n

The Quote block is one of the most commonly used blocks in WordPress. Quotes provide users with an appealing visual way to showcase excerpts of text, inspiring words, or positive client testimonials.<\/p>\n\n\n\n

Bright Mode WordPress Theme<\/h2>\n\n\n\n

Bright Mode<\/a> is a block theme for those who love modern design and vibrant colors. It is an expression of the very best that WordPress has to offer\u2014including a sophisticated, bold color palette<\/a> and styles<\/a> that shine deeply.<\/p>\n\n\n\n

The theme includes four underline block styles which users can apply to quotes: Primary to Secondary, Secondary to Tertiary, Tertiary to Primary, and Primary to Secondary to Tertiary.<\/p>\n\n\n\n

Here is screenshot that shows each of the available block styles:<\/p>\n\n\n\n

\"Gradient<\/figure>\n\n\n\n

How to Create a Gradient Underline Block Style<\/h2>\n\n\n\n

The first step is to register the gradient underline block styles via the theme\u2019s functions.php<\/code> file. Below is the code used in Bright Mode:<\/p>\n\n\n

\/**<\/span>\n<\/span><\/span> * Register block styles.<\/span>\n<\/span><\/span> *<\/span>\n<\/span><\/span> * @since<\/span> 1.0<\/span>\n<\/span><\/span> *\/<\/span>\n<\/span><\/span>function<\/span> bright_mode_register_block_styles<\/span>()<\/span> <\/span>{\n<\/span><\/span>\n<\/span><\/span>\t$block_styles = array<\/span>(\n<\/span><\/span>\t\t'core\/quote'<\/span>           => array<\/span>(\n<\/span><\/span>\t\t\t'underline-primary-secondary'<\/span>  => __( 'Underline #1'<\/span>, 'bright-mode'<\/span> ),\n<\/span><\/span>\t\t\t'underline-secondary-tertiary'<\/span> => __( 'Underline #2'<\/span>, 'bright-mode'<\/span> ),\n<\/span><\/span>\t\t\t'underline-tertiary-primary'<\/span>   => __( 'Underline #3'<\/span>, 'bright-mode'<\/span> ),\n<\/span><\/span>\t\t\t'underline'<\/span>                    => __( 'Underline #4'<\/span>, 'bright-mode'<\/span> ),\n<\/span><\/span>\t\t),\n<\/span><\/span>\t);\n<\/span><\/span>\n<\/span><\/span>\tforeach<\/span> ( $block_styles as<\/span> $block => $styles ) {\n<\/span><\/span>\t\tforeach<\/span> ( $styles as<\/span> $style_name => $style_label ) {\n<\/span><\/span>\t\t\tregister_block_style(\n<\/span><\/span>\t\t\t\t$block,\n<\/span><\/span>\t\t\t\tarray<\/span>(\n<\/span><\/span>\t\t\t\t\t'name'<\/span>  => $style_name,\n<\/span><\/span>\t\t\t\t\t'label'<\/span> => $style_label,\n<\/span><\/span>\t\t\t\t)\n<\/span><\/span>\t\t\t);\n<\/span><\/span>\t\t}\n<\/span><\/span>\t}\n<\/span><\/span>}\n<\/span><\/span>add_action( 'init'<\/span>, 'bright_mode_register_block_styles'<\/span> );\n<\/span><\/span><\/code><\/span>Code language:<\/span> PHP<\/span> (<\/span>php<\/span>)<\/span><\/small><\/pre>\n\n\n
When custom block styles are created, WordPress creates a custom class, which is applied to that particular block: .is-style-XXXXXX.<\/p>\n\n\n\n
Next, we need to define the gradients which will be used for the custom style. This can be done via the theme\u2019s theme.json<\/code> file:<\/p>\n\n\n
{\n<\/span><\/span>\t\"settings\"<\/span>: {\n<\/span><\/span>\t\t\"color\"<\/span>: {\n<\/span><\/span>\t\t\t\"gradients\"<\/span>: [\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"gradient\"<\/span>: \"linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 100%)\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Primary to Secondary\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"primary-secondary\"<\/span>\n<\/span><\/span>\t\t\t\t},\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"gradient\"<\/span>: \"linear-gradient(135deg, var(--wp--preset--color--secondary) 0%, var(--wp--preset--color--tertiary) 100%)\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Secondary to Tertiary\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"secondary-tertiary\"<\/span>\n<\/span><\/span>\t\t\t\t},\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"gradient\"<\/span>: \"linear-gradient(135deg, var(--wp--preset--color--tertiary) 0%, var(--wp--preset--color--primary) 100%)\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Tertiary to Primary\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"tertiary-primary\"<\/span>\n<\/span><\/span>\t\t\t\t},\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"gradient\"<\/span>: \"linear-gradient(135deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 50%, var(--wp--preset--color--tertiary) 100%)\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Primary to Secondary to Tertiary\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"primary-secondary-tertiary\"<\/span>\n<\/span><\/span>\t\t\t\t}\n<\/span><\/span>\t\t\t]\n<\/span><\/span>\t\t}\n<\/span><\/span>\t}\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
The gradients are defined with CSS preset variables, which are also defined by the theme. In the case of Bright Mode, here is what they are:<\/p>\n\n\n
{\n<\/span><\/span>\t\"settings\"<\/span>: {\n<\/span><\/span>\t\t\"color\"<\/span>: {\n<\/span><\/span>\t\t\t\"palette\"<\/span>: [\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"color\"<\/span>: \"#ff33ff\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Primary\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"primary\"<\/span>\n<\/span><\/span>\t\t\t\t},\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"color\"<\/span>: \"#ffff33\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Secondary\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"secondary\"<\/span>\n<\/span><\/span>\t\t\t\t},\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"color\"<\/span>: \"#33ffff\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Tertiary\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"tertiary\"<\/span>\n<\/span><\/span>\t\t\t\t},\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"color\"<\/span>: \"#000\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Main\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"main\"<\/span>\n<\/span><\/span>\t\t\t\t},\n<\/span><\/span>\t\t\t\t{\n<\/span><\/span>\t\t\t\t\t\"color\"<\/span>: \"#fff\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"name\"<\/span>: \"Base\"<\/span>,\n<\/span><\/span>\t\t\t\t\t\"slug\"<\/span>: \"base\"<\/span>\n<\/span><\/span>\t\t\t\t}\n<\/span><\/span>\t\t\t]\n<\/span><\/span>\t\t}\n<\/span><\/span>\t}\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> JSON \/ JSON with Comments<\/span> (<\/span>json<\/span>)<\/span><\/small><\/pre>\n\n\n
Lastly, we need to style the gradient underlines, which can be done by adding the following CSS to the theme\u2019s style.css<\/code> file:<\/p>\n\n\n
\/* Quote<\/span>\n<\/span><\/span>--------------------------------------------- *\/<\/span>\n<\/span><\/span>\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline<\/span>,\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-primary-secondary<\/span>,\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-secondary-tertiary<\/span>,\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-tertiary-primary<\/span> {\n<\/span><\/span>\tborder<\/span>: none;\n<\/span><\/span>\tbox-shadow<\/span>: none;\n<\/span><\/span>\tpadding<\/span>: 0<\/span>;\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline<\/span> p<\/span> {\n<\/span><\/span>\tbackground<\/span>: var<\/span>(--wp--preset--gradient--primary-secondary-tertiary);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-primary-secondary<\/span> p<\/span> {\n<\/span><\/span>\tbackground<\/span>: var<\/span>(--wp--preset--gradient--primary-secondary);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-secondary-tertiary<\/span> p<\/span> {\n<\/span><\/span>\tbackground<\/span>: var<\/span>(--wp--preset--gradient--secondary-tertiary);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-tertiary-primary<\/span> p<\/span> {\n<\/span><\/span>\tbackground<\/span>: var<\/span>(--wp--preset--gradient--tertiary-primary);\n<\/span><\/span>}\n<\/span><\/span>\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline<\/span> p<\/span>,\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-primary-secondary<\/span> p<\/span>,\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-secondary-tertiary<\/span> p<\/span>,\n<\/span><\/span>.wp-block-quote<\/span>.is-style-underline-tertiary-primary<\/span> p<\/span> {\n<\/span><\/span>\tbackground-position<\/span>: 0<\/span> 85%<\/span>;\n<\/span><\/span>\tbackground-repeat<\/span>: repeat-x;\n<\/span><\/span>\tbackground-size<\/span>: 100%<\/span> 10px<\/span>;\n<\/span><\/span>\tfont-size<\/span>: var<\/span>(--wp--preset--font-size--max-48<\/span>);\n<\/span><\/span>\tfont-weight<\/span>: var<\/span>(--wp--custom--font-weight--medium);\n<\/span><\/span>\tline-height<\/span>: var<\/span>(--wp--custom--line-height--one);\n<\/span><\/span>\tdisplay<\/span>: inline;\n<\/span><\/span>}\n<\/span><\/span><\/code><\/span>Code language:<\/span> CSS<\/span> (<\/span>css<\/span>)<\/span><\/small><\/pre>\n\n\n
. . .<\/p>\n\n\n\n
Showcase excerpts of text, inspiring words, or positive client testimonials.<\/p>\n","protected":false},"author":6,"featured_media":4584,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_EventAllDay":false,"_EventTimezone":"","_EventStartDate":"","_EventEndDate":"","_EventStartDateUTC":"","_EventEndDateUTC":"","_EventShowMap":false,"_EventShowMapLink":false,"_EventURL":"","_EventCost":"","_EventCostDescription":"","_EventCurrencySymbol":"","_EventCurrencyCode":"","_EventCurrencyPosition":"","_EventDateTimeSeparator":"","_EventTimeRangeSeparator":"","_EventOrganizerID":[],"_EventVenueID":[],"_OrganizerEmail":"","_OrganizerPhone":"","_OrganizerWebsite":"","_VenueAddress":"","_VenueCity":"","_VenueCountry":"","_VenueProvince":"","_VenueState":"","_VenueZip":"","_VenuePhone":"","_VenueURL":"","_VenueStateProvince":"","_VenueLat":"","_VenueLng":"","_VenueShowMap":false,"_VenueShowMapLink":false,"footnotes":""},"categories":[1],"tags":[],"class_list":["post-4581","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress"],"yoast_head":"\nCreate a Gradient Underline Block Style for Quotes - Builders<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Create a Gradient Underline Block Style for Quotes - Builders\" \/>\n<meta property=\"og:description\" content=\"Showcase excerpts of text, inspiring words, or positive client testimonials.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/\" \/>\n<meta property=\"og:site_name\" content=\"Builders\" \/>\n<meta property=\"article:published_time\" content=\"2022-08-10T13:59:08+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-04-14T15:57:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/og-gradient-underline-block-style.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian Gardner\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:image\" content=\"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/og-gradient-underline-block-style.jpg\" \/>\n<meta name=\"twitter:creator\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:site\" content=\"@wpebuilders\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian Gardner\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/\"},\"author\":{\"name\":\"Brian Gardner\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/f582a2535c88e2c0b518703a29e82f7e\"},\"headline\":\"Create a Gradient Underline Block Style for Quotes\",\"datePublished\":\"2022-08-10T13:59:08+00:00\",\"dateModified\":\"2023-04-14T15:57:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/\"},\"wordCount\":337,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/gradient-underline-style.jpg\",\"articleSection\":[\"WordPress\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/\",\"name\":\"Create a Gradient Underline Block Style for Quotes - Builders\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/gradient-underline-style.jpg\",\"datePublished\":\"2022-08-10T13:59:08+00:00\",\"dateModified\":\"2023-04-14T15:57:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/#primaryimage\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/gradient-underline-style.jpg\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/gradient-underline-style.jpg\",\"width\":1920,\"height\":1080,\"caption\":\"Gradient Underline Block Style for WordPress\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/gradient-underline-block-style\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Create a Gradient Underline Block Style for Quotes\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#website\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"name\":\"Builders\",\"description\":\"Reimagining the way we build with WordPress.\",\"publisher\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#organization\",\"name\":\"WP Engine\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"contentUrl\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/wp-content\\\/uploads\\\/2024\\\/05\\\/WP-Engine-Horizontal@2x.png\",\"width\":348,\"height\":68,\"caption\":\"WP Engine\"},\"image\":{\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/x.com\\\/wpebuilders\",\"https:\\\/\\\/www.youtube.com\\\/channel\\\/UCh1WuL54XFb9ZI6m6goFv1g\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/#\\\/schema\\\/person\\\/f582a2535c88e2c0b518703a29e82f7e\",\"name\":\"Brian Gardner\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g\",\"caption\":\"Brian Gardner\"},\"description\":\"Brian Gardner is a Principal WordPress Advocate at WP Engine. He has built on WordPress since 2006 and is the creator of Frost. Connect with him on LinkedIn and X.\",\"sameAs\":[\"https:\\\/\\\/briangardner.com\\\/\"],\"url\":\"https:\\\/\\\/wpengine.com\\\/builders\\\/author\\\/brian-gardner-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Create a Gradient Underline Block Style for Quotes - Builders","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/","og_locale":"en_US","og_type":"article","og_title":"Create a Gradient Underline Block Style for Quotes - Builders","og_description":"Showcase excerpts of text, inspiring words, or positive client testimonials.","og_url":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/","og_site_name":"Builders","article_published_time":"2022-08-10T13:59:08+00:00","article_modified_time":"2023-04-14T15:57:39+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/og-gradient-underline-block-style.jpg","type":"image\/jpeg"}],"author":"Brian Gardner","twitter_card":"summary_large_image","twitter_image":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/og-gradient-underline-block-style.jpg","twitter_creator":"@wpebuilders","twitter_site":"@wpebuilders","twitter_misc":{"Written by":"Brian Gardner","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/#article","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/"},"author":{"name":"Brian Gardner","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/f582a2535c88e2c0b518703a29e82f7e"},"headline":"Create a Gradient Underline Block Style for Quotes","datePublished":"2022-08-10T13:59:08+00:00","dateModified":"2023-04-14T15:57:39+00:00","mainEntityOfPage":{"@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/"},"wordCount":337,"commentCount":0,"publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"image":{"@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/gradient-underline-style.jpg","articleSection":["WordPress"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/","url":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/","name":"Create a Gradient Underline Block Style for Quotes - Builders","isPartOf":{"@id":"https:\/\/wpengine.com\/builders\/#website"},"primaryImageOfPage":{"@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/#primaryimage"},"image":{"@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/#primaryimage"},"thumbnailUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/gradient-underline-style.jpg","datePublished":"2022-08-10T13:59:08+00:00","dateModified":"2023-04-14T15:57:39+00:00","breadcrumb":{"@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/#primaryimage","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/gradient-underline-style.jpg","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/gradient-underline-style.jpg","width":1920,"height":1080,"caption":"Gradient Underline Block Style for WordPress"},{"@type":"BreadcrumbList","@id":"https:\/\/wpengine.com\/builders\/gradient-underline-block-style\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/wpengine.com\/builders\/"},{"@type":"ListItem","position":2,"name":"Create a Gradient Underline Block Style for Quotes"}]},{"@type":"WebSite","@id":"https:\/\/wpengine.com\/builders\/#website","url":"https:\/\/wpengine.com\/builders\/","name":"Builders","description":"Reimagining the way we build with WordPress.","publisher":{"@id":"https:\/\/wpengine.com\/builders\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/wpengine.com\/builders\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/wpengine.com\/builders\/#organization","name":"WP Engine","url":"https:\/\/wpengine.com\/builders\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/","url":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","contentUrl":"https:\/\/wpengine.com\/builders\/wp-content\/uploads\/2024\/05\/WP-Engine-Horizontal@2x.png","width":348,"height":68,"caption":"WP Engine"},"image":{"@id":"https:\/\/wpengine.com\/builders\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/wpebuilders","https:\/\/www.youtube.com\/channel\/UCh1WuL54XFb9ZI6m6goFv1g"]},{"@type":"Person","@id":"https:\/\/wpengine.com\/builders\/#\/schema\/person\/f582a2535c88e2c0b518703a29e82f7e","name":"Brian Gardner","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/25b2f9f3e3426c67d76320d27da3c32e9621a542a2c1d20d1db51139421e29f4?s=96&d=mm&r=g","caption":"Brian Gardner"},"description":"Brian Gardner is a Principal WordPress Advocate at WP Engine. He has built on WordPress since 2006 and is the creator of Frost. Connect with him on LinkedIn and X.","sameAs":["https:\/\/briangardner.com\/"],"url":"https:\/\/wpengine.com\/builders\/author\/brian-gardner-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2-2\/"}]}},"_links":{"self":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4581","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/comments?post=4581"}],"version-history":[{"count":0,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/posts\/4581\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media\/4584"}],"wp:attachment":[{"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/media?parent=4581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/categories?post=4581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpengine.com\/builders\/wp-json\/wp\/v2\/tags?post=4581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Note:<\/strong> The code above is taken directly from the Bright Mode theme, which is available to download for free<\/a>. Minor adjustments might be required  to create similar block styles with a different theme.<\/p>\n","protected":false},"excerpt":{"rendered":"