Skip to content

Gutenberg – Icon Block

Jump to bottom
Henner S edited this page Mar 27, 2023 · 1 revision

Edje WordPress - Icon Block

Create a block with SVG icon and description.

⚠️ Requires: Theme Support h-icon-block

Features

  1. Integration with FontAwesome FREE. Simply type in the name of the icon and it will get the SVG code.

  2. Use the toolbar to change icon position to Left / Center / Right.

  3. Option to use Image file instead of SVG.

Markup

<div class="wp-block-h-icon has-icon-position-left has-text-align-left has-description"
  style="--textColor:#000; --bgColor:#fff; --iconColor:#000;"
>
  <figure class="wp-block-h-icon__figure">
    <svg> ... </svg>
  </figure>
  <dl class="wp-block-h-icon__content">
    <dt>Title</dt>
    <dd>
      <p>Insert description here</p>
    </dd>
  </dl>
</div>

Note: Outer div becomes <a> if you set an anchor link using the Toolbar.

Styling

This plugin doesn't come with the front-end CSS. If you want a similar style with the admin one, here you go:

Sass Format

$size-xsmall : 480px
$size-small  : 768px
$size-medium : 960px
$size-large  : 1120px

$below-xs: "max-width:#{ $size-xsmall }"
$above-xs: "min-width:#{ $size-xsmall + 1px }"
$below-s: "max-width:#{ $size-small }"
$above-s: "min-width:#{ $size-small + 1px }"
$below-m: "max-width:#{ $size-medium }"
$above-m: "min-width:#{ $size-medium + 1px }"
$below-l: "max-width:#{ $size-large }"
$above-l: "min-width:#{ $size-large + 1px }"

.wp-block-h-icon
  --iconSize: 60px
  --iconPadding: 1rem
  --iconGap: 1rem

  --bgColor: #e5e5e5
  --textColor: inherit

  display: flex
  align-items: flex-start
  color: var(--textColor)
  border-radius: 4px

  &.is-style-boxed
    --iconPadding: 0
    --iconSize: 28px

    padding: 0.5rem
    background-color: var(--bgColor)

  &.use-image
     --iconSize: 60px 

  &.use-image.is-style-boxed
    @media ($above-s) and ($below-m)
      --iconSize: 45px
    @media ($above-xs) and ($below-s)
      --iconSize: 35px

  &.has-icon-position-top
    flex-wrap: wrap

  &.has-text-align-center
    justify-content: center

  &.has-text-align-right
    justify-content: flex-end

  &.has-no-description
    align-items: center

  @media ($below-m)
    --iconGap: 0.75rem

// if has link
a.wp-block-h-icon
  text-decoration: none
  will-change: transform

  &:hover
    opacity: .9
    transform: translateY(-2px)
    color: var(--textColor)

    dt
      text-decoration: underline
  
  &:active
    transform: none
    transition: none


.wp-block-h-icon__figure
  display: flex
  align-items: center
  justify-content: center
  
  min-width: var(--iconSize)
  max-width: var(--iconSize)
  width: var(--iconSize)
  height: var(--iconSize)
  margin: 0
  padding: var(--iconPadding)
  background-color: var(--bgColor)
  border-radius: 50%

  .is-style-boxed &
    background-color: transparent

  .has-icon-position-left &
    margin-right: var(--iconGap)

  .has-icon-position-right &
    order: 1
    margin-left: var(--iconGap)

  .has-icon-position-top &
    margin-bottom: var(--iconGap)

  
  .use-image &
    padding: 0
    background-color: transparent

  path,
  rect
    fill: var(--iconColor, currentColor)

  svg
    max-width: 100%
    max-height: 100%


.wp-block-h-icon__content
  flex: 1
  width: 100%

  .has-icon-position-top &
    flex: auto

  dt
    font-weight: 700
    font-size: 20px
    line-height: 1.5rem

    .is-style-boxed &
      font-weight: 500
      font-size: 1.25rem

      @media ($below-m)
        font-size: 1rem

  dd
    margin-top: 0.75rem
  dd p + p
    margin-top: 0.5rem

CSS Format

.wp-block-h-icon {
  --iconSize: 60px;
  --iconPadding: 1rem;
  --iconGap: 1rem;
  --bgColor: #e5e5e5;
  --textColor: inherit;
  display: flex;
  align-items: flex-start;
  color: var(--textColor);
  border-radius: 4px;
}
.wp-block-h-icon.is-style-boxed {
  --iconPadding: 0;
  --iconSize: 28px;
  padding: 0.5rem;
  background-color: var(--bgColor);
}
.wp-block-h-icon.use-image {
  --iconSize: 60px;
}
@media (min-width:769px) and (max-width:960px) {
  .wp-block-h-icon.use-image.is-style-boxed {
    --iconSize: 45px;
  }
}
@media (min-width:481px) and (max-width:768px) {
  .wp-block-h-icon.use-image.is-style-boxed {
    --iconSize: 35px;
  }
}
.wp-block-h-icon.has-icon-position-top {
  flex-wrap: wrap;
}
.wp-block-h-icon.has-text-align-center {
  justify-content: center;
}
.wp-block-h-icon.has-text-align-right {
  justify-content: flex-end;
}
.wp-block-h-icon.has-no-description {
  align-items: center;
}
@media (max-width:960px) {
  .wp-block-h-icon {
    --iconGap: 0.75rem;
  }
}

a.wp-block-h-icon {
  text-decoration: none;
  will-change: transform;
}
a.wp-block-h-icon:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  color: var(--textColor);
}
a.wp-block-h-icon:hover dt {
  text-decoration: underline;
}
a.wp-block-h-icon:active {
  transform: none;
  transition: none;
}

.wp-block-h-icon__figure {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: var(--iconSize);
  max-width: var(--iconSize);
  width: var(--iconSize);
  height: var(--iconSize);
  margin: 0;
  padding: var(--iconPadding);
  background-color: var(--bgColor);
  border-radius: 50%;
}
.is-style-boxed .wp-block-h-icon__figure {
  background-color: transparent;
}
.has-icon-position-left .wp-block-h-icon__figure {
  margin-right: var(--iconGap);
}
.has-icon-position-right .wp-block-h-icon__figure {
  order: 1;
  margin-left: var(--iconGap);
}
.has-icon-position-top .wp-block-h-icon__figure {
  margin-bottom: var(--iconGap);
}
.use-image .wp-block-h-icon__figure {
  padding: 0;
  background-color: transparent;
}
.wp-block-h-icon__figure path,
.wp-block-h-icon__figure rect {
  fill: var(--iconColor, currentColor);
}
.wp-block-h-icon__figure svg {
  max-width: 100%;
  max-height: 100%;
}

.wp-block-h-icon__content {
  flex: 1;
  width: 100%;
}
.has-icon-position-top .wp-block-h-icon__content {
  flex: auto;
}
.wp-block-h-icon__content dt {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5rem;
}
.is-style-boxed .wp-block-h-icon__content dt {
  font-weight: 500;
  font-size: 1.25rem;
}
@media (max-width:960px) {
  .is-style-boxed .wp-block-h-icon__content dt {
    font-size: 1rem;
  }
}
.wp-block-h-icon__content dd {
  margin-top: 0.75rem;
}
.wp-block-h-icon__content dd p + p {
  margin-top: 0.5rem;
}

Clone this wiki locally