Initial Drupal 11 with DDEV setup
This commit is contained in:
@ -0,0 +1,100 @@
|
||||
# This is so your IDE knows about the syntax for fixes and autocomplete.
|
||||
$schema: https://git.drupalcode.org/project/drupal/-/raw/HEAD/core/assets/schemas/v1/metadata.schema.json
|
||||
|
||||
# The human readable name.
|
||||
name: Toolbar button
|
||||
|
||||
# Status can be: "experimental", "stable", "deprecated", "obsolete".
|
||||
status: experimental
|
||||
|
||||
# Schema for the props. We support www.json-schema.org. Learn more about the
|
||||
# syntax there.
|
||||
props:
|
||||
# Props are always an object with keys. Each key is a variable in your
|
||||
# component template.
|
||||
type: object
|
||||
|
||||
properties:
|
||||
action:
|
||||
type: string
|
||||
title: Action
|
||||
description: Hidden button action text.
|
||||
modifiers:
|
||||
type: array
|
||||
title: Modifier classes.
|
||||
description:
|
||||
Button modifiers.
|
||||
https://en.bem.info/methodology/css/#modifiers
|
||||
items:
|
||||
type: string
|
||||
enum:
|
||||
- collapsible
|
||||
- dark
|
||||
- expand--down
|
||||
- expand--side
|
||||
- large
|
||||
- non-interactive
|
||||
- primary
|
||||
- small-offset
|
||||
- weight--400
|
||||
meta:enum:
|
||||
collapsible: Collapsible
|
||||
dark: Dark
|
||||
expand--down: Expands down
|
||||
expand--side: Expands to the side
|
||||
large: Large
|
||||
non-interactive: Non-Interactive
|
||||
primary: Primary
|
||||
small-offset: Small offset
|
||||
weight--400: Weight 400
|
||||
x-translation-context: Toolbar button modifiers
|
||||
extra_classes:
|
||||
type: array
|
||||
title: Extra classes.
|
||||
description:
|
||||
External modifiers added from the placement context.
|
||||
https://en.bem.info/methodology/css/#mixes
|
||||
items:
|
||||
type: string
|
||||
html_tag:
|
||||
type: string
|
||||
title: HTML tag
|
||||
# Limit the available options by using enums.
|
||||
enum:
|
||||
- a
|
||||
- button
|
||||
- span
|
||||
meta:enum:
|
||||
a: Link
|
||||
button: Button
|
||||
span: Inline
|
||||
x-translation-context: HTML tag
|
||||
# Provide a default value
|
||||
default: button
|
||||
icon:
|
||||
title: Icon
|
||||
type: object
|
||||
properties:
|
||||
pack_id:
|
||||
title: Icon Pack
|
||||
type: string
|
||||
default: navigation
|
||||
icon_id:
|
||||
title: Icon ID
|
||||
type: string
|
||||
settings:
|
||||
title: Icon Settings
|
||||
type: object
|
||||
default:
|
||||
class: toolbar-button__icon
|
||||
size: 20
|
||||
required:
|
||||
- icon_id
|
||||
text:
|
||||
title: Text
|
||||
description: Text of button.
|
||||
type: string
|
||||
slots:
|
||||
content:
|
||||
title: Content
|
||||
description: Content of button.
|
||||
@ -0,0 +1,189 @@
|
||||
/*
|
||||
* DO NOT EDIT THIS FILE.
|
||||
* See the following change record for more information,
|
||||
* https://www.drupal.org/node/3084859
|
||||
* @preserve
|
||||
*/
|
||||
/* cspell:ignore csvg cpath wght */
|
||||
/**
|
||||
* @file
|
||||
* Toolbar button styles.
|
||||
*/
|
||||
[data-drupal-admin-styles] {
|
||||
--toolbar-button-outline-offset: 0;
|
||||
--toolbar-button-bg: transparent;
|
||||
--toolbar-button-color: var(--admin-toolbar-color-gray-800);
|
||||
/* Hover styles. */
|
||||
--toolbar-button-hover-bg: var(--admin-toolbar-color-gray-050);
|
||||
--toolbar-button-hover-color: var(--admin-toolbar-color-gray-990);
|
||||
/* Focus variables. */
|
||||
--toolbar-button-focus-color: var(--admin-toolbar-color-blue-700);
|
||||
/* Current variables */
|
||||
--toolbar-button-current-bg: var(--admin-toolbar-color-gray-050);
|
||||
--toolbar-button-current-color: var(--admin-toolbar-color-blue-700);
|
||||
/* Active child variables. */
|
||||
--toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
|
||||
--toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
|
||||
/* Icon */
|
||||
--toolbar-button-icon-size: var(--admin-toolbar-space-20);
|
||||
}
|
||||
.toolbar-button {
|
||||
z-index: 1;
|
||||
flex-grow: 0;
|
||||
align-items: center;
|
||||
min-height: var(--admin-toolbar-space-40);
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
-webkit-text-decoration: none;
|
||||
text-decoration: none;
|
||||
overflow-wrap: break-word;
|
||||
color: var(--toolbar-button-color);
|
||||
border: 0;
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
background-color: var(--toolbar-button-bg);
|
||||
font-size: var(--admin-toolbar-font-size-info-sm);
|
||||
line-height: var(--admin-toolbar-line-height-info-sm);
|
||||
padding-inline: var(--admin-toolbar-space-16);
|
||||
padding-block: var(--admin-toolbar-space-10);
|
||||
font-variation-settings: "wght" 700;
|
||||
gap: calc(0.5 * var(--admin-toolbar-rem));
|
||||
}
|
||||
.toolbar-button:has(+ .toolbar-popover__wrapper .is-active) {
|
||||
color: var(--toolbar-button-has-active-child-color);
|
||||
background-color: var(--toolbar-button-has-active-child-bg);
|
||||
}
|
||||
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber) .toolbar-button__icon,
|
||||
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) .toolbar-button__icon {
|
||||
fill: transparent;
|
||||
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3e %3cstyle%3e %40keyframes spinner%7bto%7btransform:rotate(360deg)%7d%7d %3c/style%3e %3cpath d='M12 1a11 11 0 1 0 11 11A11 11 0 0 0 12 1Zm0 19a8 8 0 1 1 8-8 8 8 0 0 1-8 8Z' opacity='.25'/%3e %3cpath d='M10.14 1.16a11 11 0 0 0-9 8.92A1.59 1.59 0 0 0 2.46 12a1.52 1.52 0 0 0 1.65-1.3 8 8 0 0 1 6.66-6.61A1.42 1.42 0 0 0 12 2.69a1.57 1.57 0 0 0-1.86-1.53Z' style='animation:spinner .75s infinite linear' transform-origin='center'/%3e%3c/svg%3e");
|
||||
}
|
||||
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber) + .ajax-progress--throbber,
|
||||
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) + .ajax-progress--throbber,
|
||||
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber) + .ajax-progress-throbber,
|
||||
.toolbar-button[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) + .ajax-progress-throbber {
|
||||
display: none;
|
||||
}
|
||||
.toolbar-button:hover {
|
||||
z-index: 20;
|
||||
color: var(--toolbar-button-hover-color);
|
||||
outline: 2px solid var(--admin-toolbar-color-blue-200);
|
||||
outline-offset: var(--toolbar-button-outline-offset);
|
||||
background-color: var(--toolbar-button-hover-bg);
|
||||
}
|
||||
.toolbar-button:focus {
|
||||
z-index: 10;
|
||||
color: var(--toolbar-button-focus-color);
|
||||
outline: 2px solid var(--admin-toolbar-color-focus);
|
||||
outline-offset: var(--toolbar-button-outline-offset);
|
||||
}
|
||||
.toolbar-button.current {
|
||||
color: var(--toolbar-button-current-color);
|
||||
background-color: var(--toolbar-button-current-bg);
|
||||
}
|
||||
/* Dark color modifier for submenus title */
|
||||
.toolbar-button--dark {
|
||||
color: var(--admin-toolbar-color-gray-990);
|
||||
}
|
||||
.toolbar-button--large {
|
||||
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
|
||||
font-size: var(--admin-toolbar-font-size-info-lg);
|
||||
line-height: var(--admin-toolbar-line-height-info-lg);
|
||||
}
|
||||
.toolbar-button--non-interactive:hover,
|
||||
.toolbar-button--non-interactive:focus,
|
||||
.toolbar-button--non-interactive:hover:focus {
|
||||
z-index: 1;
|
||||
cursor: auto;
|
||||
color: var(--toolbar-button-color);
|
||||
outline: 0;
|
||||
background-color: var(--toolbar-button-bg);
|
||||
}
|
||||
.toolbar-button--small-offset {
|
||||
--toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
|
||||
}
|
||||
/* Class starts with `toolbar-button--icon` */
|
||||
[class*="toolbar-button--icon"] {
|
||||
padding-inline: var(--admin-toolbar-space-10);
|
||||
}
|
||||
[class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon))::before {
|
||||
flex-shrink: 0;
|
||||
content: attr(data-icon-text) / "";
|
||||
text-align: center;
|
||||
color: currentColor;
|
||||
font-size: calc(0.75 * var(--admin-toolbar-rem));
|
||||
inline-size: var(--toolbar-button-icon-size);
|
||||
}
|
||||
.toolbar-button--primary {
|
||||
--toolbar-button-color: var(--admin-toolbar-color-white);
|
||||
--toolbar-button-bg: var(--admin-toolbar-color-blue-450);
|
||||
--toolbar-button-hover-color: var(--admin-toolbar-color-white);
|
||||
--toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);
|
||||
--toolbar-button-focus-color: var(--admin-toolbar-color-white);
|
||||
}
|
||||
.toolbar-button--weight--400 {
|
||||
font-variation-settings: "wght" 400;
|
||||
}
|
||||
/* Set 0 specificity */
|
||||
:where(.toolbar-button) {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
.toolbar-button--expand--down[aria-expanded="true"]:focus,
|
||||
.toolbar-button--expand--down[aria-expanded="true"]:hover {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
[dir="ltr"] .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {
|
||||
scale: -1 1;
|
||||
}
|
||||
.toolbar-button--collapsible .toolbar-button__chevron {
|
||||
display: none;
|
||||
}
|
||||
.toolbar-button--collapsible .toolbar-button__label {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
white-space: nowrap;
|
||||
clip-path: inset(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
[data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__chevron {
|
||||
display: block;
|
||||
}
|
||||
[data-admin-toolbar="expanded"] .toolbar-button--collapsible .toolbar-button__label {
|
||||
position: relative;
|
||||
clip: revert;
|
||||
width: auto;
|
||||
height: auto;
|
||||
white-space: wrap;
|
||||
clip-path: none;
|
||||
opacity: 1;
|
||||
}
|
||||
[data-admin-toolbar-animating] .toolbar-button--collapsible .toolbar-button__label {
|
||||
display: none;
|
||||
}
|
||||
.toolbar-button__chevron {
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: auto;
|
||||
transition: rotate var(--admin-toolbar-transition);
|
||||
fill: currentColor;
|
||||
block-size: var(--admin-toolbar-space-16);
|
||||
inline-size: var(--admin-toolbar-space-16);
|
||||
}
|
||||
:where([dir="rtl"]) .toolbar-button__chevron {
|
||||
rotate: 180deg;
|
||||
}
|
||||
.toolbar-button--expand--down .toolbar-button__chevron {
|
||||
rotate: 90deg;
|
||||
}
|
||||
.toolbar-button--expand--down[aria-expanded="true"] .toolbar-button__chevron {
|
||||
rotate: -90deg;
|
||||
}
|
||||
.toolbar-button__icon {
|
||||
fill: currentColor;
|
||||
flex-shrink: 0;
|
||||
inline-size: var(--toolbar-button-icon-size);
|
||||
block-size: var(--toolbar-button-icon-size);
|
||||
}
|
||||
@ -0,0 +1,227 @@
|
||||
/* cspell:ignore csvg cpath wght */
|
||||
/**
|
||||
* @file
|
||||
* Toolbar button styles.
|
||||
*/
|
||||
|
||||
@import "../../css/base/media-queries.pcss.css";
|
||||
|
||||
[data-drupal-admin-styles] {
|
||||
--toolbar-button-outline-offset: 0;
|
||||
--toolbar-button-bg: transparent;
|
||||
--toolbar-button-color: var(--admin-toolbar-color-gray-800);
|
||||
/* Hover styles. */
|
||||
--toolbar-button-hover-bg: var(--admin-toolbar-color-gray-050);
|
||||
--toolbar-button-hover-color: var(--admin-toolbar-color-gray-990);
|
||||
/* Focus variables. */
|
||||
--toolbar-button-focus-color: var(--admin-toolbar-color-blue-700);
|
||||
/* Current variables */
|
||||
--toolbar-button-current-bg: var(--admin-toolbar-color-gray-050);
|
||||
--toolbar-button-current-color: var(--admin-toolbar-color-blue-700);
|
||||
/* Active child variables. */
|
||||
--toolbar-button-has-active-child-bg: var(--admin-toolbar-color-gray-050);
|
||||
--toolbar-button-has-active-child-color: var(--admin-toolbar-color-gray-950);
|
||||
/* Icon */
|
||||
--toolbar-button-icon-size: var(--admin-toolbar-space-20);
|
||||
}
|
||||
|
||||
.toolbar-button {
|
||||
z-index: 1;
|
||||
flex-grow: 0;
|
||||
align-items: center;
|
||||
min-height: var(--admin-toolbar-space-40);
|
||||
cursor: pointer;
|
||||
text-align: start;
|
||||
text-decoration: none;
|
||||
overflow-wrap: break-word;
|
||||
color: var(--toolbar-button-color);
|
||||
border: 0;
|
||||
border-radius: var(--admin-toolbar-space-8);
|
||||
background-color: var(--toolbar-button-bg);
|
||||
font-size: var(--admin-toolbar-font-size-info-sm);
|
||||
line-height: var(--admin-toolbar-line-height-info-sm);
|
||||
padding-inline: var(--admin-toolbar-space-16);
|
||||
padding-block: var(--admin-toolbar-space-10);
|
||||
font-variation-settings: "wght" 700;
|
||||
gap: calc(0.5 * var(--admin-toolbar-rem));
|
||||
|
||||
&:has(+ .toolbar-popover__wrapper .is-active) {
|
||||
color: var(--toolbar-button-has-active-child-color);
|
||||
background-color: var(--toolbar-button-has-active-child-bg);
|
||||
}
|
||||
|
||||
&[class*="toolbar-button--icon"]:has(+ .ajax-progress--throbber),
|
||||
&[class*="toolbar-button--icon"]:has(+ .ajax-progress-throbber) {
|
||||
.toolbar-button__icon {
|
||||
fill: transparent;
|
||||
background-image: url(../../assets/icons/throbber.svg);
|
||||
}
|
||||
|
||||
& + .ajax-progress--throbber,
|
||||
& + .ajax-progress-throbber {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:hover {
|
||||
z-index: 20;
|
||||
color: var(--toolbar-button-hover-color);
|
||||
outline: 2px solid var(--admin-toolbar-color-blue-200);
|
||||
outline-offset: var(--toolbar-button-outline-offset);
|
||||
background-color: var(--toolbar-button-hover-bg);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
z-index: 10;
|
||||
color: var(--toolbar-button-focus-color);
|
||||
outline: 2px solid var(--admin-toolbar-color-focus);
|
||||
outline-offset: var(--toolbar-button-outline-offset);
|
||||
}
|
||||
|
||||
&.current {
|
||||
color: var(--toolbar-button-current-color);
|
||||
background-color: var(--toolbar-button-current-bg);
|
||||
}
|
||||
}
|
||||
|
||||
/* Dark color modifier for submenus title */
|
||||
.toolbar-button--dark {
|
||||
color: var(--admin-toolbar-color-gray-990);
|
||||
}
|
||||
|
||||
.toolbar-button--large {
|
||||
padding: var(--admin-toolbar-space-8) var(--admin-toolbar-space-16);
|
||||
font-size: var(--admin-toolbar-font-size-info-lg);
|
||||
line-height: var(--admin-toolbar-line-height-info-lg);
|
||||
}
|
||||
|
||||
.toolbar-button--non-interactive {
|
||||
&:hover,
|
||||
&:focus,
|
||||
&:hover:focus {
|
||||
z-index: 1;
|
||||
cursor: auto;
|
||||
color: var(--toolbar-button-color);
|
||||
outline: 0;
|
||||
background-color: var(--toolbar-button-bg);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-button--small-offset {
|
||||
--toolbar-button-outline-offset: calc(-1 * var(--admin-toolbar-space-4));
|
||||
}
|
||||
|
||||
/* Class starts with `toolbar-button--icon` */
|
||||
[class*="toolbar-button--icon"] {
|
||||
padding-inline: var(--admin-toolbar-space-10);
|
||||
}
|
||||
|
||||
[class*="toolbar-button--icon"]:not(:has(.toolbar-button__icon)) {
|
||||
&::before {
|
||||
flex-shrink: 0;
|
||||
content: attr(data-icon-text) / "";
|
||||
text-align: center;
|
||||
color: currentColor;
|
||||
font-size: calc(0.75 * var(--admin-toolbar-rem));
|
||||
inline-size: var(--toolbar-button-icon-size);
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-button--primary {
|
||||
--toolbar-button-color: var(--admin-toolbar-color-white);
|
||||
--toolbar-button-bg: var(--admin-toolbar-color-blue-450);
|
||||
--toolbar-button-hover-color: var(--admin-toolbar-color-white);
|
||||
--toolbar-button-hover-bg: var(--admin-toolbar-color-blue-600);
|
||||
--toolbar-button-focus-color: var(--admin-toolbar-color-white);
|
||||
}
|
||||
|
||||
.toolbar-button--weight--400 {
|
||||
font-variation-settings: "wght" 400;
|
||||
}
|
||||
|
||||
/* Set 0 specificity */
|
||||
:where(.toolbar-button) {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.toolbar-button--expand--down {
|
||||
&[aria-expanded="true"] {
|
||||
&:focus,
|
||||
&:hover {
|
||||
border-bottom-right-radius: 0;
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
[dir="ltr"] .toolbar-button--icon--announcements-feed-announcement .toolbar-button__icon {
|
||||
scale: -1 1;
|
||||
}
|
||||
|
||||
.toolbar-button--collapsible {
|
||||
& .toolbar-button__chevron {
|
||||
display: none;
|
||||
}
|
||||
|
||||
& .toolbar-button__label {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
clip: rect(0 0 0 0);
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
white-space: nowrap;
|
||||
clip-path: inset(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
[data-admin-toolbar="expanded"] & {
|
||||
& .toolbar-button__chevron {
|
||||
display: block;
|
||||
}
|
||||
|
||||
& .toolbar-button__label {
|
||||
position: relative;
|
||||
clip: revert;
|
||||
width: auto;
|
||||
height: auto;
|
||||
white-space: wrap;
|
||||
clip-path: none;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
[data-admin-toolbar-animating] & {
|
||||
& .toolbar-button__label {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-button__chevron {
|
||||
flex-shrink: 0;
|
||||
margin-inline-start: auto;
|
||||
transition: rotate var(--admin-toolbar-transition);
|
||||
fill: currentColor;
|
||||
block-size: var(--admin-toolbar-space-16);
|
||||
inline-size: var(--admin-toolbar-space-16);
|
||||
|
||||
:where([dir="rtl"]) & {
|
||||
rotate: 180deg;
|
||||
}
|
||||
|
||||
.toolbar-button--expand--down & {
|
||||
rotate: 90deg;
|
||||
}
|
||||
|
||||
.toolbar-button--expand--down[aria-expanded="true"] & {
|
||||
rotate: -90deg;
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-button__icon {
|
||||
fill: currentColor;
|
||||
flex-shrink: 0;
|
||||
inline-size: var(--toolbar-button-icon-size);
|
||||
block-size: var(--toolbar-button-icon-size);
|
||||
}
|
||||
@ -0,0 +1,44 @@
|
||||
{# Extra classes variable added to be sure that modifiers will
|
||||
appear after main classes #}
|
||||
{%
|
||||
set classes = [
|
||||
'toolbar-button',
|
||||
icon.icon_id ? 'toolbar-button--icon--' ~ icon.icon_id : '',
|
||||
]
|
||||
%}
|
||||
|
||||
{% if modifiers is iterable %}
|
||||
{% set classes = classes|merge(modifiers|map(modifier => "toolbar-button--#{modifier}")) %}
|
||||
{% endif %}
|
||||
|
||||
{% if extra_classes is iterable %}
|
||||
{% set classes = classes|merge(extra_classes) %}
|
||||
{% endif %}
|
||||
|
||||
{% if text and text|length > 1 %}
|
||||
{# We take the first two letters of the button text to use as a fallback when
|
||||
the toolbar button does not have a pre-assigned icon. #}
|
||||
{% set icon_text = text|slice(0, 2)|join('') %}
|
||||
{% set attributes = attributes.setAttribute('data-index-text', text|first|lower).setAttribute('data-icon-text', icon_text) %}
|
||||
{% endif %}
|
||||
|
||||
<{{ html_tag|default('button') }} {{ attributes.addClass(classes) }}>
|
||||
|
||||
{% if icon.icon_id %}
|
||||
{{ icon(icon.pack_id|default('navigation'), icon.icon_id, icon.settings|default({ class: 'toolbar-button__icon', size: 20 })) }}
|
||||
{% endif %}
|
||||
|
||||
{% if action %}
|
||||
<span data-toolbar-action class="visually-hidden">{{ action }}</span>
|
||||
{% endif %}
|
||||
{% block content %}
|
||||
{% if text %}
|
||||
<span class="toolbar-button__label" data-toolbar-text>{{~ text ~}}</span>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{% if modifiers is iterable and ('expand--side' in modifiers or 'expand--down' in modifiers) %}
|
||||
{{ icon('navigation', 'chevron', { class: 'toolbar-button__chevron', size: 16 }) }}
|
||||
{% endif %}
|
||||
|
||||
</{{ html_tag|default('button') }}>
|
||||
Reference in New Issue
Block a user