newspack-components 4.6.2 → 4.7.0-alpha.1

package/src/card/core-card.js

@@ -41,7 +41,16 @@ const CoreCard = ( {
 	isFirstTarget,
 	isLastTarget,
 	isNarrow,
+	/**
+	 * Renders the card as a chooser: strips the button chrome an `as="button"` card
+	 * inherits, and adds the hover and focus rings. Pair with `isActive` for the
+	 * chosen one. Unlike `buttonsCard` this leaves `as` alone, so the consumer keeps
+	 * the element and the ARIA it needs (`radio`, `option`, …).
+	 */
+	isSelectable,
 	isSmall,
+	isVertical,
+	size,
 	dragIndex,
 	onDragCallback = () => {},
 	onToggle = () => {},
@@ -53,6 +62,7 @@ const CoreCard = ( {
 	hasHeaderBorder = true,
 	...otherProps
 } ) => {
+	const bodySize = isSmall ? undefined : size;
 	const classes = classNames(
 		'newspack-card--core',
 		className,
@@ -61,6 +71,9 @@ const CoreCard = ( {
 		isDraggable && 'newspack-card--core__is-draggable',
 		isNarrow && 'newspack-card--core__is-narrow',
 		isSmall && 'newspack-card--core__is-small',
+		isSelectable && 'newspack-card--core__is-selectable',
+		bodySize === 'large' && 'newspack-card--core__is-large',
+		isVertical && 'newspack-card--core__is-vertical',
 		( icon || iconElement ) && 'newspack-card--core__has-icon',
 		iconBackgroundColor && 'newspack-card--core__has-icon-background-color',
 		isActive && 'newspack-card--core__is-active',
@@ -69,7 +82,7 @@ const CoreCard = ( {
 		noMargin && 'newspack-card--core__no-margin',
 		hasGreyHeader && 'newspack-card--core__has-grey-header'
 	);
-	let sizeProps = isSmall ? 'small' : otherProps.size;
+	let sizeProps = isSmall ? 'small' : size;
 	if ( buttonsCard || as === 'a' ) {
 		if ( ! isSmall ) {
 			sizeProps = 'large';
@@ -87,7 +100,7 @@ const CoreCard = ( {
 	const hasInteractiveHeaderChildren = actionType === 'toggle' || !! headerAction || actions?.length > 0 || isDraggable;
 	const headerIsButton = !! onHeaderClick && ! hasInteractiveHeaderChildren;
 	return (
-		<CardWrapper as={ as } className={ classes } { ...otherProps }>
+		<CardWrapper as={ as } className={ classes } size={ bodySize } { ...otherProps }>
 			{ ( header || icon || iconElement ) && (
 				<CardHeader
 					as={ headerIsButton ? 'button' : undefined }

package/src/card/core-card.test.js

@@ -39,4 +39,23 @@ describe( 'CoreCard', () => {
 		const { container } = render( <CoreCard header="Settings" isDraggable onHeaderClick={ () => {} } /> );
 		expect( getHeader( container ).tagName ).not.toBe( 'BUTTON' );
 	} );
+
+	it( 'gives the body large padding when size is large', () => {
+		const { container } = render( <CoreCard size="large" /> );
+		expect( container.querySelector( '.newspack-card--core__is-large' ) ).not.toBeNull();
+	} );
+
+	it( 'lets isSmall win over a large size', () => {
+		const { container } = render( <CoreCard size="large" isSmall /> );
+		expect( container.querySelector( '.newspack-card--core__is-large' ) ).toBeNull();
+		expect( container.querySelector( '.newspack-card--core__is-small' ) ).not.toBeNull();
+	} );
+
+	it( 'marks the card vertical only when isVertical is passed', () => {
+		const { container: plain } = render( <CoreCard header="Settings" /> );
+		expect( plain.querySelector( '.newspack-card--core__is-vertical' ) ).toBeNull();
+
+		const { container: vertical } = render( <CoreCard header="Settings" isVertical /> );
+		expect( vertical.querySelector( '.newspack-card--core__is-vertical' ) ).not.toBeNull();
+	} );
 } );

package/src/card/index.js

@@ -32,6 +32,8 @@ class Card extends Component {
 			isSmall,
 			isWhite,
 			noBorder,
+			// Only honoured on the core-card branch below.
+			size,
 			// Pass as `true` to render using WP Core's Card component: https://wordpress.github.io/gutenberg/?path=/docs/components-card--docs
 			__experimentalCoreCard,
 			// Pass props supported by WP Core's Card component in this single prop.
@@ -57,6 +59,7 @@ class Card extends Component {
 				isSmall,
 				isWhite,
 				noBorder,
+				size,
 				...otherProps,
 				...__experimentalCoreProps,
 			};

package/src/card/style-core.scss

@@ -59,6 +59,19 @@
 			}
 		}
 	}
+	&__is-vertical {
+		.newspack-card--core__header {
+			align-items: flex-start;
+			flex-direction: column;
+			height: 100%;
+			justify-content: flex-start;
+		}
+		.newspack-card--core__header-content {
+			display: flex;
+			flex-direction: column;
+			gap: wp-vars.$grid-unit-10;
+		}
+	}
 	&__no-margin .components-card__body {
 		padding: 0 !important;
 	}
@@ -202,6 +215,48 @@
 			}
 		}
 	}
+	&__is-selectable {
+		appearance: none;
+		border: 0;
+		color: inherit;
+		cursor: pointer;
+		font: inherit;
+		margin: 0;
+		padding: 0;
+		text-align: inherit;
+
+		&:hover {
+			box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
+
+			.newspack-card--core__header,
+			.newspack-card--core__header h1,
+			.newspack-card--core__header h2,
+			.newspack-card--core__header h3,
+			.newspack-card--core__header h4,
+			.newspack-card--core__header h5,
+			.newspack-card--core__header h6 {
+				color: var(--wp-admin-theme-color);
+			}
+		}
+
+		&:focus-visible {
+			box-shadow: inset 0 0 0 2px var(--wp-admin-theme-color);
+			outline: 2px solid transparent;
+		}
+
+		@media ( prefers-contrast: more ) {
+			&.newspack-card--core__is-active {
+				box-shadow: var(--wp-admin-theme-color) 0 0 0 2px;
+			}
+		}
+
+		@media ( forced-colors: active ) {
+			&.newspack-card--core__is-active {
+				outline: 3px solid CanvasText;
+				outline-offset: -3px;
+			}
+		}
+	}
 	&__is-active:not(.newspack-card--core__is-draggable) {
 		border-color: var(--wp-admin-theme-color);
 		box-shadow: var(--wp-admin-theme-color) 0 0 0 1px;
@@ -298,6 +353,10 @@
 			.newspack-card--core__is-small & {
 				padding: 16px;
 			}
+
+			.newspack-card--core__is-large & {
+				padding: wp-vars.$grid-unit-60;
+			}
 			.newspack-card--core__no-margin & {
 				padding: 0;
 			}

package/src/card-feature/README.md

@@ -7,6 +7,10 @@ A card component for presenting a named feature or setting with a predictable, s
 - **Maximum 2 cards per row.** Use `<Grid columns={ 2 }>` — never 3 or more. Cards are designed to be read, not scanned, and 3+ columns makes them too narrow for the content.
 - The icon is always displayed on the **right-hand side**, aligned to the top of the content.
 
+## Accessibility
+
+Cards sit side by side, so a bare "Enable" names no feature out of context. The card appends `title` to the primary button's accessible name ("Enable Metered Countdown") and to the "More" menu ("More options for Metered Countdown"). The visible label leads, so voice control still matches on the word the user can see. Nothing to pass — this is automatic.
+
 ## States
 
 | State | Condition | Button | Dropdown | Badge |

package/src/card-feature/index.test.js

@@ -0,0 +1,65 @@
+/**
+ * External dependencies.
+ */
+import { render, screen } from '@testing-library/react';
+
+/**
+ * WordPress dependencies.
+ */
+import { _x } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies.
+ */
+import CardFeature from './index';
+
+// The spy lives in the factory: @wordpress/components calls _x while it loads,
+// before a module-scope const would be initialized.
+jest.mock( '@wordpress/i18n', () => {
+	const actual = jest.requireActual( '@wordpress/i18n' );
+	return { ...actual, _x: jest.fn( text => text ) };
+} );
+
+describe( 'CardFeature', () => {
+	beforeEach( () => {
+		_x.mockClear();
+	} );
+
+	it( 'names the feature in the primary button, keeping the visible label first', () => {
+		render( <CardFeature title="Metered Countdown" /> );
+		const button = screen.getByRole( 'button', { name: 'Enable Metered Countdown' } );
+		expect( button ).toHaveTextContent( 'Enable' );
+		expect( button.getAttribute( 'aria-label' ).startsWith( button.textContent ) ).toBe( true );
+	} );
+
+	it( 'carries a custom label into the accessible name', () => {
+		render( <CardFeature title="Subscription retention" enableLabel="Change" /> );
+		expect( screen.getByRole( 'button', { name: 'Change Subscription retention' } ) ).toHaveTextContent( 'Change' );
+	} );
+
+	it( 'names the feature in the configure state too', () => {
+		render( <CardFeature title="Content Gifting" enabled /> );
+		expect( screen.getByRole( 'button', { name: 'Configure Content Gifting' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'names the feature in the More menu', () => {
+		render( <CardFeature title="Content Gifting" enabled moreControls={ [ { title: 'Disable', onClick: () => {} } ] } /> );
+		expect( screen.getByRole( 'button', { name: 'More options for Content Gifting' } ) ).toBeInTheDocument();
+	} );
+
+	it( 'gives the accessible-name order its own catalogue entry', () => {
+		render( <CardFeature title="Metered Countdown" /> );
+		expect( _x ).toHaveBeenCalledWith( '%1$s %2$s', 'accessible button name: visible action label, then feature name', 'newspack-plugin' );
+	} );
+
+	it( 'distinguishes two cards that share a button label', () => {
+		render(
+			<>
+				<CardFeature title="Metered Countdown" />
+				<CardFeature title="Content Gifting" />
+			</>
+		);
+		expect( screen.getByRole( 'button', { name: 'Enable Metered Countdown' } ) ).toBeInTheDocument();
+		expect( screen.getByRole( 'button', { name: 'Enable Content Gifting' } ) ).toBeInTheDocument();
+	} );
+} );

package/src/card-feature/index.tsx

@@ -6,7 +6,7 @@ import classnames from 'classnames';
 /**
  * WordPress dependencies
  */
-import { __ } from '@wordpress/i18n';
+import { __, _x, sprintf } from '@wordpress/i18n';
 import { isValidElement } from '@wordpress/element';
 import { DropdownMenu, __experimentalHStack as HStack } from '@wordpress/components'; // eslint-disable-line @wordpress/no-unsafe-wp-apis
 import { moreVertical } from '@wordpress/icons';
@@ -120,6 +120,12 @@ const CardFeature = ( {
 
 	const isConfigureState = enabled && ! requirements;
 	const buttonLabel = isConfigureState ? configureLabel ?? __( 'Configure', 'newspack-plugin' ) : enableLabel ?? __( 'Enable', 'newspack-plugin' );
+	const buttonAccessibleLabel = sprintf(
+		// translators: %1$s: the button's visible action label, e.g. "Enable". %2$s: the feature's name. The visible label must stay first (WCAG 2.5.3).
+		_x( '%1$s %2$s', 'accessible button name: visible action label, then feature name', 'newspack-plugin' ),
+		buttonLabel,
+		title
+	);
 	const showMoreControls = enabled && !! moreControls?.length && ( ! requirements || requirementsActionable );
 
 	const handleButtonClick = () => {
@@ -178,13 +184,18 @@ const CardFeature = ( {
 									isBusy={ busy }
 									onClick={ handleButtonClick }
 									size="compact"
+									aria-label={ buttonAccessibleLabel }
 								>
 									{ buttonLabel }
 								</Button>
 								{ showMoreControls && (
 									<DropdownMenu
 										icon={ moreVertical }
-										label={ __( 'More', 'newspack-plugin' ) }
+										label={ sprintf(
+											// translators: %s: the feature's name.
+											__( 'More options for %s', 'newspack-plugin' ),
+											title
+										) }
 										controls={ moreControls }
 										toggleProps={ { size: 'compact' } }
 									/>

package/src/color-picker/index.js

@@ -27,7 +27,7 @@ const { InteractiveDiv } = utils;
  *
  * @param {Object}             props             - Component props.
  * @param {JSX.Element|string} props.label       - Label for the color picker.
- * @param {JSX.Element|string} props.help        - Help text for the color picker.
+ * @param {JSX.Element|string} [props.help]      - Help text for the color picker.
  * @param {string}             [props.color]     - Default color.
  * @param {Function}           props.onChange    - Function to call when the color changes.
  * @param {string}             [props.className] - Additional class name.

package/src/confirm-dialog/README.md

@@ -54,7 +54,7 @@ const [ pendingAction, setPendingAction ] = useState( null );
 <ConfirmDialog
 	when={ hasUnsavedChanges }
 	isOpen={ !! pendingAction }
-	confirmButtonText="Discard changes"
+	confirmButtonText="Discard Changes"
 	isDestructive
 	hideTitle
 	onConfirm={ () => {
@@ -92,6 +92,7 @@ Accepts all `ConfirmDialog` props except `isOpen`, `onConfirm`, `onCancel`, and
 |-----|------|-------------|
 | `confirmDialog` | `React.ReactElement` | The dialog element — render this somewhere in your JSX. |
 | `requestConfirm` | `( callback: () => void ) => void` | Call with a callback to request confirmation. Shows the dialog (unless `when` is `false`); invokes the callback only if the user confirms. |
+| `cancelConfirm` | `() => void` | Withdraws a pending request without invoking its callback. Call it when whatever raised the prompt goes away on its own, so the dialog does not outlive it. |
 
 ### Usage
 
@@ -115,7 +116,7 @@ const { confirmDialog, requestConfirm } = useConfirmDialog( {
 const { confirmDialog, requestConfirm } = useConfirmDialog( {
 	when: isDirty,
 	message: 'You have unsaved changes that will be lost. Discard changes?',
-	confirmButtonText: 'Discard changes',
+	confirmButtonText: 'Discard Changes',
 	isDestructive: true,
 	hideTitle: true,
 } );

package/src/confirm-dialog/index.test.js

@@ -48,6 +48,29 @@ describe( 'ConfirmDialog navigation blocking', () => {
 		expect( history.location.pathname ).toBe( '/' );
 	} );
 
+	// v5 keeps a single prompt slot, so an unprompted re-sync would be caught by
+	// whichever dialog on the screen did install a blocker.
+	it( 'cancels an unprompted dialog without tripping another blocker', () => {
+		const historyRef = { current: null };
+		render(
+			<MemoryRouter>
+				<HistoryGrabber historyRef={ historyRef } />
+				<ConfirmDialog when confirmButtonText="Leave" cancelButtonText="Stay">
+					Wizard guard
+				</ConfirmDialog>
+				<ConfirmDialog isOpen confirmButtonText="Discard changes" cancelButtonText="Keep editing">
+					Unsaved changes
+				</ConfirmDialog>
+			</MemoryRouter>
+		);
+		const replaceSpy = jest.spyOn( historyRef.current, 'replace' );
+
+		cancelNavigation();
+		expect( dialog() ).not.toBeInTheDocument();
+		expect( screen.queryByText( 'Wizard guard' ) ).not.toBeInTheDocument();
+		expect( replaceSpy ).not.toHaveBeenCalled();
+	} );
+
 	it( 'replays a blocked push on confirm: re-sync replace first, then push, and re-arms the blocker', () => {
 		const history = renderWithHistory();
 		const replaceSpy = jest.spyOn( history, 'replace' );
@@ -140,3 +163,126 @@ describe( 'ConfirmDialog navigation blocking', () => {
 		expect( dialog() ).toBeInTheDocument();
 	} );
 } );
+
+// `useHistory` returns undefined outside a wizard, where `newspack-multibranded-site`
+// runs react-router v6 against this package's v5.
+describe( 'ConfirmDialog without a router', () => {
+	const renderUnrouted = ( props = {} ) =>
+		render(
+			<ConfirmDialog isOpen confirmButtonText="Discard changes" cancelButtonText="Keep editing" { ...props }>
+				Unsaved changes
+			</ConfirmDialog>
+		);
+
+	it( 'cancels with no history to re-sync', () => {
+		const onCancel = jest.fn();
+		renderUnrouted( { onCancel } );
+		expect( dialog() ).toBeInTheDocument();
+
+		cancelNavigation();
+		expect( onCancel ).toHaveBeenCalled();
+		expect( dialog() ).not.toBeInTheDocument();
+	} );
+
+	it( 'confirms with no history to re-sync', () => {
+		const onConfirm = jest.fn();
+		renderUnrouted( { onConfirm } );
+
+		confirmNavigation();
+		expect( onConfirm ).toHaveBeenCalled();
+		expect( dialog() ).not.toBeInTheDocument();
+	} );
+
+	it( 'installs no blocker when asked to block without a router', () => {
+		expect( () => renderUnrouted( { when: true } ) ).not.toThrow();
+		expect( dialog() ).toBeInTheDocument();
+	} );
+} );
+
+describe( 'ConfirmDialog controlled by isOpen', () => {
+	const tree = isOpen => (
+		<ConfirmDialog isOpen={ isOpen } confirmButtonText="Discard changes" cancelButtonText="Keep editing">
+			Unsaved changes
+		</ConfirmDialog>
+	);
+
+	it( 'closes when isOpen goes false', () => {
+		const { rerender } = render( tree( true ) );
+		expect( dialog() ).toBeInTheDocument();
+
+		rerender( tree( false ) );
+		expect( dialog() ).not.toBeInTheDocument();
+	} );
+
+	it( 'opens again afterwards', () => {
+		const { rerender } = render( tree( true ) );
+		rerender( tree( false ) );
+
+		rerender( tree( true ) );
+		expect( dialog() ).toBeInTheDocument();
+	} );
+
+	it( 'leaves a blocked navigation prompt up', () => {
+		const historyRef = { current: null };
+		render(
+			<MemoryRouter>
+				<HistoryGrabber historyRef={ historyRef } />
+				<ConfirmDialog when isOpen={ false } confirmButtonText="Discard changes" cancelButtonText="Keep editing">
+					Unsaved changes
+				</ConfirmDialog>
+			</MemoryRouter>
+		);
+
+		act( () => historyRef.current.push( '/next' ) );
+		expect( dialog() ).toBeInTheDocument();
+	} );
+
+	it( 'withdraws a blocked navigation prompt when isOpen goes false', () => {
+		const historyRef = { current: null };
+		const withOpen = isOpen => (
+			<MemoryRouter>
+				<HistoryGrabber historyRef={ historyRef } />
+				<ConfirmDialog when isOpen={ isOpen } confirmButtonText="Discard changes" cancelButtonText="Keep editing">
+					Unsaved changes
+				</ConfirmDialog>
+			</MemoryRouter>
+		);
+		const { rerender } = render( withOpen( true ) );
+		act( () => historyRef.current.push( '/next' ) );
+		expect( dialog() ).toBeInTheDocument();
+
+		rerender( withOpen( false ) );
+		expect( dialog() ).not.toBeInTheDocument();
+		expect( historyRef.current.location.pathname ).toBe( '/' );
+
+		// Confirming the next prompt must not replay the abandoned destination.
+		rerender( withOpen( true ) );
+		confirmNavigation();
+		expect( historyRef.current.location.pathname ).toBe( '/' );
+	} );
+} );
+
+describe( 'ConfirmDialog named by a hidden title', () => {
+	it( 'takes its accessible name from the title while hiding the header', () => {
+		render(
+			<ConfirmDialog isOpen hideTitle title="Unsaved changes" confirmButtonText="Discard changes">
+				You have unsaved changes that will be lost. Discard changes?
+			</ConfirmDialog>
+		);
+
+		const frame = screen.getByRole( 'dialog', { name: 'Unsaved changes' } );
+		expect( frame ).toHaveClass( 'newspack-modal--hide-title' );
+		expect( frame.querySelector( '.components-modal__header' ) ).toContainElement( screen.getByRole( 'heading', { name: 'Unsaved changes' } ) );
+	} );
+
+	it( 'has no accessible name without a title', () => {
+		render(
+			<ConfirmDialog isOpen hideTitle confirmButtonText="Discard changes">
+				You have unsaved changes that will be lost. Discard changes?
+			</ConfirmDialog>
+		);
+
+		expect( screen.queryByRole( 'dialog', { name: 'Unsaved changes' } ) ).not.toBeInTheDocument();
+		expect( screen.getByRole( 'dialog' ) ).not.toHaveAttribute( 'aria-labelledby' );
+	} );
+} );

package/src/confirm-dialog/index.tsx

@@ -79,21 +79,26 @@ function ConfirmDialog(
 
 	const handleOnCancel = useCallback( () => {
 		setShowDialog( false );
+		const hadPendingNavigation = !! pendingNavigation.current;
 		pendingNavigation.current = null;
 		// A POP may have moved the URL to the target before it was blocked; put
 		// it back so the address bar matches the page the user chose to stay on.
-		bypassBlock.current = true;
-		try {
-			history.replace( history.location );
-		} finally {
-			bypassBlock.current = false;
+		// Only when this instance blocked it: v5 keeps one prompt slot, so an
+		// unprompted replace is caught by whichever dialog did install a blocker.
+		if ( hadPendingNavigation && history ) {
+			bypassBlock.current = true;
+			try {
+				history.replace( history.location );
+			} finally {
+				bypassBlock.current = false;
+			}
 		}
 		onCancel();
 	}, [ onCancel, history ] );
 
 	// Block navigation when there are unsaved changes.
 	useEffect( () => {
-		if ( ! when ) {
+		if ( ! when || ! history ) {
 			return;
 		}
 		const unblock = history.block( ( location: string, action: string ) => {
@@ -124,10 +129,19 @@ function ConfirmDialog(
 		return unblock;
 	}, [ when, history ] );
 
-	// Show the dialog imperatively without blocking navigation.
+	// During render: a commit later the dialog would still hold focus while the
+	// caller unmounted. The blocker above raises it without touching `isOpen`.
+	const [ wasOpen, setWasOpen ] = useState( isOpen );
+	if ( wasOpen !== isOpen ) {
+		setWasOpen( isOpen );
+		setShowDialog( isOpen );
+	}
+
+	// A withdrawn prompt releases what the blocker held, as confirm and cancel do.
+	// After the commit, so a discarded render cannot drop a live one.
 	useEffect( () => {
-		if ( isOpen ) {
-			setShowDialog( true );
+		if ( ! isOpen ) {
+			pendingNavigation.current = null;
 		}
 	}, [ isOpen ] );
 

package/src/dataviews/index.tsx

@@ -19,11 +19,11 @@ import classnames from 'classnames';
  */
 import './style.scss';
 
-type DataViewsProps = React.ComponentProps< typeof BaseDataViews > & {
+type DataViewsProps< Item > = React.ComponentProps< typeof BaseDataViews< Item > > & {
 	className?: string;
 };
 
-export default function DataViews( { className, ...props }: DataViewsProps ) {
+function DataViews( { className, ...props }: DataViewsProps< unknown > ) {
 	return (
 		<div className={ classnames( 'newspack-dataviews', className ) }>
 			<BaseDataViews { ...props } />
@@ -31,4 +31,13 @@ export default function DataViews( { className, ...props }: DataViewsProps ) {
 	);
 }
 
+// The implementation is typed against the `unknown` instantiation because
+// BaseDataViews' conditionally-optional `getItemId` prop cannot be related
+// to a JSX spread while `Item` is an unresolved type parameter. The export
+// re-types it with the generic signature so call sites get item-aware
+// typing for `data`, `fields`, `actions`, `getItemId`, etc. The assertion
+// is verified by the compiler: the generic signature is assignable to the
+// implementation's concrete one.
+export default DataViews as < Item >( props: DataViewsProps< Item > ) => React.JSX.Element;
+
 export type { Action, Field, View } from '@wordpress/dataviews';

package/src/divider/index.js

@@ -12,6 +12,19 @@ import './style.scss';
  */
 import classNames from 'classnames';
 
+/**
+ * Divider component.
+ *
+ * Every prop beyond the documented ones is forwarded to the `hr` element.
+ *
+ * @param {import('react').ComponentPropsWithoutRef<'hr'> & {
+ *   alignment?: string,
+ *   marginBottom?: number|string,
+ *   marginTop?: number|string,
+ *   variant?: string,
+ * }} props - Component props: the documented options plus any `hr` attribute.
+ * @return {JSX.Element} Divider component.
+ */
 const Divider = ( { alignment = 'none', className = undefined, marginBottom = 64, marginTop = 64, variant = 'default', ...otherProps } ) => {
 	const classes = classNames(
 		'newspack-divider',