diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9c45b1258c5e..75cd355017d7 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,6 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `31.6.0`.
+- Added `whiteSpace` prop to `EuiCodeBlock`. ([#4475](https://github.com/elastic/eui/pull/4475))
 
 ## [`31.6.0`](https://github.com/elastic/eui/tree/v31.6.0)
 
diff --git a/src-docs/src/views/code/code_example.js b/src-docs/src/views/code/code_example.js
index 47ae5606530f..1875b076cc57 100644
--- a/src-docs/src/views/code/code_example.js
+++ b/src-docs/src/views/code/code_example.js
@@ -4,7 +4,7 @@ import { renderToHtml } from '../../services';
 
 import { GuideSectionTypes } from '../../components';
 
-import { EuiCode, EuiCodeBlockImpl } from '../../../../src/components';
+import { EuiCode, EuiCodeBlock } from '../../../../src/components';
 import { codeBlockConfig, codeConfig } from './playground';
 
 import Code from './code';
@@ -46,6 +46,7 @@ export const CodeExample = {
         </p>
       ),
       snippet: codeSnippet,
+      props: { EuiCode },
       demo: <Code />,
     },
     {
@@ -69,7 +70,7 @@ export const CodeExample = {
         </p>
       ),
       snippet: codeBlockSnippet,
-      props: { EuiCodeBlockImpl },
+      props: { EuiCodeBlock },
       demo: <CodeBlock />,
     },
     {
@@ -93,7 +94,7 @@ export const CodeExample = {
           line breaks are in the content.
         </p>
       ),
-      props: { EuiCodeBlockImpl },
+      props: { EuiCodeBlock },
       demo: <CodeBlockPre />,
     },
   ],
diff --git a/src/components/code/_code_block.tsx b/src/components/code/_code_block.tsx
index 606911bf7c56..88680c664951 100644
--- a/src/components/code/_code_block.tsx
+++ b/src/components/code/_code_block.tsx
@@ -38,7 +38,6 @@ import { useInnerText } from '../inner_text';
 import { useMutationObserver } from '../observer/mutation_observer';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiOverlayMask } from '../overlay_mask';
-import { FontSize, PaddingSize } from './code_block';
 
 const fontSizeToClassNameMap = {
   s: 'euiCodeBlock--fontSmall',
@@ -46,6 +45,9 @@ const fontSizeToClassNameMap = {
   l: 'euiCodeBlock--fontLarge',
 };
 
+type PaddingSize = 'none' | 's' | 'm' | 'l';
+type FontSize = 's' | 'm' | 'l';
+
 export const FONT_SIZES = keysOf(fontSizeToClassNameMap);
 
 const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
@@ -57,7 +59,7 @@ const paddingSizeToClassNameMap: { [paddingSize in PaddingSize]: string } = {
 
 export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
-interface Props {
+export interface EuiCodeBlockImplProps {
   className?: string;
   fontSize?: FontSize;
 
@@ -73,6 +75,8 @@ interface Props {
 
   /**
    * Sets the syntax highlighting for a specific language
+   * @see http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
+   * for options
    */
   language?: string;
   overflowHeight?: number;
@@ -90,7 +94,7 @@ interface Props {
  * This is the base component extended by EuiCode and EuiCodeBlock.
  * These components share the same propTypes definition with EuiCodeBlockImpl.
  */
-export const EuiCodeBlockImpl: FunctionComponent<Props> = ({
+export const EuiCodeBlockImpl: FunctionComponent<EuiCodeBlockImplProps> = ({
   transparentBackground = false,
   paddingSize = 'l',
   fontSize = 's',
diff --git a/src/components/code/code.tsx b/src/components/code/code.tsx
index 4bbaffd3f772..8a3b087d9c45 100644
--- a/src/components/code/code.tsx
+++ b/src/components/code/code.tsx
@@ -21,27 +21,12 @@ import { CommonProps } from '../common';
 
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 
-import { EuiCodeBlockImpl } from './_code_block';
+import { EuiCodeBlockImpl, EuiCodeBlockImplProps } from './_code_block';
 
-export interface EuiCodeSharedProps {
-  /**
-   * Sets the syntax highlighting for a specific language
-   * @see http://highlightjs.readthedocs.io/en/latest/css-classes-reference.html#language-names-and-aliases
-   * for options
-   */
-  language?: string;
-  transparentBackground?: boolean;
-}
+export type EuiCodeProps = CommonProps &
+  Pick<EuiCodeBlockImplProps, 'language' | 'transparentBackground'> &
+  HTMLAttributes<HTMLElement>;
 
-interface Props extends EuiCodeSharedProps {
-  inline?: true;
-}
-
-export type EuiCodeProps = CommonProps & Props & HTMLAttributes<HTMLElement>;
-
-export const EuiCode: FunctionComponent<EuiCodeProps> = ({
-  inline,
-  ...rest
-}) => {
+export const EuiCode: FunctionComponent<EuiCodeProps> = ({ ...rest }) => {
   return <EuiCodeBlockImpl inline={true} {...rest} />;
 };
diff --git a/src/components/code/code_block.tsx b/src/components/code/code_block.tsx
index 58298a048b70..a85b7e5cceae 100644
--- a/src/components/code/code_block.tsx
+++ b/src/components/code/code_block.tsx
@@ -20,26 +20,13 @@
 import React, { FunctionComponent, HTMLAttributes } from 'react';
 import { CommonProps } from '../common';
 
-import { EuiCodeBlockImpl } from './_code_block';
-import { EuiCodeSharedProps } from './code';
-
-export type PaddingSize = 'none' | 's' | 'm' | 'l';
-export type FontSize = 's' | 'm' | 'l';
-
-interface OwnProps extends EuiCodeSharedProps {
-  inline?: false;
-  paddingSize?: PaddingSize;
-  fontSize?: FontSize;
-  overflowHeight?: number;
-  isCopyable?: boolean;
-}
+import { EuiCodeBlockImpl, EuiCodeBlockImplProps } from './_code_block';
 
 export type EuiCodeBlockProps = CommonProps &
-  OwnProps &
+  Omit<EuiCodeBlockImplProps, 'inline'> &
   HTMLAttributes<HTMLElement>;
 
 export const EuiCodeBlock: FunctionComponent<EuiCodeBlockProps> = ({
-  inline,
   ...rest
 }) => {
   return <EuiCodeBlockImpl inline={false} {...rest} />;